I have a simple form with one input. How do I get that input form field to immediately highlight for text entry after the page loads?
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title" style="text-align: center;">Enter the number</h4>
...
<!-- Modal body -->
<div class="modal-body mx-auto">
<div class="btn-group-vertical my-5" role="group" aria-label="Basic example">
<input id="phoneNumber" type="tel"></input>
For context: It's a modal that allows the user to call a telephone number from the web page. Currently, you have to click the input field to start typing the number. I want the user to be able to just start typing the number out on page load and have the number fill out in the form field.
Snippet of code above simply shows the key parts of the form for reference. Please let me know if more code is required.
You need to add autofocus to the input
<input id="phoneNumber" type="tel" autofocus>
I am doing a little application to enter 2D codes automatically way with a scanner when a product passed for a production line. I am looking for this data it enters, without the need to do focus on the input. So far I have...
<div class="container mt-5">
<div class="form-row">
<div class="col-4"> <label for='panel'><b>Panel</b></label> </div>
</div>
<div class="form-row">
<div class="col-4">
<input type="text" name="panel" #panel="ngModel" [(ngModel)]="bar_code" (keyup.enter)="onEnter()" class="form-control" required autofocus>
</div>
How the scanner add a enter (end of line) I used the event (keyup.enter), and this is working perfect, but the cursor must always be on the input, so if somebody clicks outside of the input, I'll lose trace of some product, until somebody clicks inside again.
Then, in the component.ts I don't have any problem, because I use a function such as the follow.
onEnter() {
console.log(this.bar_code);
//Here is the function for send to backend
this.bar_code=null; //let white the imput.
}
so I'm trying to use binding in Angular2 so that when someone selects a name from a dropdown menu at the top of my webapp then that name replaces specific placeholders throughout the form so it displays the person's name rather than "this person" or "your teammate".
Not only do I want the name value of the object to be substituted into those placeholders, but I also want the email value to be pulled as well so that I can call on that from a mailing service when I press submit to send an email.
I've managed to get the binding working, so at the moment when I select the name it inserts it into the text, but I'm having trouble figuring out how to make placeholders that can be replaced with the selected name.
Also, how can I pull 2 values (name & email) from one ng-model?
an excerpt of my code:
<div id="toggle" class="row">>
<div class="dropdown">
<div class='col-md-6 col-md-offset-5'>
<select [(ngModel)]="selectedTeammate.name">
<option *ngFor="let teammate of teammates" value= {{teammate.name}}>{{teammate.name}}</option>
</select>
</div>
</div>
</div> s
<form>
<div id="questions">
<div id="question1" class="row">
<div id="questionbox" class='col-md-10 col-md-offset-1'>
<p>{{question1a}} {{ selectedTeammate.name }} {{question1b}} {{ selectedTeammate.name }} {{question1c}}</p>
</div>
<div id="textbox" class='col-md-6 col-md-offset-3'>
<textarea id="styled" placeholder="Why or why not?"></textarea>
</div>
</div>
<div id="question2" class="row">
<div id="questionbox" class='col-md-10 col-md-offset-1'>
<p>{{question2a}} {{selectedTeammate.name }} {{question2b}}</p>
</div>
<div id="textbox" class='col-md-6 col-md-offset-3'>
<textarea id="styled" onfocus="this.value=''; setbg('#e5fff3');" placeholder="Please provide a brief explanation"></textarea>
</div>
</div>
What it looks like:
The selected name is inserted into the string, but I need a placeholder to fill the gap in the sentence until a name is selected
If anyone can help me with my dropdown menu as well, then that would be absolutely fantastic! I've tried bootstrapping my dropdown to make it prettier, and even copied code from the bootstrap website to test, but the dropdown doesn't display any of the options when clicked. Here is the code I'm using for it.
<div class="dropdown row">
<div id="dropdown column" col-md-3 col-md-offset-3 style="margin: 0 auto; text-align: center;">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" >Select a teammate youve worked with!
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
The dropdown displays correctly, but when clicked nothing happens and I don't see any of the list objects. I need this to work with ngFor just like the above dropdown does.
I'm also having issues trying to setup a favicon for the site.
I've included this in my of my index file:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
and here is the file path of my favicon image:
C:\Users\user1\Desktop\Projects\sds-app\src\app\assets\Pictures\favicon.ico
I know this is a lot and maybe not formatted in the best manner, but let me know if there is any additional information you'd like. If you can help me with any of these questions I'd very much appreciate it!
Thanks!
In bootstrap select option you can show default show option as Select so you have to add one more line as option.
<select [(ngModel)]="selectedTeammate.name">
<option value="">Select</option>
<option *ngFor="let teammate of teammates" value= {{teammate.name}}>{{teammate.name}}</option>
</select>
So code will look like this.
Using ngValue you can pull the whole Object from your [(ngModel). To set a "placeholder" for your Object, so that you have some value there in your view until replaced with your chosen teammate, you can initialize the selectedTeammate with some values, e.g:
selectedTeammate: Object = {id: null, name: 'your teammate', e-mail: ''};
And as mentioned, use ngValue to bind the whole object, and change the ngModel to be e.g selectedTeammate like I have used in these examples.
<select [(ngModel)]="selectedTeammate">
<option *ngFor="let teammate of teammates" [ngValue]="teammate">{{teammate.name}}</option>
</select>
Now when you have chosen a teammate, selectedTeammate consits of the whole object, not only the name. From there you can pull the e-mail related to that teammate.
Hope this helps! :)
Demo plunker
im very new to html and am making a basic rock paper scissor page where you can select the image to choose your action. My issue is that it always selects the last option in the html.
<form action="/result <%#choice = "rock"%>">
<div id="rock_button" class="slideRight">
<input type="image" src="http://i.imgur.com/XT41ZXk.jpg" alt="Rock";>
</div>
</form>
<form action="/result <%#choice = "paper"%>">
<div id="paper_button" class="slideUp">
<input type="image" src="http://i.imgur.com/r1GckhD.jpg" alt="Paper";>
</div>
</form>
<form action="/result <%#choice = "scissors"%>">
<div id="scissors_button" class="slideLeft">
<input type="image" src="http://i.imgur.com/ttUlD5y.jpg" alt="Scissors";>
</div>
</form>
So from the above code, #choice is always set to "scissors". regardless of which picture is clicked on. ive tried putting onclick="<%#choice = "paper"%>" within th input, without any luck and creating one large form for all three picures but nothing has worked. Thanks for any help provided.
The choice variable is only used within the current page: Before any of the images is even clicked.
Use one form. Use buttons. Give them a name and a value. Read the form data in the server side program that acts as your form handler.
<form action="/result">
<button id="rock_button" class="slideRight" name="choice" value="rock">
<img src="http://i.imgur.com/XT41ZXk.jpg" alt="Rock">
</button>
<button id="paper_button" class="slideUp" name="choice" value="paper">
<img src="http://i.imgur.com/r1GckhD.jpg" alt="Paper">
</button>
<button id="scissors_button" class="slideLeft" name="choice" value="scissors">
<img src="http://i.imgur.com/ttUlD5y.jpg" alt="Scissors">
</button>
</form>
Then, in the program that handles the /result URL, you would do something along the lines of:
my $choice = $c->request->params->{choice};
The specifics depending on your choice of server side language.
I'm having trouble when trying to click a search button on a webpage via Excel VBA. Actually, my real issue has to deal with the particular webpage not seeing that I entered something in the search box. After I click the search button on the webpage I get the message saying "Provide a number or company name to search" when there's already something in the search box.
Before the Text is entered into the Search Box:
After the Text is entered into the Search Box & the Search button is clicked:
Here's the portion of the HTML source where the button (and onclick event) is present. The specific line for the button is
<a href="#" class="add-on" data-bind="click: performSupplierSearch"><i class="icon-search">
<div class="row-fluid">
<div class="span6">
<h4>Search for the supplier you wish to Log in as:</h4>
<span class="helpText-SearchSupplier">Search by name or number</span>
</div>
</div>
<div class="row-fluid block">
<div class="span4 input-append pull-left">
<input id="supplierSearchTextBox" data-bind="value: searchQuery, valueUpdate: 'afterkeydown', onEnter: performSupplierSearch" type="text" class="input-xlarge" autocomplete="off" placeholder="Search Suppliers" />
<i class="icon-search"></i>
</div>
</div>
<div class="row-fluid" data-bind="visible: searched() && supplierSearchResults().length == 0">
<div class="span12">
<div class="alert ">
<strong><i class="icon-warning-sign"></i> 0 results returned </strong>
</div>
</div>
</div>
<div class="row-fluid" data-bind="visible: (searchMessage().length > 0)">
<div class="span12">
<div class="alert ">
<strong><i class="icon-warning-sign"></i><span data-bind="text: searchMessage"></span></strong>
</div>
</div>
</div>
When I inspect the elements of the HTML and click on the Search button it invokes y.handle, which I followed to a jquery file and found these two code snippets that mention said y
(p=y.events)||(p=y.events={})
amidst this function in the jquery file
add:function(n,r,u,f,e){var b,p,k,w,c,l,a,v,h,d,g,y=i._data(n);if(y){for(u.handler&&(w=u,u=w.handler,e=w.selector),u.guid||(u.guid=i.guid++),(p=y.events)||(p=y.events={}),(l=y.handle)||(l=y.handle=function(n){return typeof i===o||n&&i.event.triggered===n.type?t:i.event.dispatch.apply(l.elem,arguments)},l.elem=n),r=(r||"").match(s)||[""],k=r.length;k--;)b=sr.exec(r[k])||[],h=g=b[1],d=(b[2]||"").split(".").sort(),c=i.event.special[h]||{},h=(e?c.delegateType:c.bindType)||h,c=i.event.special[h]||{},a=i.extend({type:h,origType:g,data:f,handler:u,guid:u.guid,selector:e,needsContext:e&&i.expr.match.needsContext.test(e),namespace:d.join(".")},w),(v=p[h])||(v=p[h]=[],v.delegateCount=0,c.setup&&c.setup.call(n,f,d,l)!==!1||(n.addEventListener?n.addEventListener(h,l,!1):n.attachEvent&&n.attachEvent("on"+h,l))),c.add&&(c.add.call(n,a),a.handler.guid||(a.handler.guid=u.guid)),e?v.splice(v.delegateCount++,0,a):v.push(a),i.event.global[h]=!0;n=null}},remove:function(n,t,r,u,f)
I don't know if the jquery code will help at all, but I figure it couldn't hurt to give as much information as I could to increase the odds of at least one person being able to help me resolve this.
Here is the portion of my code where I'm attempting to enter the text and click the button
'Select Search Box
IE.document.GetElementByID("supplierSearchTextBox").Focus
'Fill in Search Box
IE.document.GetElementByID("supplierSearchTextBox").Value = "Test"
delay 3
'Click Search button
Dim searchButton As Object
'6th a tag so index 5
Set searchButton = IE.document.GetElementsByTagName("a")(5)
searchButton.Click
Am I entering the Value in the wrong way/with the wrong method or does it have something to do with the onclick event that's attached to the search button that is the problem? How can I get the code to work correctly?
After hours of searching, scouring over each section of code, and much digging around countless forums I finally found a solution that may help others in the future. I realized that my issue has to deal with the way the value/textbox updates (using the valueUpdate: 'afterkeydown', which means the code is looking for actual keypress events, which is why it wouldn't see the string when I inserted it into the text field via the vba code. Since I discovered that .fireEvent() doesn't work on newer versions of Internet Explorer, I felt like all was lost and that I would have to revert to the unreliable Sendkeys() method that everyone says to avoid. But, just before I was about to give up for the night I came across this little gem where user dyanisis2 provides this method after their long search for the same issue yielded this solution
Set evt = ie.Document.createEvent("keyboardevent")
evt.initEvent "change", True, False
PW.all(0).dispatchEvent evt
Replace PW with your object.
Placing this bit of code after entering a value into the field that needs to detect a keypress will simulate a keypress event, therefore updating the value in the text field and allowing the code to recognize that there is something in the field.
Just want to confirm this worked for me.
just replaced PW.all.(0) at the last line.
IE.Document.forms(0).getElementsByTagName("select")(1).dispatchEvent evt