मेरे पास एक ऐसा फॉर्म है जिसे आप डेटाबेस में डेटा जोड़ सकते हैं। यह सब jquery और AJAX के साथ किया जाता है, इसलिए जब आप सबमिट करते हैं तो यह कोड को मान्य करता है और फिर यदि सब कुछ सही है तो यह पेज को रीफ्रेश करने के साथ पोस्ट डेटा सबमिट करता है। समस्या यह है कि फॉर्म पहली बार काम करता है, लेकिन फिर जब आप फॉर्म के साथ एक और प्रविष्टि सबमिट करते हैं तो यह काम नहीं करता है। मैंने सोचा कि यहJquery फॉर्म केवल पहली बार सबमिट करने पर काम करता है, और दूसरा
$(document).ready(function(){
के साथ कुछ था लेकिन मैं वास्तव में नहीं पता है। मैंने नीचे दिए गए कुछ कोड चिपकाए हैं। यह बहुत लंबा है, लेकिन यह जानने के लिए पर्याप्त जानकारी देनी चाहिए कि यह क्या कर रहा है। पूरे js फ़ाइल अभी, पहली बार जब आप प्रपत्र यह बहुत अच्छा काम करता है का उपयोग http://www.myfirealert.com/callresponse/js/AddUser.js
$(document).ready(function(){
$('#AddCaller').click(function(e){
//stop the form from being submitted
e.preventDefault();
/* declare the variables, var error is the variable that we use on the end
to determine if there was an error or not */
var error = false;
var Firstname = $('#Firstname').val();
...OTHER FORM FIELDS HERE
/* in the next section we do the checking by using VARIABLE.length
where VARIABLE is the variable we are checking (like name, email),
length is a javascript function to get the number of characters.
And as you can see if the num of characters is 0 we set the error
variable to true and show the name_error div with the fadeIn effect.
if it's not 0 then we fadeOut the div(that's if the div is shown and
the error is fixed it fadesOut. */
if(Firstname.length == 0){
var error = true;
$('#Firstname_error').fadeIn(500);
}else{
$('#Firstname_error').fadeOut(500);
}
if(Lastname.length == 0){
var error = true;
$('#Lastname_error').fadeIn(500);
}else{
$('#Lastname_error').fadeOut(500);
}
...MORE CONDITIONAL STATEMENTS HERE
//now when the validation is done we check if the error variable is false (no errors)
if(error == false){
//disable the submit button to avoid spamming
//and change the button text to Sending...
$('#AddCaller').attr({'disabled' : 'true', 'value' : 'Adding...' });
/* using the jquery's post(ajax) function and a lifesaver
function serialize() which gets all the data from the form
we submit it to send_email.php */
$.post("doadd.php", $("#AddCaller_form").serialize(),function(result){
//and after the ajax request ends we check the text returned
if(result == 'added'){
//$('#cf_submit_p').remove();
//and show the success div with fadeIn
$('#Add_success').fadeIn(500);
$('#AddCaller').removeAttr('disabled').attr('value', 'Add A Caller');
document.getElementById('Firstname').value = "";
document.getElementById('Lastname').value = "";
document.getElementById('PhoneNumber').value = "";
document.getElementById('DefaultETA').value = "";
document.getElementById('Apparatus').value = "";
document.getElementById('DefaultLocation').value = "";
setTimeout(" $('#Add_success').fadeOut(500);",5000);
}else if(result == 'alreadythere'){
//checks database to see if the user is already there
$('#Alreadythere').fadeIn(500);
$('#AddCaller').removeAttr('disabled').attr('value', 'Add A Caller');
}
else{
//show the failed div
$('#Add_fail').fadeIn(500);
//reenable the submit button by removing attribute disabled and change the text back to Send The Message
$('#AddCaller').removeAttr('disabled').attr('value', 'Send The Message');
}
});
}
});
});
पर है। और बटन को फिर से सक्षम किया गया है, लेकिन फिर जब आप कोई अन्य प्रविष्टि करने का प्रयास करते हैं और बटन पर क्लिक नहीं होता है।
सहायता के लिए धन्यवाद!
संपादित करें: फ़ॉर्म सबमिट करने के बाद पहली बार बटन अभी भी सक्षम है और आप उस पर क्लिक कर सकते हैं, लेकिन जब आप उस पर क्लिक करते हैं तो कुछ नहीं होता ... भले ही आप फॉर्म भरें। ऐसा लगता है कि फॉर्म की क्लिक घटना पहली बार फायरिंग नहीं कर रही है।
EDIT2 जैसा कि अनुरोध किया गया है, मैं HTML पोस्ट करने जा रहा हूं, यह एक पासवर्ड संरक्षित साइट के पीछे है, इसलिए मैं आपको पृष्ठ लिंक नहीं भेज सकता।
<form action='addcallers.php' method='post' id='AddCaller_form'>
<h2>Add Callers</h2>
<p>
First Name:
<div id='Firstname_error' class='error'> Please Enter a First Name</div>
<div><input type='text' name='Firstname' id='Firstname'></div>
</p>
<p>
Last Name:
<div id='Lastname_error' class='error'> Please Enter a Last Name</div>
<div><input type='text' name='Lastname' id='Lastname'></div>
</p>
...MORE FORM FIELDS HERE
<div style="display:none;">
<input type='text' name='DefaultLocation' id='DefaultLocation' value= "Sometthing" readonly=readonly >
</div>
</p>
<p>
<div id='Add_success' class='success'> The user has been added</div>
<div id='Alreadythere' class='error'> That user is already in the database</div>
<div id='Add_fail' class='error'> Sorry, don't know what happened. Try later.</div>
<p id='cf_submit_p'>
<input type='submit' id='AddCaller' value='Send The Message'>
</p>
</form>
</div>
EDIT3 भी पृष्ठ पर अन्य ajax नहीं है, लेकिन यह सीधे जावास्क्रिप्ट में लिखा है। मुझे यकीन नहीं है कि क्या यह किसी भी तरह से कार्यक्षमता को प्रभावित करेगा। लेकिन यदि आवश्यक हो तो मैं उस अजाक्स को भी पोस्ट कर सकता हूं।
EDIT4 मैं http://web.enavu.com/tutorials/create-an-amazing-contact-form-with-no-ready-made-plugins/ से मूल ट्यूटोरियल मिला है और यह
संपादित संशोधित कुछ अलग अलर्ट में डालने के बाद, मुझे पता चला है कि यह सशर्त बयान if(error==false)... कोई आइडिया क्यों नहीं करता है?
शीघ्रता से अवलोकन से, इस ठीक काम करना चाहिए। कुंजी लाइनों में अलर्ट जोड़ें और देखें कि यह कहां रुक गया है या बेहतर है, फिर भी इसे फ़ायरबग या कुछ समकक्ष के साथ डीबग करें, और हमें परिणाम बताएं। –
हां - विशेष रूप से, मैं यह सुनिश्चित करने के लिए "अलर्ट()" या "console.log()" का उपयोग करता हूं कि दूसरे क्लिक पर "क्लिक" हैंडलर लगाया जा रहा है। – Pointy
क्लिक ईवेंट को दूसरी बार नहीं कहा जा रहा है। आप जो भी चाहते हैं उसे क्लिक कर सकते हैं, लेकिन यह कुछ भी नहीं करता – Bill