I have a HTML form which is inside PHP loop and trying to send that form data via ajax.
If the php loop executes 3 times, all the form data is sent out.
tried to update the form name dynamically. but not aware of how to send that via ajax.
HTML form: this form is inside php loop
<form action="" method="post" name="cartForm">
<input type="hidden" name="item_id" value="<?php echo $row['productID']; ?>" />
<input type="submit" name="submit" value="Add to cart" class="button btn" onclick="addCartFun()" />
</form>
Ajax call:
function addCartFun(){
$.ajax({
url: '/cartHand.php',
type: 'POST',
dataType: 'json',
data: $("form[name=cartForm]").serialize(),
success: function(){
}
});
}
I expect that if I click that submit button, only data corresponding to the form has to be sent.
Thanks.
It's working fine now. I dynamically generated the form name and made that ajax call inside the call inside the loop. Thanks.
AJAX call:
$("form[name=<?php echo $formName ?>]").submit(function({
$.ajax({
url: '/cartHand.php',
type: 'POST',
dataType: 'json',
data: $(this).serialize(),
success: function(){}
});
});
Form Name:
<form action="" method="post" name="<?php echo $formName ?>"></form>
Related
I have an application for rating a service. A on the form page has inputs for comment, giving it a star etc.
I want to make it in a way that when a user clicks on a star it should send the value of the star input to a php script for processing without having to click on the submit button. I thought of using separate forms for this, however, i just want to use one form because different forms will bring the layout.
HTML Form
<form action="" method="POST">
<input type="text" name="name">
<textarea name="comment"></textarea>
<input type="radio" name="rate" value="1">
<input type="radio" name="rate" value="2">
<button type="submit" name="submit">Submit</button>
</form>
JQuery for the sending rate to php
$("input[name=rate]").change(function(event){
var rating_num = $(this).val();
$.ajax({
url: '../handlers/rating.php',
type: 'POST',
data: rating_num,
cache: false,
contentType: false,
processData: false,
beforeSend:function(){
},
success: function (data) {
alert(data);
}
});
})
rating.php
echo $_POST['rating_num'];
The output I get is "undefined index:rating_num"
The above code is just a sketch.
First of all, you can debug your $_POST variable with var_dump function.
However, the reason why you have this error is that you need to put an object in the 'data' parameter.
{
...
data: {
rating_num: rating_num
},
...
}
Also, you could use $.post instead of $.ajax. See examples in jQuery API documentation.
$.post('rating.php', {rating_num: rating_num})
.done(function(data) {
console.log(data);
});
I have a simply AJAX call as a part of an image upload form. The page calls a PHP form which is supposed to then process the file upload and return a "successful" comment to the same page.
Currently, the script is working perfectly but when it returns the AJAX success string, it takes you to a new page and shows the AJAX output rather than showing it within the DIV on the same page.
To make it simpler, I've just cut out all of the PHP upload script and changed it to a simple echo output script - so I think it's a problem with the submit form page rather than the page that's called. I have jQuery included in the submission page.
Here's the submit form:
<div id="uploadFormLayer">
<form id="uploadForm" action="../uploadtesties.sparkle" method="post" enctype="multipart/form-data">
<input type="file" name="myFile">
<input type="submit" value="Upload">
<input type="hidden" name="EID" value="<? echo $ElectionID; ?>">
</form>
</div>
<div id="targetLayer"></div>
Here's the AJAX request:
<script type="text/javascript">
$(document).ready(function (e) {
$("#uploadForm").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "uploadtesties.sparkle",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data)
{
$("#targetLayer").html(data);
},
error: function()
{
}
});
}));
});
</script>
The PHP page just says <?php echo "Testing output"; ?> for the moment.
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 that uses Ajax to send a serialized forms data to send to a php file called contact-submit
i know i should wrap the contents of that page in a function...and add it to the functions.php file
i plan on calling the function MyContactForm
but i dont know the proper syntax to serialize the form and post the data to the function
heres what i have so far ...*keep in mind i left out the form fields...because we are focusing on the script part of this ...if the form is serialized...should grab everything
html
<form id="contactform" action="<?php echo home_url('contact-submit'); ?>" method="post">
<input class="textbox required" type="text" name="name2" id="name" value="Your Name" />
<input class="submit" value="Send" type="submit" alt="Send message" name="submit" />
</form>
script
jQuery("#postform").validate();
var AjaxSubmit = function(){
var btnText=jQuery('#contactform .submit').val();
// inform client that data is been sent:
jQuery('#contactform .submit').val('Sending...');
jQuery('#contactform .submit').attr('disabled', true);
jQuery.ajax({
type: 'POST',
url: jQuery('#contactform').attr('action'),
data: jQuery('#contactform').serialize(),
// successful POST - display result in success div:
success: function(msg){
jQuery('#contactform .form, #contactform .contacthead').slideUp(500,function(){
jQuery('#contactform div.success').removeClass('hiddne').fadeIn(500);
});
},
error: function(response) {
jQuery('#contactform .submit').val(btnText);
jQuery('#contactform div.error').html(response.statusText).slideDown(500);
}
});
}
jQuery("#contactform").validate({
submitHandler: AjaxSubmit
});
});
My Question is.....what is the proper syntax for serializing a form and passing the data to a php function?
How would I go about submitting the below form without a page refresh using Ajax? I'm needing to send the user1_id via 'toid' and the content from the textarea 'newmsg'.
FORM
<form action="insert.php" method="POST" class="form_statusinput">
<input type="hidden" name="toid" value="<?php echo $user1_id ?>">
<span class="w">
<textarea class="input" name="newmsg" id="newmsg" placeholder="Say something" autocomplete="off"></textarea>
</span>
<button type="submit" value="Submit">Feed</button>
</form>
1) Add an ID to form, lets say "myform".
2) Then you can get all all fields from this form and send it using AJAX (dont forget to include jQuery):
var form_data = $("#myform").serialize();
$.ajax(
{
url: 'script.php',
type: 'POST',
cache: false,
data: form_data,
success: function(message)
{
...
},
error: function(message)
{
...
}
});
If jQuery is an option, it is quite easy.
See jQuery.post(): http://api.jquery.com/jQuery.post/
// Example: send form data using ajax requests
$.post("test.php", $("#testform").serialize());
There are many options depending on what you need to do with the return values, it's best to just read the documentation in this case.