If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
पिछले Topics में आपने सीखा कि JavaScript AJAX के through GET / POST request कैसे send करते हैं , इस topic में आप सीखेंगे कि Form को कैसे submit करते हैं।
Form submit करने के लिए हम DOM Event submit use करेंगे , अगर आप DOM Events के बारे में नहीं जानते हैं तो मैं आपको recommend करूंगा कि आप पहले DOM Events के बारे में overview लें।
सबसे पहले एक form.html file बनाते हैं , जहाँ पर हम form ready करेंगे और उसे JavaScript के through submit करने के लिए JavaScript Code लिखेंगे।
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX Submit Form</title>
</head>
<body>
<form id="myform" method="POST">
<p>Enter Your Name : <input type="text" name="name" placeholder="Your Full Name" required="required"></p>
<p>Enter Age : <input type="number" name="age" min="18" max="100" required="required"></p>
<p>Enter Your Email : <input type="email" name="email" placeholder="Your Email Address" required="required"></p>
<p>Enter Mobile No. : <input type="text" name="mobile" placeholder="Mobile Number" required="required"></p>
<p>About Yourself : <textarea rows="4" name="about" placeholder="Write Something About Yourself"></textarea></p>
<p><button type="submit">Submit</button></p>
</form>
<div id="result">Here result will be show.</div>
<script type="text/javascript">
let form = document.getElementById('myform');
form.addEventListener('submit', function(event)
{
event.preventDefault();
/* 1. now get the form object
* 2. create FormData Object and put the every input field's value in it
* 3. then send it with ajax request
**/
let form_data = new FormData();
form_data.append('name', form.elements['name'].value);
form_data.append('age', form.elements['age'].value);
form_data.append('email', form.elements['email'].value);
form_data.append('mobile', form.elements['mobile'].value);
form_data.append('about', form.elements['about'].value);
let xhttpreq = new XMLHttpRequest();
xhttpreq.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200)
{
document.getElementById("result").innerHTML = this.responseText;
}
};
xhttpreq.open("POST", "handle_form.php", true);
xhttpreq.send(form_data);
});
</script>
</body>
</html>अब एक PHP File ready करते हैं जहाँ पर form data को print कर सकें।
<?php
echo 'Form Submitted.';
echo '<br>'; /* for line break */
echo 'Form Data : <pre> ';
print_r($_POST);
?>Explain :
जब form को submit किया जाता है , तो submit event occur करती है। इसलिए सबसे पहले form को ID के bases पर select किया , और submit eventListener add किया ताकि जब Form submit हो तो उसे handle कर सकें।
preventDefault() के through form submission को stop किया , जिससे page reload / redirect न हो।
उसके बाद FormData Class का Object बनाकर उसमे form input की value को append किया।
finally simple POST request की तरह , request को send किया और Output को print कराया।