I'm using PHP and Ajax to post without page refresh. Everything works fine but the textarea content is not reset after submitting the form.
This is my Ajax code:
$("#new_post__add").submit(function(event){
event.preventDefault();
var post_url = $(this).attr("action");
var request_method = $(this).attr("method");
var form_data = $(this).serialize();
$.ajax({
url : post_url,
type: request_method,
data : form_data
}).done(function(response){ //
$("#load_data").html(response);
});
});
How can I reset the textarea value after successfully submitting the form? can you please edit my code?
You can also reset all elements within the form by doing any of the following
$('#new_post__add').trigger('reset');
$('#new_post__add')[0].reset();
document.getElementById('#new_post__add').reset();
Inside the done callback, you can target the text area element and clear it.
textarea.value = '';
$("#new_post__add").submit(function(event){
event.preventDefault();
var post_url = $(this).attr("action");
var request_method = $(this).attr("method");
var form_data = $(this).serialize();
$.ajax({
url : post_url,
type: request_method,
data : form_data
}).done(function(response){ //
$("#load_data").html(response);
$('#new_post__add textarea').val(""); //this is assuming there is only one textarea inside your form
});
});
Try using success instead of done. Depending on the version, success may or may not be deprecated.
$("#new_post__add").submit(function(event){
event.preventDefault();
var post_url = $(this).attr("action");
var request_method = $(this).attr("method");
var form_data = $(this).serialize();
$.ajax({
url : post_url,
type: request_method,
data : form_data
}).success(function(response){ //
$("#load_data").html(response);
});
});
If it still doesn't work, I'd add fail and always handlers with console.log output to see what's happening. If you're sure success is not deprecated in your version, then the equivalent are error and complete. Or maybe I've mixed versions. Hell, you can have all six, and see which get called!
Related
Ok, what i'm trying to do is to create a list of select boxes which update their value each depending on the above:
the first one is like that:
<script>
var $schoolRegion = $('#stage_attendedSchoolRegion');
$schoolRegion.change(function() {
var $form = $(this).closest('form');
var data = {};
data[$schoolRegion.attr('name')] = $schoolRegion.val();
$.ajax({
url : $form.attr('action'),
type: $form.attr('method'),
data : data,
success: function(html) {
$('#stage_attendedSchoolDistrict').replaceWith(
$(html).find('#stage_attendedSchoolDistrict')
);
}
});
});
</script>
when it's value changes an ajax request is dispatched, and the choices of the "#stage_attendedSchoolDistrict" select are updated with the POST html value.
Since here's all good, now i need to do the same with the "#stage_attendedSchoolDistrict" select so:
<script>
var $schoolDistrict = $('#stage_attendedSchoolDistrict');
$schoolDistrict.on.change(function() {
var $form = $(this).closest('form');
var data = {};
data[$schoolDistrict.attr('name')] = $schoolDistrict.val();
$.ajax({
url : $form.attr('action'),
type: $form.attr('method'),
data : data,
success: function(html) {
$('#stage_attendedSchoolCity').replaceWith(
$(html).find('#stage_attendedSchoolCity')
);
}
});
});
</script>
The problem is that the event doesn't trigger at all. I'm thinking it is related to the fact that the former has values in the HTML of the page while the latter doesnt. How can i solve?
Any suggestion is appreciated, thanks for the help.
You're calling on.change in the second example instead of just .change as in the first example.
I've written one AJAX function code as follows :
$('#form').submit(function(e) {
var form = $(this);
var formdata = false;
if(window.FormData) {
formdata = new FormData(form[0]);
}
var formAction = form.attr('action');
$.ajax({
type : 'POST',
url : 'manufacturers.php',
cache : false,
data : formdata ? formdata : form.serialize(),
contentType : false,
processData : false,
success: function(response) {
if(response != 'error') {
//$('#messages').addClass('alert alert-success').text(response);
// OP requested to close the modal
$('#myModal').modal('hide');
} else {
$('#messages').addClass('alert alert-danger').text(response);
}
}
});
e.preventDefault();
});
Now here in data attribute I want to send some additional parameters with values in data attribute. How should I send these parameters to PHP file?
For clear understanding of my issue refer the following AJAX function code that I've written previously :
function GetPaymentRequest(status){
var status = $('#status_filter').val();
$.ajax({
type: "POST",
url: "view_payment_request.php",
data: {'op':'payment_request_by_status','request_status':status},
success: function(data) {
// alert(data);
}
});
}
In above function code you can see that I've passed few parameters with values viz. 'op':'payment_request_by_status','request_status':status in data attribute.
Exactly same parameters I want to pass in first AJAX function code. The already mentioned parameter "formdata ? formdata : form.serialize()" should also be there.
How should I do this? Can someone please help me in this regard?
Thanks in advance.
Add by using $.param
form.serialize() + '&' + $.param({'op':'payment_request_by_status','request_status':status});
or use serializeArray() and push new items
var data = form.serializeArray();
data.push({name:'op',value:'payment_request_by_status'}).push({name:'request_status',value:status});
then pass data
What you can do is, add two hidden fields to your already existing form, name one of them as op and set the value as payment_request_by_status and another one as request_status and the value based on the status.
When the form is serialized, it will automatically send these values also.
i make a form in symfony when i submit form through ajax then i store (result.id) in a variable and then i used this variable in click function but the error occur invoiceid does not exist in new.html.twig
how to resolve this problem?
here is my code of ajax:
$("form").submit(function(e) {
e.preventDefault();
var url = $(this).attr('action');
var data = $(this).serialize();
$.ajax({
type: "POST",
url: url,
data: data,
}).done(function( result ) {
var invoiceid=(result.id);
if(result.success) {
$('#result').css({
'color':'black',
'background-color':'#8F8',
'display':'Block',
'width':'200px'
});
$('#result').html('Invoices Record Inserted');
setTimeout(function(){
$('#result').hide();
},3000);
}
});
this.reset();
});
$("#edit").click(function(){
window.location.href= "{{ path('invoices_edit', {'id': invoiceid }) }}";
});
Your templating function {{ path }} is resolved before JavaScript even runs.
Your templating engine is unable to see JavaScript values, and the variable invoiceid does not exist in your template.
I am sending form data using Ajax
function sendData(){
var formData = $('form').serialize();
$.ajax({
url:'/../admin/ajaxUtility.cfc?method=saveFormData',
data: formData
});
};
Above function works fine but sometimes I am sending huge data which makes url too long.
I am getting '404 Not Found' error with 'XML Parsing Error: no element found Location: moz-nullprincipal:{25f2f525-....} Line Number 1, Column 1:' in console window.
Is their any alternate way to send data using Ajax?
Thank you in advance for your help.
function sendData(){
var formData = $('form').serialize();
$.ajax({
type : "POST", // TRIED THIS ONE ?
url : '/../admin/ajaxUtility.cfc?method=saveFormData',
data : formData
});
} // ';' not needed at this point
Docs: http://api.jquery.com/jQuery.ajax/#entry-examples
I have added POST type and it works fine.
function sendData(){
var formData = $('form').serialize();
$.ajax({
url:'/../admin/ajaxUtility.cfc?method=saveFormData',
type: "POST",
async: true,
data: formData
});
};
I'm collecting all data from form input fields with serialize() function. But it doesn't include submit button value even if I pressed submit button. How to push form name into POST data (IN my case i wanna push form name into formData variable)?
The code looks like that
$("#signup_form").submit(function () {
var form = $(this),
formData = form.serialize(),
formUrl = form.attr('action'),
formMethod = form.attr('method');
....
Append it to the query string generated by serialize I guess. I'm not quite sure what you're doing with the form data in the rest of your function, full code may help, but the snippet below is probably sufficient.
$("#signup_form").submit(function () {
var form = $(this),
formData = form.serialize() + '&formName=' + form.attr('name'),
formUrl = form.attr('action'),
formMethod = form.attr('method'),
....