INDIAN INNOVATORS: 2020

<img src="https://www.legendblogs.com/images/products/121746_1520433026_form_data_with_ajax.jpg" style="display: block; margin-left: auto; margin-right: auto;">Send form data with ajax, Yes now I am going to introduce one more thing for Ajax. The point is "How to submit additional parameter to the Ajax page with form-data". Yes, you can do that in jquery Ajax with the append method.Sometimes programmers require to send adding key and value to an Ajax page which is not in form, that time this method is helpful. So what should I do?<h2 style="box-sizing: border-box; font-family: "open sans"; line-height: 1.1; color: rgb(32, 33, 36); margin: 35px 0px 0.6em; font-size: 30px; letter-spacing: 0.5px; text-align: justify;">Sending form data</h2>Now, let's start with the submit the form using ajax JavaScript. I'll also discuss the jQuery ajax serialize form data for example.<p class="has-text-color has-background has-text-align-center has-medium-font-size has-vivid-purple-color has-very-light-gray-background-color" style="box-sizing: border-box; margin: 1em 0px 2em; font-family: "open sans"; font-size: 20px; text-align: center; color: rgb(155, 81, 224); letter-spacing: 0.5px; padding: 20px 30px; background-color: rgb(238, 238, 238);"><a href="https://www.legendblogs.com/laravel-project-with-admin-panel-for-blogging" style="box-sizing: border-box; background-color: transparent; text-decoration-line: none; transition: all 0.5s ease 0s;">How to start a Blog?</a><div class="" style="font-size: 16px; box-sizing: border-box; color: rgb(68, 68, 68); font-family: "open sans"; letter-spacing: 0.5px; text-align: justify;"></div>When you create your <a href="https://api.jquery.com/jQuery.ajax/" style="box-sizing: border-box; background-color: transparent; color: rgb(241, 99, 51); text-decoration-line: none; transition: all 0.5s ease 0s;">Ajax</a> page you need to implement new FormData (this) to send the form to another page, now that time you require append you add on data with this.<pre class="wp-block-code language-javascript code-toolbar" style="box-sizing: border-box; overflow: auto; font-family: Consolas, Monaco, "andale mono", "ubuntu mono", monospace; font-size: 14px; padding: 1em; margin-top: 0.5em; margin-bottom: 0.5em; line-height: 1.5; word-break: normal; overflow-wrap: normal; background: rgb(245, 242, 240); border: 1px solid rgb(226, 228, 231); border-radius: 4px; text-shadow: rgb(255, 255, 255) 0px 1px; tab-size: 4; hyphens: none; position: relative; letter-spacing: 0.5px;"><code class=" language-javascript" style="box-sizing: border-box; font-family: Consolas, Monaco, "andale mono", "ubuntu mono", monospace; font-size: inherit; padding: 0px; background: 0px 0px; border-radius: 0px; text-shadow: rgb(255, 255, 255) 0px 1px; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none;">var formData = new FormData(this);

formData.append(KET, PARAMETER);</code><div class="toolbar" style="box-sizing: border-box; position: absolute; top: 0.3em; right: 0.2em; transition: opacity 0.3s ease-in-out 0s; opacity: 0;"></div></pre><h3 style="box-sizing: border-box; font-family: "open sans"; line-height: 1.1; color: rgb(32, 33, 36); margin: 35px 0px 0.6em; font-size: 24px; letter-spacing: 0.5px; text-align: justify;">Rendering the form in HTML</h3>Ok, First you have to create your form as previous you have created.<pre class="wp-block-code language-markup code-toolbar" style="box-sizing: border-box; overflow: auto; font-family: Consolas, Monaco, "andale mono", "ubuntu mono", monospace; font-size: 14px; padding: 1em; margin-top: 0.5em; margin-bottom: 0.5em; line-height: 1.5; word-break: normal; overflow-wrap: normal; background: rgb(245, 242, 240); border: 1px solid rgb(226, 228, 231); border-radius: 4px; text-shadow: rgb(255, 255, 255) 0px 1px; tab-size: 4; hyphens: none; position: relative; letter-spacing: 0.5px;"><code class=" language-markup" style="box-sizing: border-box; font-family: Consolas, Monaco, "andale mono", "ubuntu mono", monospace; font-size: inherit; padding: 0px; background: 0px 0px; border-radius: 0px; text-shadow: rgb(255, 255, 255) 0px 1px; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none;"> <form id="sendFormData">

