How to combine two buttons into one? - javascript

I have following two buttons:
<button type="submit" id="gform_submit_button_1">Submit</button>
<button type="button" data-is_quote="1" data-button="simple_add_to_quote" data-product-type="simple" data-product-id="75448" id="add_to_quote">Submit</button>
the #gform_submit_button_1 button validates form entries before submitting data to the server
and the #add_to_quote button submits form data without validating it
I want to be able to validate the form & submit it using the #add_to_quote button. Any solution?

Trigger click event of gform_submit_button_1 button on click of add_to_quote.
$("#add_to_quote").click(function() {
$("#gform_submit_button_1").click();
});

I'm not sure that I get the problem right, but here is a possible solution :
Create a form element with an hidden input containing all the data-X values and a submit button that submits the form.
<form method="GET/POST" action="validation.php">
<input type="hidden" name="data-validation" data-is_quote="1" data-button="simple_add_to_quote" data-product-type="simple" data-product-id="75448" id="add_to_quote">
<input type="submit" value="submit" id="add_to_quote">
</form>
I hope it will help !

#Dhara Parmar solution is fine... but is missing the event.stopPropagation() and event.preventDefault() like this:
$("#add_to_quote").click(function() {
$(this).preventDefault(); //to stop submit
$(this).stopPropagation();//to avoid the event bubbling up to other submit buttons, if any...
$("#gform_submit_button_1").click();
});

you can call the validation and submit functions of the form directly from the type=button click handler to make it behave like a type=submit
$("#add_to_quote").click(function () {
if (!$("#TheForm").validate()) { //native validation triggered
return false;
} else {
$("#TheForm").submit()
}
});

Related

Making form's onsubmit to work only for particular submits

In PHP program, I have JS function which validates submit <form ...onsubmit='return isOK();'>. It works OK. The problem is I want it to work only for particular submits, not for all. Is there any way inside the JS function to find out which submit was pressed, or some PHP trick
instead of onsubmit u can use onClick.
<input type="submit" onclick="return pressSubmit1()" value="submit1" />
<input type="submit" onclick="return pressSubmit2()" value="submit2" />
<form action="action.php" method="post">
...
<input name="submit" type="button" value="check me" onclick="submitform('check')" />
<input name="submit" type="button" value="do not check me" onclick="submitform('not check')"/>
</form>
in javascript:
function submitform(check)
{
if(check=='check') checkfrom();
}
in PHP
if($_POST['submit']=="check me")
checkform();
<form class="allowed" onsubmit='return isOK();'>
----
function isOK() {
if($(this).hasClass('allowed')) {
// Do stuff
}
}
your question is not clear, are you using a single submit button or different ones. If you're using different submit buttons then ofcourse you can make checks based on the id of the submit button. On the other hand if is a single submit button then it depends on what the conditions are for submitting or not submitting
It's better you write some HTML and Java Script code which you are using. So, it's easy to correct mistake is you have made somewhere in code snippet.
We can check which submit button is clicked, using PHP.
In the PHP page corresponding to the form submit, write
if(extract($_POST) && isset($submitbtn1)) {
// some validation for first submit button
}
elseif(extract($_POST) && isset($submitbtn2)) {
// some validation for second submit button
}
Note: we can use $ followed by submit button name inside the extract function. ie. $submitbtn1 is same as $_POST['submitbtn1']
Yes different onclick looks fine as mentioned in the accepted answer. But in the event handler you should have the
code as below. Note the preventDefault.
Also since submit is A button that submits the form. You can use button type instead of submit type and then there is no need for preventDefault. Here is the link of the code http://jsbin.com/wikose/4/
function testlogin(){
event.preventDefault();
var test = 'not validated';
if(test === "validated")
alert("not valid login");
else
$('form').submit();
return false;
}

How should I use a window.confirm dialog box with a form?

