Because we use orbeon xforms, we don't know the id of the button tag.
What we would like is the Enter key to trigger a button that contains a certain string value.
If my form contains a Check button like so:
<button id"random">Check</button>
I would like my javascript button to trigger it with something like:
find the button that has value "Check" and click it when Enter is pressed.
Updated code, since I didn't see your markup (which contained <button> instead of <input>)
I would use JQuery here since selecting the buttons you are looking for could be more difficult using Pure JS only.
Something like this should work:
$(
function(){
$(document).keydown(function(){
if (event.keyCode == '13') {
event.preventDefault();//stop what normally happens..
//..like submitting a form maybe
//$("input[type='submit'][value='Check']").click();
$("button").each(function(i){
if($(this).text() == "Check")
{
$(this).click();
}
})
}
});
}
);
With markup like this:
<button id="random" onclick="alert('clicked 0');">Check</button>
<button id="random2" onclick="alert('clicked 1');">Something else</button>
<button id="random3" onclick="alert('clicked 2');">Third Button</button>
See Demo : http://jsfiddle.net/giddygeek/Caxae/3/
(Click/Focus on the result pane and hit the Enter key)
Related
I have a HTML form where I use several buttons. The problem is that no matter which button I click, the form will get submitted even if the button is not of type "submit". e.g. Buttons like :<button>Click to do something</button>, result in form submission.
It's quite painful to do an e.preventDefault() for each one of these buttons.
I use jQuery and jQuery UI and the website is in HTML5.
Is there a way to disable this automatic behavior?
Buttons like <button>Click to do something</button> are submit buttons.
Set type="button" to change that. type="submit" is the default (as specified by the HTML spec):
The missing value default and invalid value default are the Submit Button state.
You could just try using return false (return false overrides default behaviour on every DOM element) like that :
myform.onsubmit = function ()
{
// do what you want
return false
}
and then submit your form using myform.submit()
or alternatively :
mybutton.onclick = function ()
{
// do what you want
return false
}
Also, if you use type="button" your form will not be submitted.
<button>'s are in fact submit buttons, they have no other main functionality. You will have to set the type to button.
But if you bind your event handler like below, you target all buttons and do not have to do it manually for each button!
$('form button').on("click",function(e){
e.preventDefault();
});
if you want to add directly to input as attribute, use this
onclick="return false;"
<input id = "btnPlay" type="button" onclick="return false;" value="play" />
this will prevent form submit behaviour
Like mas-designs said, call preventDefault(). You can call it on the form itself. Here's a function that does this for all forms, vanilla JS.
function forms_ini(){
for(var form of document.getElementsByTagName('form')){
form.addEventListener('submit', function(ev){
ev.preventDefault()
})
}
}
another one:
if(this.checkValidity() == false) {
$(this).addClass('was-validated');
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
I was working with the jquery-3.4.1 when I came across this strange behavior of the jquery selector.
The html section of the particular submit button is as follows:
<input type="submit" id="submit">
Initially, I used the following code to select the only submit button on my page. But, it didn't work.
$('submit').on('click', function(e){
e.preventDefault();
alert('stopped');
})
Then, I tried to be more specific and used the following code to select that submit button on the basis of an id.
$('#submit').on('click', function(e){
e.preventDefault();
alert('stopped');
})
Once again, the results were the same. Then I selected all the submit buttons on the page and the code started working. The code is as follows:
$(':submit').on('click', function(e){
e.preventDefault();
alert('stopped');
})
Now, my question is that why this piece of code worked and the others were not working ? Is there anything wrong with the code ? Or was this because I used the same id as the input type ?
$('submit').on('click', function(e){
e.preventDefault();
alert('stopped');
})
in this one you should use # from id or . for class
but it's best to use class for you select like this
$('.submit-form').on('click', function(e){
e.preventDefault();
alert('stopped');
})
<input type="submit" class="submit-form" id="submit">
and in your code just on tag should have id with name submit
because id name is unique
ok this sounds weird, but i have two submit buttons.
</input type="submit" name="btn1" id ="btn1"/>
</input type="submit" name="btn2" id ="btn2"/>
is there a way I can bind both to click together when I click one of them?
thanks.
You can using javascript
follow http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
you simply submit the second form in the function
You can write a wrapper for the second method.
onclick = "CallBoth()";
onclick = "CallOne()";
function CallBoth()
{
...
return CallOne();
}
function CallOne()
{
...
return whatever;
}
Using jQuery :
$(document).ready(function(){
$('input[name="btn1"], input[name="btn2"]').click(function(){
$('#myform').trigger('submit');
});
});
When you hit either btn1 or btn2, your form ID #myform will submit.
But the best way to do it using jQuery is using this code :
$(document).ready(function(){
$('.submit_form_1').click(function(){
$('#myform').trigger('submit');
});
});
and add to every button you want to use as a "submit form button for your form" the class .submit_form_1. Change it like you want.
I have a HTML form where I use several buttons. The problem is that no matter which button I click, the form will get submitted even if the button is not of type "submit". e.g. Buttons like :<button>Click to do something</button>, result in form submission.
It's quite painful to do an e.preventDefault() for each one of these buttons.
I use jQuery and jQuery UI and the website is in HTML5.
Is there a way to disable this automatic behavior?
Buttons like <button>Click to do something</button> are submit buttons.
Set type="button" to change that. type="submit" is the default (as specified by the HTML spec):
The missing value default and invalid value default are the Submit Button state.
You could just try using return false (return false overrides default behaviour on every DOM element) like that :
myform.onsubmit = function ()
{
// do what you want
return false
}
and then submit your form using myform.submit()
or alternatively :
mybutton.onclick = function ()
{
// do what you want
return false
}
Also, if you use type="button" your form will not be submitted.
<button>'s are in fact submit buttons, they have no other main functionality. You will have to set the type to button.
But if you bind your event handler like below, you target all buttons and do not have to do it manually for each button!
$('form button').on("click",function(e){
e.preventDefault();
});
if you want to add directly to input as attribute, use this
onclick="return false;"
<input id = "btnPlay" type="button" onclick="return false;" value="play" />
this will prevent form submit behaviour
Like mas-designs said, call preventDefault(). You can call it on the form itself. Here's a function that does this for all forms, vanilla JS.
function forms_ini(){
for(var form of document.getElementsByTagName('form')){
form.addEventListener('submit', function(ev){
ev.preventDefault()
})
}
}
another one:
if(this.checkValidity() == false) {
$(this).addClass('was-validated');
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
}
I have a simple search page with a single input box.
I want to be able to trigger the search action either by clicking "Go" or by pressing Enter in the input box. I did it like this:
$("input[name='entry']").keyup(function (event) {
if (event.keyCode == 13) {
search_phone();
}
});
$('a#go').click(function () {
search_phone();
});
Is there a more elegant way to do this? Like with bind and trigger, or fling. If so, how?
Not much can you improve here. Your code is pretty good.
You could skip the anonymous function for the click event.
$('a#go').click(search_phone);
I would just make your "go" link the submit button
<input type="submit" name="submit" value="go"/>
And then just bind your function to the submit (which would happen either from pressing enter while in the text box or by clicking the go button.
$('#my_form').submit(search_phone);