</form></code><div class="toolbar" style="box-sizing: border-box; position: absolute; top: 0.3em; right: 0.2em; transition: opacity 0.3s ease-in-out 0s; opacity: 0;"></div></pre><h3 style="box-sizing: border-box; font-family: "open sans"; line-height: 1.1; color: rgb(32, 33, 36); margin: 35px 0px 0.6em; font-size: 24px; letter-spacing: 0.5px; text-align: justify;">Form Submit Logic in JavaScript - JQuery</h3>Second, you have to create your java script code like this:<div class="" style="font-size: 16px; box-sizing: border-box; color: rgb(68, 68, 68); font-family: "open sans"; letter-spacing: 0.5px; text-align: justify;"></div><pre class="wp-block-code language-javascript code-toolbar" style="box-sizing: border-box; overflow: auto; font-family: Consolas, Monaco, "andale mono", "ubuntu mono", monospace; font-size: 14px; padding: 1em; margin-top: 0.5em; margin-bottom: 0.5em; line-height: 1.5; word-break: normal; overflow-wrap: normal; background: rgb(245, 242, 240); border: 1px solid rgb(226, 228, 231); border-radius: 4px; text-shadow: rgb(255, 255, 255) 0px 1px; tab-size: 4; hyphens: none; position: relative; letter-spacing: 0.5px;"><code class=" language-javascript" style="box-sizing: border-box; font-family: Consolas, Monaco, "andale mono", "ubuntu mono", monospace; font-size: inherit; padding: 0px; background: 0px 0px; border-radius: 0px; text-shadow: rgb(255, 255, 255) 0px 1px; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none;">$(document).ready(function(e){

$("#sendFormData").on('submit', function(e){

e.preventDefault();

var formData = new FormData(this);

$.ajax({

type: 'POST',

url: 'ajax_page.php',

data: formData,

contentType: false,

cache: false,

processData:false,

success: function(data){

alert(data);

},

complete: function(){

alert("Data uploaded successfully.");

},

error: function (jqXHR, textStatus, errorThrown) {

alert("Some problem occurred, please try again.");

}

});</code><div class="toolbar" style="box-sizing: border-box; position: absolute; top: 0.3em; right: 0.2em; transition: opacity 0.3s ease-in-out 0s; opacity: 0;"></div></pre>Third, your Ajax page will receive these values as normally with:<pre class="wp-block-code language-php code-toolbar" style="box-sizing: border-box; overflow: auto; font-family: Consolas, Monaco, "andale mono", "ubuntu mono", monospace; font-size: 14px; padding: 1em; margin-top: 0.5em; margin-bottom: 0.5em; line-height: 1.5; word-break: normal; overflow-wrap: normal; background: rgb(245, 242, 240); border: 1px solid rgb(226, 228, 231); border-radius: 4px; text-shadow: rgb(255, 255, 255) 0px 1px; tab-size: 4; hyphens: none; position: relative; letter-spacing: 0.5px;"><code class=" language-php" style="box-sizing: border-box; font-family: Consolas, Monaco, "andale mono", "ubuntu mono", monospace; font-size: inherit; padding: 0px; background: 0px 0px; border-radius: 0px; text-shadow: rgb(255, 255, 255) 0px 1px; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none;">$_POST[KEY]</code><div class="toolbar" style="box-sizing: border-box; position: absolute; top: 0.3em; right: 0.2em; transition: opacity 0.3s ease-in-out 0s; opacity: 0;"></div></pre>Now, finally your code should be:<p class="has-text-color has-background has-text-align-center has-medium-font-size has-vivid-purple-color has-very-light-gray-background-color" style="box-sizing: border-box; margin: 1em 0px 2em; font-family: "open sans"; font-size: 20px; text-align: center; color: rgb(155, 81, 224); letter-spacing: 0.5px; padding: 20px 30px; background-color: rgb(238, 238, 238);"><a href="https://www.legendblogs.com/top-50-mysql-interview-questions-and-answers" style="box-sizing: border-box; background-color: transparent; text-decoration-line: none; transition: all 0.5s ease 0s;">Top 50 MySQL Interview Questions and Answers</a><h3 style="box-sizing: border-box; font-family: "open sans"; line-height: 1.1; color: rgb(32, 33, 36); margin: 35px 0px 0.6em; font-size: 24px; letter-spacing: 0.5px; text-align: justify;">Final Thoughts</h3><pre class="wp-block-code language-markup code-toolbar" style="box-sizing: border-box; overflow: auto; font-family: Consolas, Monaco, "andale mono", "ubuntu mono", monospace; font-size: 14px; padding: 1em; margin-top: 0.5em; margin-bottom: 0.5em; line-height: 1.5; word-break: normal; overflow-wrap: normal; background: rgb(245, 242, 240); border: 1px solid rgb(226, 228, 231); border-radius: 4px; text-shadow: rgb(255, 255, 255) 0px 1px; tab-size: 4; hyphens: none; position: relative; letter-spacing: 0.5px;"><code class=" language-markup" style="box-sizing: border-box; font-family: Consolas, Monaco, "andale mono", "ubuntu mono", monospace; font-size: inherit; padding: 0px; background: 0px 0px; border-radius: 0px; text-shadow: rgb(255, 255, 255) 0px 1px; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none;"><!DOCTYPE html>

$(document).ready(function(e){

},

alert("Data uploaded successfully.");

},

alert("Some problem occurred, please try again.");

}

</script></code><div class="toolbar" style="box-sizing: border-box; position: absolute; top: 0.3em; right: 0.2em; transition: opacity 0.3s ease-in-out 0s; opacity: 0;"></div></pre><h3 style="box-sizing: border-box; font-family: "open sans"; line-height: 1.1; color: rgb(32, 33, 36); margin: 35px 0px 0.6em; font-size: 24px; letter-spacing: 0.5px; text-align: justify;">PHP Script</h3>ajax_page.php<div class="" style="font-size: 16px; box-sizing: border-box; color: rgb(68, 68, 68); font-family: "open sans"; letter-spacing: 0.5px; text-align: justify;"></div><pre class="wp-block-code language-php code-toolbar" style="box-sizing: border-box; overflow: auto; font-family: Consolas, Monaco, "andale mono", "ubuntu mono", monospace; font-size: 14px; padding: 1em; margin-top: 0.5em; margin-bottom: 0.5em; line-height: 1.5; word-break: normal; overflow-wrap: normal; background: rgb(245, 242, 240); border: 1px solid rgb(226, 228, 231); border-radius: 4px; text-shadow: rgb(255, 255, 255) 0px 1px; tab-size: 4; hyphens: none; position: relative; letter-spacing: 0.5px;"><code class=" language-php" style="box-sizing: border-box; font-family: Consolas, Monaco, "andale mono", "ubuntu mono", monospace; font-size: inherit; padding: 0px; background: 0px 0px; border-radius: 0px; text-shadow: rgb(255, 255, 255) 0px 1px; word-spacing: normal; word-break: normal; overflow-wrap: normal; line-height: 1.5; tab-size: 4; hyphens: none;"><?php

if(isset($_POST['action'])){

$action = $_POST['action'];

$name = $_POST['name'];

$email = $_POST['email'];

$check = $_POST['check'];

echo "Name : ".$name;

echo "Email : ".$email;

echo "Check : ".$check;

}

else{

}

?> </code></pre>" >

INDIAN INNOVATORS

Saturday, 31 October 2020

sfdfdfdf

Total Pageviews