I have tried window.confirm on a submit button saying "Are you sure" but even if I click on no it submits itself? Is this the wrong way of using it?
<button type="submit" class="btn btn-primary" onclick="window.confirm('Are you sure you want to transfer to user?')">
Transfer
</button>
use this
<form onsubmit="return confirm('Are you sure you want to transfer to user?')">
</form>
confirm returns a boolean. To make it work you will need to add return in the front:
return confirm(...);
http://jsfiddle.net/fu5LuLmx/
Instead of attaching to the click event, you might also want to consider attaching it to the submit event of the form, such that this piece of code would execute whenever the form is being submitted, not only when clicking this button.
You have to prevent from submitting so remove the onclick event, and add a onsubmit event on the form
<form name="form" id="myForm" onsubmit="return ask();">
<script>
function ask() {
if (window.confirm('Are you sure you want to transfer to user?')) {
return true;
} else {
return false;
}
}
</script>

Submit form with second submit button using jquery

I am having two submit button on a form named 'Save' and 'Delete'. Now I want to explicitly do submit with Delete button. How can I do it?
I have tried following:
$('#myForm').submit();
and
$('#myForm').bind('Delete').submit(); // Delete is value of delete submit button.
but it don't work for delete functionality. Pls help.
Something like this:
$('delete selector').bind('click', function() { $('#myForm').submit() });
Do you have to use jQuery? Can you not make the delete button a submit type?
<input type="submit" name="delete" value="delete"/>
Or:
<button type="submit" name="delete">Delete</button>

Triggering onclick event of Input/Form

<form method="POST" onsubmit="return false;">
...
<input type="submit" name="button" value="Login" onclick="require('file.js').submitForm(this.form);">
...
</form>
How can i trigger onclick event of this INPUT element (so it can submit the form) in Internet Explorer 9 using javascript?
I tried:
document.getElementsByName("button")[0].click()
and
document.getElementsByName("button")[0].onclick()
but neither works.
(document.getElementsByName("button").length = 1)
you can use
document.getElementsByTagName("form").submit();
and for click event you can use this
element = document.getElementsByName("button")[0]
if (typeof element.onclick == "function") {
element.onclick.apply(element);
}
Looking beyond the surface of your question, I believe you're trying to trigger a form post AND handle the submission with some client-side logic.
The code you have prevents the form from being posted because of "return false;". When the button is clicked, it'll triggered the submit event, which is blocked. So how do you know that the button is triggered or not, knowing the results are the same?
For simpler coding logic, put the JavaScript call either in the form tag or the button but not both. My advice is to leave the button be. type="submit" means it will submit the form. The the form itself has a JavaScript function that decides whether to post or not.
<form method="POST" onsubmit="return prepost();">
...
<input type="submit" value="Submit">
</form>
<script>
function prepost(){
// if the form needs to be stopped
return false;
// if the form needs to be posted
return true;
}
</script>
Answer: The form didn't submit if I left some fields blank. When i put correct values in right fields it submitted correctly using above click() method. Thank you all for answers.

Simple function onSubmit?

I'm trying to call a simple function onsubmit. I tried using onsubmit and also a listener with jQuery. My problem is that when the user presses enter he gets redirected to mysite.com?
<form id="teleport">
<input id="tInput" type="text" value="Type a location" />
<input type="button" id="tSubmit" value="Submit"/>
</form>
$("#teleport").submit(function () {
teleport(document.getElementById('tInput').value);
});
How do I prevent anything from happening when submitting? Also .submit() is only detecting the enter key, how do I listen for both enter key and clicks on the submit button?
You need to prevent the default action of the form. You can do that with event.preventDefault():
$("#teleport").submit(function (e) {
e.preventDefault();
teleport(document.getElementById('tInput').value);
});
Alternatively, you could return false inside the submit event handler for the same effect.
The easiest way to make the button submit the form too will be to change it's type to submit:
<input type="submit" id="tSubmit" value="Submit" />
Or you could attach a click event handler to your current button and trigger the submit event of the form.
Prevent submiting a form:
$("#teleport").submit(function (e) {
teleport(document.getElementById('tInput').value);
e.preventDefault();
});
Submit event catches any way of submitting a form - both with clicking the submit button and enter key press.

Categories