I have two text inputs and each has a submit button. Each button has an on click AJAX function that calls a php script and populates the page.
I need to find a way to make the enter key submit the button of the input text focused.
For example if I type something the in the "product_code" input text and press the Enter key I want to call the AJAX function of that input's assigned button (getByCode()).
Product name: <input type="text" name="product_name" id="product_name">
<input type="submit" value="Search" onClick="searchByName(document.getElementById('product_name').value)"> <br />
Product code: <input type="text" name="product_code" id="product_code">
<input type="submit" value="Search" onClick="getByCode(document.getElementById('product_code').value)"> <br />
I don't necessarily require input buttons, I could use images for example if that helps.
All browsers support document.activeElement which will tell you which element has focus. On your keypress event handler, check this value against your two inputs to see which has focus. If neither has focus, then ... ?
Related
hope You all have a great day.Here I'm trying to create a form without submit buttons,but when press enter on the text-box the whole text-box gonna hide.why is this is happening?,is it actually possible to create a form without a submit button or is that is a mandatory thing?,thanks for Your valuable time.
<form >
<input type="number" name="cbarcode" id="cbarcode" autofocus/>
</form>
When you hit 'enter' it submits the form.
I believe this is a natural part of a 'form' behavior for accessibility. Input inside of a form is meant to be data the user sends or inserts somewhere which is likely the reasoning behind this.
You can add to the Html form onsubmit="return false" or return preventDefault() as an event handler / function with other handling code you may want to provide.
Try this:
<form onsubmit="return false;">
<input type="number" name="cbarcode" id="cbarcode" autofocus/>
</form>
I have a simple (mostly-working) submission form:
<form action="http://127.0.0.1:3000/books" method="POST" class="addBook">
<input type="text" placeholder="Title" name="title" required>
<input type="text" placeholder="ISBN" name="isbn" required>
<button id="submitBook" type="submit" onclick="addingBooks()">Submit</button>
</form>
My form properly adds the input values to my database and it then appears in the DOM when I go back and refresh the page.
I have applied an preventDefault() function in my JavaScript code for the 'addingBooks()' function to stop it from submitting twice, but I am still unable to stop it from forwarding to the action page after submission which only shows the JSON of the submitted data.
If you need more then please let me know.
To prevent the default action of an event you'll need an event object to call preventDefault on. Some browser do in fact have a global event object but that might not be reliable.
The simplest option would be to return false from the onlick event, not from a function you call in it
<button id="submitBook" type="submit" onclick="addingBooks();return false;">Submit</button>
another simple and better solution would be to make the button be a regular button instead of a submit button and remove the preventDefault from addingBooks.
<button id="submitBook" type="button" onclick="addingBooks()">Submit</button>
another and even better solution would be to not use the onclick attribute at all, use the addEventListener function
document.getElementById('submitBook').addEventListener("click", function(e){
e.preventDefault();
//other stuff
});
When focus is placed into an input of this form, iPhone shows input keyboard and Go button, which acts as submit. Is it possible to change the label to e.g. "Create"? I tried value, title or name but none of those work.
<form>
<input name="foo" type="text"/>
<input type="submit" name="Create" value="Create" title="Create"/>
</form>
No, something like this is not possible.
I have a form where I have a search functionality with a text box(TextBox1) and a submitt button(Button1). Apart from search, there is another set of textbox(TextBox2) and submitt button(Button2). When I write something in search box(TextBox1), and hit enter, the validation message of the second textbox(TextBox2) is shown.
I am not sure how to bind the respective textboxes with submitt buttons. Please help.
Thanks in advance
Depending on how much control you have, the easiest way would be to have separate forms for each texbox/button combo.
<form action="dosomething.php">
<input type="text" name="foo" />
<input type="submit" />
</form>
<form action="dosomethingelse.php">
<input type="text" name="bar" />
<input type="submit" />
</form>
If you can't or don't want to do that, you'll need to look at handling the onkeydown event on the text boxes to prevent an automatic submission. Something like <input type="Text" name="foo" onkeydown="doSubmit(this); return false;" />. Note the return false;, which prevents the default action from taking place.
In IE 7 the zip code search form on my page reacts differently when someone clicks submit vs pressing enter. It works correctly when sumbmit is clicked and incorrectly when enter is pressed.
http://getridofit.com
<form name="zip" action="<?php bloginfo('url'); ?>" method="get">
<input type="text" id="zipper" name="locations" size="5" maxlength="5" class="junk-input" onsubmit="return checkForm()" />
<input type="submit" value="" name="schedule" src="/wp-content/uploads/remove-my-junk.png" align="center" class="junk-button" style="background: #f67a3e url(/wp-content/uploads/remove-my-junk.png); border: none; width: 201px; height: 45px;"/>
</form>
The correct result for a zip search of 85718 looks like this: http://getridofit.com/l/85718/?schedule
but pressing enter produces a result like this: http://getridofit.com/l/85718/
Because the button wasnt clicked in order to submit the form. If you dont click the button then the input for #name[schedule] isnt sent. However if that button input has focus when enter is pressed i think it will send it along properly... You might jsut want to make schedule a hidden input.
It looks like you are checking for the presence of the submit button variable (schedule) in the URL bar. The submit button variable is only supposed to be submitted when the user physically clicks the the submit button. However, I can't reproduce the problem in Safari, so it may also depend on what your JavaScript is doing when the form is submitted.