I have the following HTML:
<form method="post" id="IssueForm" action="wh_sir_insert.php" >
<input name='id[]' type='checkbox' class="selectable" value='$col[8]' />
<input type="submit" name="Build" value="BuildSir" />
<input type="submit" name="wht" value="Proceed Your Transfer" />
</form>
When I click the submit button, both value and form values are sent:
$("input[name='Build']").click(function(){
// some validation
});
following are the posted values:
$("input[name='wht']").click(function(){
//validation code
})
But when I submit the form through jquery.submit(), the values of the submit buttons are not posted:
$("#IssueForm").submit();
On the server side, I pick an action based on the submitted type. How I can add extra post information with $("elem").submit(); to send along type of action?
Please, note one way is through $.ajax Or $.post but it would require a huge effort to change all my code.
Below is my scenario:
$("input[name='Build']").click(function(){
var per=$("input[name='issueperson']");
$.ajax({
url:"ajaxloads/confirmuser.php",
dataType:"json",
data:"username="+per.val()+"&ownership="+$("#ownership").text(),
success:function(r){
if(r.success){
var agree=confirm("Are you sure you want to Build SIR?");
if (agree){
$("#IssueForm").submit();
// To avoid Double Submission
}
}
else{
$("#admin_message").show();
$("#ErrorMessage").text(r.info);
}
}
});
return false;
});
How I can send the value of submitted button along with the form submit?
Finally I got to work in some way by adding a extra Value with query string.
$("input[name='Build']").click(function(){
var per=$("input[name='issueperson']");
$.ajax({
url:"ajaxloads/confirmuser.php",
dataType:"json",
data:"username="+per.val()+"&ownership="+$("#ownership").text(),
success:function(r){
if(r.success){
var agree=confirm("Are you sure you want to Build SIR?");
if (agree){
$("#IssueForm").attr("action","wh_sir_insert.php?Build=BuildSir");
$("#IssueForm").submit();
}
}
else{
$("#admin_message").show();
$("#ErrorMessage").text(r.info);
}
}
});
return false;
});
Related
After following the example and answers by the following threads
jQuery AJAX submit form
submitting a form via AJAX
I have built a similar test form to get to learn the ajax request on submit. Your guess was right, it doesn't work for me (no alert popping up).
My testajax.php with the form:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../test.js"></script>
<form name="feedback" id="idForm" action="(myurl)/testajax.php" method="post">
<input id="name" type="text">
<input type="submit" name="feedbacksent" value="Send" />
</p>
</form>
My test.js:
// this is the id of the form
$("#idForm").submit(function(e) {
var url = "(myurl)/testajaxinput.php"; // the script where you handle the form input.
e.preventDefault(); // avoid to execute the actual submit of the form.
alert("bla"); // does not work either
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
});
My testajaxinput.php that should handle the input:
if (isset($_POST['feedbacksent'])){
echo "<h1>".WORKS."</h1>";
}
Try this :
if (isset($_POST['feedbacksent'])){
echo "<h1>".WORKS."</h1>";
return true;
}
Then try your alert and also check have you got any error in console.
I was looking for answer for my question but I didn't found solution. Here is similar topic link but I have different code and I don't know how to fit answer from this topic to my code.
Here is my problem. I'm sending my form with id order_form to test.php.
Every form value is sending proper except input submit. My script is based on checking that <input id="sendform" type="submit" value="ORDER PRODUCT" name="sendform"/> is send.
Below is code that I use to send form.
$("#order_form").submit(function() {
$.ajax({
type: "POST",
url: "includes/test.php",
data: $("#order_form").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data);
}
});
return false; // avoid to execute the actual submit of the form.
});
And here is content of test.php
echo '<pre>';
print_r($_POST);
echo '</pre>';
Here is examle form because my form is extremaly big.
<form id="order_form">
<input type="text" name="w2b" value="abc"/>
<input id="sendform" type="submit" value="ZAMAWIAM" name="sendform"/>
</form>
In HTML5 forms when you are passing through parameters and variables to the ajax functions the value data from "Submit Inputs" isn't passed through. So if you have a form set up as :
<form>
<input type="text" name="foo" value="bar">
<input type="submit" name="submitTest" value="Hello World!">
</form>
The value of "submitTest" isn't being sent through. The only thing that gets sent through is the parameter "foo" with the value of "bar". "submitTest" only submits the form and executes your ajax call in this case.
To fix this just add a hidden element in the form.
Now it would look this
<form>
<input type="text" name="foo" value="bar">
<input type="hidden" name="sendform" value="ZAMAWIAM">
<input type="submit" name="submitTest" value="Hello World!">
</form>
This will send through the value to your ajax call and you can use it for whatever you might need it for.
Make sure you wrap your jquery code in
$(function(){
//code here
});
Again Dont forget to prevent Default Event , Below is a rewrite of your jquery code
$(function(){
$("#order_form").submit(function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "includes/test.php",
data: $("#order_form").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data);
}
});//end ajax
});//end on submit
});//end jquery
I have a form for a mailing list script which I am trying to get working with ajax so the form can refresh without reloading. With the $.ajax part of the jquery commented out, the form variables are sent to the URL string.
?email=test%40address.com&sub=sub&submit=Submit+Form
My question is why is the submit=Submit+Form part there given that it isn't part of my "datastring" and will that be a problem when it comes to processing the actual PHP script?
Here is the form :
<form name="email_list" action="">
<p><strong>Your Email Address:</strong><br/>
<input type="text" name="email" id="email" size="40">
<input type="hidden" name="sub" id="sub" value="sub">
<p><input type="submit" name="submit" value="Submit Form" class="email_submit"></p>
</form>
and the JQuery
$(function() {
$('.email_submit').submit(function() {
var email = $("input#email").val();
if (name == "") {
$("input#email").focus();
return false;
}
var sub = $("input#sub").val();
if (name == "") {
$("input#sub").focus();
return false;
}
var dataString = '&email=' + email + '&sub=' + sub;
//alert (dataString);return false;
/*$.ajax({
type: "POST",
url: "mailing_list_add2.php",
data: dataString,
success: function() {
$('#display_block')
.hide()
.fadeIn(2500, function() {
$('#display_block');
});
}
});
return false;
});*/
});
You should put the submit handler on the form, not on the button, even if is a submit button.
<form name="email_list" action="" id="my_form">
Update the javascript
$(function() {
$('#my_form').submit(function() {
...
});
});
To serialize all the inputs into a string you could use $("#my_form").serialize() which builds a string with all the inputs and their data ready for posting:
var dataString = $("#my_form").serialize();
Also note that having a name attribute defined for the submit input means that its value will be sent also in the form. If you don't need that, you can simply remove the name attribute.
Submit+Form is the urlencoded version of Submit Form. The field submit is sent because you specify a name attribute to <input type="submit" name="submit" ... />. It will most likely not cause any problems for you (can't say without looking at your server-side code though).
Also, you really should specify a method attribute to your <form>. It seems to default to GET, which is why the form fields are added to the query string.
If you let your ajax POST happen, since you'r manually creating your dataString you won't see the Submit=, however when you let it submit 'normally' you see it, since the submit button is an input field with a value.
You won't encounter any issues with this. You can access the submit value just the same as any other POST value $_POST['submit'] though I'm not sure why you'd want to.
If a form has two submit button, Then i need to submit a form by jquery as triggering submit of one of the submit button.
<?php
if(isset($_REQUEST['submit_button1']))
{
echo "form submitted by clicking submit button 1";
}
elseif(isset($_REQUEST['submit_button2']))
{
echo "form submitted by clicking submit button 2";
}
?>
<form name="check" action="">
<input type="text" name="text_val" id="text_val">
<input type="submit" name="submit_button1" value="submit button1">
<input type="submit" name="submit_button2" value="submit button2">
</form>
question: $("form[name='check']").submit() submit the form in script. I need to submit the form by indicating that form is submitted by submit button 1 or submitted button2 in jquery.
Please help me in advance...
You can trigger click event
$('input[name="submit_button1"]').click();'
or
$('input[name="submit_button2"]').click();
You can use following code:
$("input[name='submit_button1']").click();
you can try something like this.
$("input[name="submit_button1"]").click(function(){
sendData('button1')
})
$("input[name="submit_button2"]").click(function(){
sendData('button2')
})
function sendData(button){
//i assume your for data like this
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone ;
//you can add your button as a parameter
dataString += '&button='+ button
$.ajax({
type: "POST",
url: "yoururl",
data: dataString,
success: function() {
//succed
}
});
}
and at server side first you can check button parameter then apply your logic.
I think you can call the "click" method on the button.
Try this...
$("form[name='check'] input[name='submit_button1']").click();
try:
$("form[name='check'] input[name=submit_button1]").click(); //or
$("form[name='check'] input[name=submit_button1]").trigger('click');
I am trying to use jQuery-AJAX to submit the data in my form to my controller (index.php) where it is processed by PHP and inserted via PDO into the database if valid. Once the code is inserted into the database, the div where the form previously existed should be replaced by the contents of another page (newpage.php). The original page should not be refreshed upon submitting of the form, only the div where the form previously existed should be refreshed. There is a particular problem with my code, although I can't seem to find where the issue is at:
Here is my jQuery:
<script type="text/javascript">
function processForm() {
var action= $('#action').val();
var data = $('#data').val();
var dataString = 'action=' + action + '&data=' + data;
$.ajax ({
type: "POST",
url: ".",
data: dataString,
success: function(){
$('#content_main').load('newpage.php');
}
});
}
</script>
Here is my HTML: (As a side note, I noticed that when I take the "return false;" out of the HTML, that the form will submit to my database, but the whole page also reloads - and is blank. When I leave the "return false;" in the HTML, the newpage.php loads correctly into the div, but the data does not make it into the database)
<form action="" method="post" onsubmit="processForm();return false;">
<input type="hidden" name="action" value="action1" />
<input type="text" name="data" id="data" />
<input type="submit" value="CONTINUE TO STEP 2" name="submit" />
</form>
Here is my PHP:
<?php
$action = $_POST['action'];
switch ($action) {
case 'action1':
$data = $_POST['data'];
pdo ($data);
exit;
}
?>
I feel like I am making a silly mistake somewhere, but I just can't put my finger on it. Thanks for any assistance you can provide!
SOLUTION (via Jen):
jQuery:
<script type="text/javascript">
function processForm() {
var dataString = $("#yourForm").serialize();
$.ajax ({
type: 'POST',
url: ".",
data: dataString,
success: function(){
$('#content_main').load('newpage.php');
}
});
return false;
});
</script>
HTML:
<form id="yourForm">
<input type="hidden" name="action" value="action1" />
<input type="text" id="data" name="data" />
<input type="submit" value="CONTINUE TO STEP 2" name="submit" />
</form>
PHP:
<?php
$action = $_POST['action'];
switch ($action) {
case 'action1':
$data = $_POST['data'];
pdo ($data);
exit;
}
?>
What I learned: Use the .serialize() jQuery method if it is an option, as it will save a bunch of time writing out the var for each form value and .serialize() does not typically make mistakes sending the info to php.
Give this a try:
$("#yourForm").submit(function(){
// Could use just this line and not vars below
//dataString = $("#yourForm").serialize();
// vars are being set by selecting inputs by id but id not set in form fields
var action= $('#action').val(); // value of id='action'
var data = $('#data').val(); // value of id='data'
var dataString = 'action=' + action + '&data=' + data;
// dataString = 'action=&data=' so nothing is posted to db
// because input fields cannot be found by id
// fix by adding id fields to form fields
$.ajax ({
type: "POST",
url: ".",
data: dataString,
success: function(){
$('#content_main').load('newpage.php');
}
});
return false;
});
And change the form to (I added the id attributes):
<form id="yourForm">
<input type="hidden" id="action" name="action" value="action1" />
<input type="text" id="data" name="data" id="data" />
<input type="submit" value="CONTINUE TO STEP 2" name="submit" />
</form>
Seems like you need an explanation rather than a fix of code. Here is a brief explanation for the 2 cases:
When you take out return false; the code will treat your form as a normal HTML form that will be submitted to the server via action="", which leads to nowhere. The Javascript, however, also does its job in this case but because the page is redirected to nowhere, then it turns blank at the end.
When you put return false; back to the form, the form will catch the event handler and know that this form will be returned FALSE to submit. That's why you can see how your Javascript code does the job. However, one thing you should notice is that your jQuery AJAX function needs to POST (or GET) to a processing file, not '.'
Considering this reply based on no knowledge of your real situation. You need to look back over your code and see how you can edit it. Would be happy to reply if you have any questions.
Hope this small hint helps (: