ok so i know this ajax works, but i cant seem to understand why it's not submitting here.
<script type="text/javascript">
$(function(){
$('input[type=submit]').click(function(){
$.ajax({
type: "POST",
url: "postitem.php",
data: $("#myform").serialize(),
beforeSend: function(){
$('#result').html('<img src="loading.gif" />');
},
success: function(data){
$('#result').html(data);
}
});
});
});
submit form
<form action="" method="post" onsubmit="return false;" id="myform">
submit button
<input type="hidden" value="Post" name="submit" />
<button type="submit" title="Done" style="height:33px; width:50px">
<img src="../../css/images/plus_25.png" />
</button>
i'm pretty something is wrong with the button, but i want to keep the way the button is because alot of my other forms use this same button, thanks if you can explain to me why click this submit button does nothing.
You are selecting an <input> instead of a <button>. I had success by changing your jQuery selector from this:
$('input[type=submit]')
to this:
$('button[type=submit]')
http://jsfiddle.net/H3Bcc/
Not all browsers interpret a click attached to a submit button as submitting the form so you are effectively just negating the click of that button.
Preventing a form submission should preferably be captured by attaching the submit handler to the <form> when you have a <input type="submit"> or <button type="submit> so this is the best way to assure success:
jQuery
$(function(){
$('#myform').on('submit', function(e){
// prevent native form submission here
e.preventDefault();
// now do whatever you want here
$.ajax({
type: $(this).attr('method'), // <-- get method of form
url: $(this).attr('action'), // <-- get action of form
data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
beforeSend: function(){
$('#result').html('<img src="loading.gif" />');
},
success: function(data){
$('#result').html(data);
}
});
});
});
HTML
<form action="postitem.php" method="POST" id="myform">
<input type="hidden" value="Post" name="submit" />
<button type="submit" title="Done" style="height:33px; width:50px">
<img src="../../css/images/plus_25.png" />
</button>
</form>
try this :
<script type="text/javascript">
$(function(){
$('input[type=submit]').click(function(e){
e.preventDefault(); // prevent the browser's default action of submitting
$.ajax({
type: "POST",
url: "postitem.php",
data: $("#myform").serialize(),
beforeSend: function(){
$('#result').html('<img src="loading.gif" />');
},
success: function(data){
$('#result').html(data);
}
});
});
});
Related
I'm going to make this as concise as possible. I'm loading this form dynamically in a modal window in Bootstrap. But when I submit it...instead of posting via ajax, the whole page is submitted. What can I do to submit via AJAX (in the background) while saving the state of the page? Here is the code that loads into the modal div element:
<script>
$(function(){
$('.modal form').on('submit', function(e){
e.preventDefault();
$.ajax({
url: "index2.html",
type: "POST",
data: $("multiform").serialize(),
success: function(data){
alert("Successfully submitted.")
}
});
});
});
</script>
<form name="multiform" id="multiform" action="index2.html" method="POST" >
Name: <input type="text" name="name" value="Ravi"/> <br/>
Age :<input type="text" name="age" value="1" /> <br/>
<input type="submit" value="Save" name="save" class="btn btn-primary" style="margin-top: 2px; height: 27px; width: 89px;" ></input>
</form>
I figured it out. I needed to surround the code with $(document).ready() and I needed to reference the data to serialize via '.modal form'. Once I did that, everything worked well.
$(document).ready( function() {
$('.modal form').on('submit', function(e){
e.preventDefault();
$.ajax({
url: "index2.html",
type: "POST",
data: $('.modal form').serialize(),
success: function(data){
alert(data);
}
});
});
});
I have the following form:
<form id="sizeForm" style="float:right;">
<input value="test" name="comments" type="text">
<input class="btn-sm btn-main" value="Save" type="submit">
</form>
Which I'm trying to submit using ajax but the form is posting, here's the JQuery:
$("#sizeForm").submit(function () {
$.ajax({
type: "POST",
url: "/ajax/actions/editSize.php",
data: $(this).serialize(),
success: function (dataBack) {
$('#size2'+dataBack).fadeOut().promise().done(
function(){
$('#size1'+dataBack).fadeIn();
}
);
}
});
return false;
});
Any ideas where I'm going wrong?
The issue may be with your PHP script (which you haven't provided), but here are some ideas.
HTML:
<form id="sizeForm" style="float:right;">
<input value="test" name="comments" type="text">
<input class="btn-sm btn-main" value="Save" type="submit">
</form>
javascript:
$("#sizeForm").on('submit', function () {
$.ajax({
type: "POST",
url: "/ajax/actions/editSize.php",
data: $(this).serialize(),
success: function (dataBack) {
$('#size2'+dataBack).fadeOut().promise().done(
function(){
$('#size1'+dataBack).fadeIn();
}
);
}
});
return false;
});
In your PHP script add something like this so you know the value is received. This will show in the network tab in the browser developer tools.
if (!empty($_POST['comments'])) {
echo "form submitted!";
exit;
}
In the network tab, you should see an entry like POST editSize.php. If you don't see it, the form was not sent. If you do see it, open it up and look at the "post" tab. This will show you what was sent. Then, your "response" tab will show you the output from your PHP script.
Why this javascript function not work on ie7 and 8 ?
When user click button , it's will display PLEASE WAIT.... and hide and then display TEST
I test on firefox and chrome, It's OK
But not work on IE7 and 8 , How can i do that ?
index.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="myForm" name="send_ask" action="test_e.php" method="post">
<button id="sub">Send</button>
<span id="loading" style="display:none;">PLEASE WAIT.......</span>
<span id="result" style="display:none;"></span>
</form>
<script type="text/javascript">
$('#myForm').submit(function(e){
e.preventDefault();
$.ajax({
url: $("#myForm").attr("action"),
data: $("#myForm :input").serializeArray(),
type: 'post',
dataType: 'html',
success: function(data){
$("#result").html(data);
},
beforeSend: function(){
document.getElementById("sub").disabled = true;
document.getElementById("loading").style.display="inline";
$("#result").hide()
},
complete: function(data){
$("#result").show()
}
});
});
</script>
test_e.php
TEST
Well first thing I see if the button is not a submit button so not sure how the others are submitting the form.
<button id="sub" type="submit">Send</button>
I've issues in my code, I need send an image with ajax, but when I'd in my code, doesn't work.
I'll need use forms for validated my servlets.
<script type="text/javascript">
function UploadFile() {
fileData = document.getElementById("filePicker").files[0];
var data = new FormData();
var url = 'localhost';
console.log(url);
alert(url);
$.ajax({
url: url,
type: 'POST',
data: fileData,
cache: false,
crossDomain: true,
dataType: 'json',
processData: false,
contentType: false,
success: function (data) {
alert('successful..');
},
error: function (data) {
alert('Ocorreu um erro!');
}
});
alert("Finalizou");
}
</script>
<body>
<form>
<input type="file" id="filePicker" value="" />
<button id="btnUpload" onclick="UploadFile()">Upload</button>
</form>
</body>
If I'd remove the form like that.
<body>
<input type="file" id="filePicker" value="" />
<button id="btnUpload" onclick="UploadFile()">Upload</button>
</body>
It's works.
A button element will be of type submit as default, so it will submit the form and reload the page.
You have to prevent that, something like this
<form>
<input type="file" id="filePicker" value="" />
<button id="btnUpload" onclick="UploadFile(); return false;">Upload</button>
</form>
but as you're using jQuery, you should remove the inline javascript and use proper event handlers
$(function() {
$('#btnUpload').closest('form').on('submit', function(e) {
e.preventDefault();
UploadFile();
});
});
i need to serialize form input to send an Ajax call using jQuery to php script and each time i tried to print out the values of the form it gives empty array .
HTML Form
<form class="form-horizontal" id="generateCompression" method="post">
<fieldset>
<div class="control-group"><label class="control-label">Checkboxes</label>
<div class="controls">
<input type="checkbox" name="names[]" value="Jan-2011"> Jan-2013</label>
<input type="checkbox" name="names[]" value="Jan-2012"> Jan-2013</label>
<input type="checkbox" name="names[]" value="Jan-2013"> Jan-2013</label>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Generate</button>
<button type="reset" class="btn">Cancel</button>
</div>
</fieldset>
</form>
Javascript
$(document).ready(function(){
$("#result").hide();
$("#generateCompression").submit(function(){
$.ajax({
url: "compare-action.php",
type: "POST",
data: $("#generateCompression").serialize(),
async: true,
beforeSend : function (){
$("#loading").show();
$("#reportFilecreate").fadeOut();
},
success: function(response) {
$("#loading").hide();
$("#error").show();
$("#error").html(response);
}
});
return false;
});
});
this is the PHP file
<?php
$inputs = $_POST;
print_r($inputs);
?>
Checkboxes do not send anything to the server if at least one checkbox is not checked.
Your script needs to check for the existence of your form field, if the formfield doesnt exist then you know nothing has been checked.
To test simply add a text box to your form and then run your script again.
Try this.
Send serialized data in one variable like
$.ajax({
url: "compare-action.php",
type: "POST",
traditional: true,
data: {
"test_data" : $("#generateCompression").serialize()
},
async: true,
beforeSend : function (){
$("#loading").show();
$("#reportFilecreate").fadeOut();
},
success: function(response) {
$("#loading").hide();
$("#error").show();
$("#error").html(response);
}
});
And in the compare-action.php file
print_r($_POST("test_data"));