Bir gönderme olayını yakalamak ve ardından JSON olarak biçimlendirilmiş form öğelerini bir PHP sayfasına göndermek için jQuery kullanmaya çalışıyorum.
Ancak gönderme olayını yakalamakta sorun yaşıyorum, bir .click()
olayı ile başladım ancak bunun yerine .submit()
olayına geçtim.
Şimdi aşağıdaki kırpılmış koda sahibim.
HTML
<form method="POST" id="login_form">
<label>Username:</label>
<input type="text" name="username" id="username"/>
<label>Password:</label>
<input type="password" name="password" id="password"/>
<input type="submit" value="Submit" name="submit" class="submit" id="submit" />
</form>
Javascript
$('#login_form').submit(function() {
var data = $("#login_form :input").serializeArray();
alert('Handler for .submit() called.');
});
Kodu document ready içine sarın ve varsayılan gönderme eylemini önleyin:
$(function() { //shorthand document.ready function
$('#login_form').on('submit', function(e) { //use on if jQuery 1.7+
e.preventDefault(); //prevent form from submitting
var data = $("#login_form :input").serializeArray();
console.log(data); //use the console for debugging, F12 in Chrome, not alerts
});
});
Bunu dene:
Olayın akışını kesmek için ´return false´ kullanın:
$('#login_form').submit(function() {
var data = $("#login_form :input").serializeArray();
alert('Handler for .submit() called.');
return false; // <- cancel event
});
Düzenle
form öğesinin jQuery'nin 'length' değerine sahip olup olmadığını doğrulayın:
alert($('#login_form').length) // if is == 0, not found form
$('#login_form').submit(function() {
var data = $("#login_form :input").serializeArray();
alert('Handler for .submit() called.');
return false; // <- cancel event
});
VEYA:
DOM'un hazır olmasını bekler:
jQuery(function() {
alert($('#login_form').length) // if is == 0, not found form
$('#login_form').submit(function() {
var data = $("#login_form :input").serializeArray();
alert('Handler for .submit() called.');
return false; // <- cancel event
});
});
Kodunuzu belgenin "ready" olayının içine mi yoksa DOM hazır olduktan sonra mı koyuyorsunuz?
Sadece form.submit işlevini kendi uygulamanızla değiştirin:
var form = document.getElementById('form');
var formSubmit = form.submit; //save reference to original submit function
form.onsubmit = function(e)
{
formHandler();
return false;
};
var formHandler = form.submit = function()
{
alert('hi there');
formSubmit(); //optionally submit the form
};