AJAX Form Submit In Hindi

📔 : AJAX 🔗

पिछले Topics में आपने सीखा कि JavaScript AJAX के through GET / POST request कैसे send करते हैं , इस topic में आप सीखेंगे कि Form को कैसे submit करते हैं।


Form submit करने के लिए हम DOM Event submit use करेंगे , अगर आप DOM Events के बारे में नहीं जानते हैं तो मैं आपको recommend करूंगा कि आप पहले DOM Events के बारे में overview लें।
Learn More About DOM Events


सबसे पहले एक form.html file बनाते हैं , जहाँ पर हम form ready करेंगे और उसे JavaScript के through submit करने के लिए JavaScript Code लिखेंगे।

File : form.html

CopyFullscreenClose Fullscreen
<!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 कर सकें।

File : handle_form.php

Copy Fullscreen Close Fullscreen
<?php
 echo 'Form Submitted.';
 echo '<br>'; /* for line break */
 echo 'Form Data : <pre> ';
 print_r($_POST);
?>

Explain :

  1. जब form को submit किया जाता है , तो submit event occur करती है।  इसलिए सबसे पहले form को ID के bases पर select किया , और submit eventListener add किया ताकि जब Form submit हो तो उसे handle कर सकें।
  2. preventDefault() के through form submission को stop किया , जिससे page reload / redirect न हो।
  3. उसके बाद FormData Class का Object बनाकर उसमे form input की value को append किया।
  4. finally simple POST request की तरह , request को send किया और Output को print कराया।

Important
Note , Request handle करने के लिए किसी server-side language और उसे Run करने के लिए Environment की जरूरत होती होती है , Example में PHP use की गयी है , और उसे run करने के लिए XAMPP Control Panel use किया गया है।
Learn PHP Tutorials Now

Related Topics :

Rahul Kumar

Rahul Kumar

Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)

Get connected with me. :) LinkedIn Twitter Instagram Facebook

b2eprogrammers