Here is my code:
$('#form').on('change', 'input', function (e){
e.preventDefault();
var cb = $(this);
if(cb.is(':checked')){
send_data(this);
}
else{
this.value=0;
send_data(this);
}
//if(!(this.checked)){
//$(this).val(0);
//}
});
send_data function:
function send_data(obj) {
$.ajax({
type: 'POST',
url: 'some.php',
async: true,
data: $(this).serialize(),
success: function (msg) {
console.log(msg);
}
});
}
some function:
var inp_f =document.createElement('input');
inp_f.setAttribute('type', 'hidden');
inp_f.setAttribute('name', intrst);
inp_f.setAttribute('value', 0);
var inp = document.createElement('input');
inp.setAttribute('type', 'checkbox');
inp.setAttribute('id', intrst);
inp.setAttribute('name', intrst);
inp.setAttribute('value', 1);
I have looked over several questions, so before you flag me for duplicate post; none of them have solved my issue. I have created a function that dynamically creates inputs. When that input is checked a value of 1 is sent. When it is unchecked I am trying to then send a value of 0 through ajax call. I have created the invisible field for some reason it does recognize it. So I then attempted to changed the value of this.value=0 that does not set until after the script has ran. Then as long as the page is not reloaded the value remains 0.
EDIT: Reordered the input elements and the console is still showing $(this).val() = 0
Related
I would like to validate a form with an AJAX request to the server and then swap the form html in the web browser with the form html from the server because this would be an easy implementation in theory. It is proving a nightmare though because the change event is triggered without the user interacting further after the first interaction which triggered the first change event. Consequently an infinite loop of AJAX requests to the server is happening.
The html form sits inside a div which has classes 'container mb-4'. This is the JS code -
var _cont = $('.container.mb-4')
var _form = $('.custom-form')
function ajax_validation(form) {
form.on('change', 'input, select, textarea', function() {
form_data = form.serialize()
$.ajax({
url: "/form/6/",
type: "POST",
data: form_data,
success: function(data) {
if(!(data['success'])) {
_cont.empty()
_cont.append(data['form_html'])
form = _cont.find('form')
ajax_validation(form)
}
},
error: function () {
form.find('.error-message').show()
}
});
})
}
ajax_validation(_form)
The change event I am assuming is triggered because the server returns a form input field with a different csrf token as the value to the previous input field - all other fields are the same. So an obvious solution would be to keep the same csrf token. But I want to understand why the JS code isn't working. I thought destroying the form would destroy the change event bound to it. So am at a loss to explain this infinite loop. How do I change this so I can just swap the form and not trigger another change event until the user really does change something?
It's not a good thing to use events in function no need to do that
Also your event here for input , select , textarea for serialize you need to select the closest() form
Try the next code
var _cont = $('.container.mb-4');
var _form = $('.custom-form');
_cont.on('change', 'form input,form select,form textarea', function() {
var ThisForm = $(this).closest('form');
var form_data = ThisForm.serialize();
$.ajax({
url: "/form/6/",
type: "POST",
data: form_data,
success: function(data) {
if(!(data['success'])) {
_cont.html(data['form_html']);
}
},
error: function () {
ThisForm.find('.error-message').show()
}
});
});
And logically if(!(data['success'])) { should be if(data['success']) {
First let's understand the issue that you have. You have a function called ajax_validation that is defining a change event on the form's elements which, on response will call ajax_validation. So, if any change happens on your elements, then a new request is sent to the server. So, if any value is changed, like a token, the request will be sent again. You could use a semaphore, like this:
var semaphore = true;
function ajax_validation(form) {
form.on('change', 'input, select, textarea', function() {
if (!semaphore) return;
semaphore = false;
form_data = form.serialize()
$.ajax({
url: "/form/6/",
type: "POST",
data: form_data,
success: function(data) {
if(!(data['success'])) {
_cont.empty()
_cont.append(data['form_html'])
form = _cont.find('form')
ajax_validation(form)
}
semaphore = true;
},
error: function () {
form.find('.error-message').show()
}
});
})
}
Something like this should solve your issue for the time being, but you should consider refactoring your code, because what you experience is well-known and is called callback hell.
Turns out the password field was coming back blank from the server - this django must do out of the box if the PasswordInput widget is used. So the form is replaced with a new form which lacks the password input from the before. The browser was then applying the autofill password value to the form which was triggering the change event.
This is my code now. It checks that the form_data about to be sent for validation really is different to before minus the csrf token which will be different.
It is based on Mohamed's answer -
var _cont = $('.container.mb-4');
var _form = $('.custom-form');
var prev_data = undefined
_cont.on('change', 'form input,form select,form textarea', function() {
var ThisForm = $(this).closest('form');
var form_data_wo_csrf = ThisForm.find("input, textarea, select").not("input[type='hidden']").serialize()
if(form_data_wo_csrf == prev_data) {
return
}
var form_data = ThisForm.serialize()
$.ajax({
url: "/form/6/",
type: "POST",
data: form_data,
success: function(data) {
if(!(data['success'])) {
_cont.html(data['form_html']);
prev_data = form_data_wo_csrf
}
},
error: function () {
ThisForm.find('.error-message').show()
}
});
});
I am trying to perform an ajax request by setting FormData using jquery each loop after finding input and select element for update as follows:
$(document).on("click", ".update", function (e) {
e.preventDefault();
e.stopPropagation();
let thisBtn = $(this);
//Form Data
let formData = new FormData();
let thisRow = thisBtn.closest("tr");
thisRow.find("input,select").each(function() {
//console.log(this.value)
formData.append($(this).attr('name'), $(this).val());
});
$.ajax({
type: "POST",
url: '<?php echo base_url()?>exam/update',
data: formData,
processData: false,
contentType: false,
success:function(data){
if($.trim(data)=='yes')
{
alert('Success! Record updated successfully');
}
else
{
alert('Error! Record not updated successfully')
}
}
});
});
But getting some undefined params as follows:
But I want pure parameters except undefined
Without seeing your HTML we can't tell you exactly why, but from the output it's clear that you have some input and/or select elements in your form which have no name or value. They're probably hidden, so check the DOM inspector to find and remove them.
If you don't want to amend the HTML, then you can use an attribute selector to only find the input and select elements which have a name, like this:
let $thisBtn = $(this);
let formData = new FormData();
let $thisRow = $thisBtn.closest("tr");
$thisRow.find("input[name], select[name]").each(function() {
formData.append(this.name, $(this).val());
});
It seems that this piece of code is finding inputs/select which name attribute is undefined, what would explain the fact you are getting undefined values in the formData.
thisRow.find("input,select").each(function() {
//alert(this.value)
formData.append($(this).attr('name'), $(this).val());
});
I would recommend you to check whether the name is undefined before adding to the formData.
thisRow.find("input,select").each(function() {
//alert(this.value)
if($(this).attr('name'))
{
formData.append($(this).attr('name'), $(this).val());
}
});
Hi I'm working on an ajax function in jquery that saves the value of a checkbox. Here is my question, What if the user clicks in multiple times even the saving is not yet finished/success? How can i Prevent the user to tick the checkbox when the form is submitting? Thanks !
Heres my Code Snippet:
$(".chkOverride").click(function (e) {
var userId = $("#UserId").val();
var isChecked = $(this).is(":checked")
$.ajax({
url: "/Worker/Worker?Id=" + Id + "&isChecked=" + isChecked + "&UserId=" + UserId,
type: "post",
success: function (result) {
alert("Success!");
location.reload();
},
error: function () {
}
});
});
You can disable the checkbox before starting the ajax call. You may use the prop() method to do that. Set the disabled property value to true
$(".chkOverride").click(function (e) {
var _this=$(this);
_this.prop('disabled', true);
var userId = $("#UserId").val();
var isChecked = $(this).is(":checked")
$.ajax({
url: "/Worker/Worker?Id=" + Id + "&isChecked=" +
isChecked + "&UserId=" + UserId,
type: "post",
success: function (result) {
alert("Success!");
//No point in enabling as you are going to reload the page
_this.prop('disabled', false);
location.reload();
},
error: function () {
alert("Error :(");
_this.prop('disabled', false);
}
});
});
Have you come across this link:
Inhibit a checkbox from changing when clicking it
You can disable the checkbox using
$this.attr('disabled', 1);
Disable the button before making the Ajax call.
i'm trying to post a form containing an input text, a textarea, and 14 checkbox with ajax. The idea is to insert some data according to the number of checked checkbox into table dbdata.
Here is the script.js :
$(document).on('click', '#save', function(event) {
//action
var url = "aksi.php";
//an input text
var v_id = $('input:text[name=id]').val();
//a textarea
var v_note = $('#note').val();
//some checkboxes
var v_checkbox =[]
$("input[name='checkbox[]']:checked").each(function ()
{
v_checkbox.push(parseInt($(this).val()));
});
//ajax
$.ajax({
url: url,
type: "POST",
data: {id: v_id,note: v_note,checkbox:v_checkbox },
success: function (data, status){
alert("success!")
},
error: function(xhr,err){
alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
alert("responseText: "+xhr.responseText);
}
});
});
This is the aksi.php :
require "../../config/db.php";
$id=$_POST['id'];
$checkbox= $_POST['checkbox'];
$note=$_POST['note'];
foreach ($checkbox as $key => $check_box) {
mysqli_query($con,"INSERT INTO dbdata(id, checkbox, note) VALUES($id, $check_box, '$note')");
}
The problem is the data never posted. The ajax thrown error (readyState=0, status=0) and data not inserted. The url also changed to :
index.php?checkbox[]=3&checkbox[]=4&checkbox[]=5
depend on which checkbox are checked. Any idea?
Can you put one echo statement at the last in php file for resolving the error issue. like
echo 1;
Update the first line like this if save is the submit button:
$(document).on('click', '#save', function(event) {
event.preventDefault();
.....
});
For resolving the db insertion issue, try include the full path of the required file instead of relative path.
I have a few forms on my single page and I'm submitting them by this method:
$(function() {
$(".button").click(function() {
var upform = $(this).closest('.upform');
var txt = $(this).prev(".tekst").val();
var dataString = 'tekst='+ txtr;
$.ajax({
type: "POST",
url: "http://url-to-submit.com/upload/baza",
data: dataString,
success: function() {
upform.html("<div class='message'></div>");
$('.message').html("<h2>FORM SUBMITTED</h2>")
.append("<p>THANKS!!</p>")
.hide()
.fadeIn(1500, function() {
$('.message').append("<img src='http://my-images.com/i/check.png' />");
});
}
});
return false;
});
});
As you can see, after submit a form, message div appears instead of submitted form.
It works perfectly, when I submit only one form - then it changes to my message div, but when I submit second, and next and next - every time ALL of my already submitted form's messages refreshing.
It looks bad. I want to operate only on actually submitting form. How to fix it?
Well you're setting the message of every .message div by using $('.message').html(). Try this:
upform.find('.message').html(...)
Hard to tell without seeing how your HTML looks but i'm guessing it's this bit,
$('.message')
Should be something like,
$('.message', upForm).
First you have to find out the message div (upform.find('.message')) and than add any html to it. i think your code should be
$(function() {
$(".button").click(function() {
var upform = $(this).closest('.upform');
var txt = $(this).prev(".tekst").val();
var dataString = 'tekst='+ txtr;
$.ajax({
type: "POST",
url: "http://url-to-submit.com/upload/baza",
data: dataString,
success: function() {
upform.html("<div class='message'></div>");
upform.find('.message').html("<h2>FORM SUBMITTED</h2>")
.append("<p>THANKS!!</p>")
.hide()
.fadeIn(1500, function() {
upform.find('.message').append("<img src='http://my-images.com/i/check.png' />");
});
}
});
return false;
});
});
Another way without editing more in your current code just add few lines.
var msgbox = $("<div class='message'></div>");
upform.html(msgbox);
msgbox.html("<h2>FORM SUBMITTED</h2>")
.append("<p>THANKS!!</p>")
.hide()
.fadeIn(1500, function() {
$(this).append("<img src='http://my-images.com/i/check.png' />");
});