I'm struggling with this problem for about week, What I need to do, Is submit form with ajax, That was already loaded with ajax, I have tried many solutions but nothing work, So if someone know, the right approach, I will be appreciated, And Thank advanced.
This is my code :
<form class="w3-container" method="POST" action="forms-submitting" id="SignIN">
<p>
<label><b> إسم المستخذم </b></label>
<input class="w3-input w3-border" type="text" name="user_name">
</p>
<p>
<label><b> كلمة المرور <b></label>
<input class="w3-input w3-border" type="password" name="pass_word">
</p>
<p>
<button type="submit" class="w3-button w3-text-blue"> تسجيل الدخول </button>
</p>
</form>
And this is my ajax code:
$("#SignIN").submit(function(e) {
var url = "forms-handle.php";
$.ajax({
type: "POST",
url: url,
data: $("#SignIN").serialize(),
success: function(data)
{
alert(data);
}
});
e.preventDefault();
});
Since you're not using the regular submit you could change your button to button type and attach click event to this button like :
<button type="button" id="login" class="w3-button w3-text-blue"> تسجيل الدخول </button>
$('body').on('click', '#login', function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "forms-handle.php",
data: $("#SignIN").serialize(),
success: function(data)
{
alert(data);
}
});
});
NOTE : Since the form is loaded dynamically you should use event delegation .on().
Hope this helps.