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 लें।
Learn More About DOM Events
सबसे पहले एक form.html file बनाते हैं , जहाँ पर हम form ready करेंगे और उसे JavaScript के through submit करने के लिए JavaScript Code लिखेंगे।
File : form.html
<!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
<?php
echo 'Form Submitted.';
echo '<br>'; /* for line break */
echo 'Form Data : <pre> ';
print_r($_POST);
?>Explain :
❕ Important
Note , Request handle करने के लिए किसी server-side language और उसे Run करने के लिए Environment की जरूरत होती होती है , Example में PHP use की गयी है , और उसे run करने के लिए XAMPP Control Panel use किया गया है।
Learn PHP Tutorials Now
Hi ! My name is Rahul Kumar Rajput. I'm a back end web developer and founder of learnhindituts.com. I live in Uttar Pradesh (UP), India and I love to talk about programming as well as writing technical tutorials and tips that can help to others.
Get connected with me. :) LinkedIn Twitter Instagram Facebook
