Here is one form example. It is working good without any issue.
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
<button type="submit" value="submit"> Add to Cart</button>
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="3">
<button type="submit" value="submit"> Add to Cart</button>
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8"></form>
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="5">
<button type="submit" value="submit"> Add to Cart</button>
Now I have to create the same form but a little modification needed. I have my markup like this
<form action="http://example.com/add_to_cart" class="form-horizontal" method="post" accept-charset="utf-8">
<button type="submit" value="submit" data-value="10" data-name="id">Try Now</button>
<button type="submit" value="submit" data-value="3" data-name="id">Try Now</button>
<button type="submit" value="submit" data-value="5" data-name="id">Try Now</button>
</form>
To submit the form I have used this jQuery.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('button[type=submit]').click(function() {
var Id = jQuery(this).attr('data-value');
var Name = jQuery(this).attr('data-name');
alert(Name);
})
});
</script>
But from this point of jQuery I don't know what to do next. So can someone kindly tell me how to submit the form by jquery with the same values as used above markup?
Update
Yes I can change my markup if you think so.
First of all, your HTML is not correct. Move the inputs inside of the form:
<form action="..." class="form-horizontal" method="post" accept-charset="utf-8">
<input type="hidden" name="cartkey" value="">
<input type="hidden" name="id" value="10">
<button type="submit" value="submit"> Add to Cart</button>
</form>
You can have any number of forms like above. In the JavaScript side you have to catch submit event for all forms. In the submit handler, this will be the form that was submitted.
$(document).ready(function () {
$("form").on("submit", function () {
$.ajax({
type: "POST",
url: formUrl,
data: $(this).serializeArray(),
success: function (data) {
/* handle success */
},
error: function (data) {
/* handle error */
},
dataType: "json" // remove this if the server doesn't send json data
});
return false; // prevent default browser behavior
});
});
Note $(this).serializeArray() - this returns an array like this:
[{
name: "some-input-name",
value: "some-input-value"
}, ...
Also, you may checkout the return false usage: When and why to 'return false' in JavaScript?
Related
I'm not getting form values on submit of two forms with the same class.
When I submit one of the forms,
a) Jquery submit event is called but values are empty
b) the submit event is skipped and I'm taken right to the php file where I enter the info into a database
My Jquery
$(document).ready(function(){
$('body').on('submit', '.newStaff', function(event) {
event.preventDefault();
var firstName= this.firstName.value;
// do other stuff
//complete AJAX call
});
});
My forms
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" />
// use other inputs.....
<input type="submit" value="submit" />
</form>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" />
// use other inputs.....
<input type="submit" value="submit" />
</form>
Am I not binding correctly? Haven't had issues like this before. I've always been able to get unique input values based on the form that was submitted.
my be you can use function eq jquery for this
$(function() {
$('body').on('submit', '.newStaff', function(event) {
event.preventDefault();
var firstName = $('.newStaff input[name="firstName"]').eq(0).val();
alert(firstName);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" value="1 2 3"/>
<input type="submit" value="submit" />
</form>
<br/>
<form class="newStaff" method="post" action="insertStaff.php">
<input type="text" name="firstName" value="a b c"/>
<input type="submit" value="submit" />
</form>
I have to post data to php but when I do, the page reloads. I have tried fixing this using answers given in similar questions but none of them yield proper results. Thanks for your help.
<!--HTML-->
<form method="post" action="index.php" onclick = "sendForm(event);">
<input type="text" class="form-control" id="code" name="rand5_code">
<input type="submit" href="" name="rand5_btn" class="btn btn-success" value="Enter">
</form>
//Javascript
<script type="text/javascript">
function sendForm(e){
e.preventDefault();
}
</script>
Another way that I was recommended was by using ajax:
<form id="form" >
<input style="width:200;margin-top:5px" type="text" class="form-control" id="code" name="installer2_code" placeholder="Enter Code">
<input type="submit" href="#" style="margin-top:5px" name="installer2_btn" class="btn btn-success" id="form" onclick =" sendForm(event);" value="Enter">
</form>
<script>
$('#form').on('click', function(e){
e.preventDefault();
var name = $(#code).val(),
$.ajax({
type: 'post',
url: 'header_php.php',
});
});
</script>
Try to add onclick = "sendForm(event);" in button instead of form
you could change onsubmit instead of onclick in the form
function sendForm(e) {
e.preventDefault();
}
<form method="post" action="index.php" onsubmit="sendForm(event);"><!--changes-->
<input type="text" class="form-control" id="code" name="rand5_code">
<input type="submit" href="" name="rand5_btn" class="btn btn-success" value="Enter">
</form>
Change button type="submit" to button Type="button" and
Use jquery ajax
$("#btnid").click(function(){
$.ajax({
method: "POST",
url: "some.php",
data: { name: $('#code').val()}
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
})
Also remove action from form
Add onsubmit="return false;" to your form. In you js function e is clickEvent not is SubmitEvent, submitEvent make page reload.
<!--HTML-->
<form method="post" action="index.php" onsubmit="return false;" onclick = "sendForm(event);">
<input type="text" class="form-control" id="code" name="rand5_code">
<input type="submit" href="" name="rand5_btn" class="btn btn-success" value="Enter">
</form>
//Javascript
<script type="text/javascript">
function sendForm(e){
e.preventDefault();
}
</script>
I am trying to code a post form which sends the form to another window and then reloads the window in which the form was submitted in.
page2 is not on the same domain as page1 and i can't access the code of page2.
My current form on page1 looks like this:
<form target="_blank" method="post" action="https://www.page2.com">
<input type="hidden" name="input1" value="input1value">
<input type="submit" value="Submit" onclick="function1();window.location.refresh()">
</form>
The form is being send successfully and the function is being executed but the tab won't refresh.
Try this..
<form target="_blank" method="post" action="https://www.page2.com">
<input type="hidden" name="input1" value="input1value">
<input type="submit" value="Submit"onclick="window.location.reload();">
</form>
While your use case is not obvious at the moment, this might be useful.
Handle submit using script, prevent the default action, post the form and then reload the page.
<form id="myForm" target="_blank">
<input type="submit" value="Submit" onclick="wait(event);" >
</form>
script
function wait(e)
{
e.preventDefault();
document.getElementById('myForm').submit();
console.log('done!')
window.location.reload();
}
try this code this will refresh you page 1.
function function_one(){
$.ajax({
url: 'show.php',
type: 'POST',
data: {'value': $("#input1").val()},
success: function(data){
window.location.refresh();
}
});
}
<form target="_blank">
<input type="text" name="input1" value="input1value" id="input1">
<input type="submit" value="Submit" onclick="function_one()">
</form>
<p id="asfasf"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Html:
<form class="allforms" method="POST" action="/auth/myaccount/personal">
<input type="hidden" name="_method" value="PATCH">
...
</form>
<button id="allsubmit" class="btn btn-info">Continue</button>
jquery:
$(document).ready(function(){
$("#allsubmit").click(function(){
$('.allforms').submit();
});
});
I have 3 forms in my html code like above.
My button is out of any my forms.
How to have one submit button for all my forms. I tried the click function but it doesn't work. Why?
Form submission is a synchronous action, so when you submit a form and then immediately submit a different form in your page, the first form's submission is canceled.
What you can do instead is make sure the forms are submitted asynchronous (using ajax):
$(function() {
$("#allsubmit").click(function(){
$('.allforms').each(function(){
valuesToSend = $(this).serialize();
$.ajax($(this).attr('action'),
{
method: $(this).attr('method'),
data: valuesToSend
}
)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="allforms" method="POST" action="">
<input type="hidden" name="_method" value="PATCH1">
<input type="submit" />
</form>
<br />
<form class="allforms" method="POST" action="">
<input type="hidden" name="_method" value="PATCH2">
<input type="submit" />
</form>
<br />
<form class="allforms" method="POST" action="">
<input type="hidden" name="_method" value="PATCH3">
<input type="submit" />
</form>
<br />
<button id="allsubmit" class="btn btn-info">Continue</button>
A few notes
This will not work with forms that have file-uploading (enctype="multipart/form-data")
You need to decide what to do after the submission is done (because nothing in the page will change).
You can't submit forms in stackoverflow-snippets, so don't try to run this here :)
I didn't test it but try this one:
$("#allsubmit").on("click", function(){
$('.allforms').each(function(){
$(this).submit();
});
});
Note that all of your forms have to have class="allforms" attribute
I have basic example of submitting a value to a hidden. But its seems not to want to take my value in my function. Maybe there us something am missing.
<script language="JavaScript">
function submitForm() {
document.statusform.do.value = "checkstatus";
document.statusform.submit();
}
</script>
<form action="" method="GET" enctype="multipart/form-data" id="statusform">
<input type="hidden" name="do" id="do" value="">
<input type="submit" class="button" name="submit" value="Resume Request" onClick="submitForm();" /></form>
First, You're wrong in this part:
document.statusform.do.value = "checkstatus";
document.statusform.submit();
In firefox error console it will be show an error:
Error: TypeError: document.statusform is undefined
Change that code to:
document.forms['statusform'].do.value = "checkstatus";
document.forms['statusform'].submit();
Second, remove name attribute from submit button.
Change this part:
<input type="submit" class="button" name="submit" value="Resume Request" onClick="submitForm();" /></form>
to:
<input type="submit" class="button" value="Resume Request" onClick="submitForm();" /></form>
change
<form action="" method="GET" enctype="multipart/form-data" id="statusform">
to
<form action="" method="GET" enctype="multipart/form-data" name="statusform">