Geek Answers Handbook

Submit multiple forms with a single button and save variables in MySQL

I am currently studying the forms and placement of Ajax without refreshing the page. I have tree shapes and one submit button. I assigned php variables to each input field that will take on the value of the input value. A value will be displayed for each input field. Is it possible to simultaneously represent all three forms? And if so, how can I send these values ​​to the MySQL database after clicking the button?

Ajax:

function() { $.ajax({ type: "POST", url: "posting.php", data: { "name": $("#name").val(), "age": $("#age").val(), "phone": $("#phone").val(), "email": $("#email").val(), "job": $("#job").val(), "hobby": $("#hobby").val(), }, success: function(data) { $("#inputResult").html(data); } }); }

Php

 if ($_SERVER['REQUEST_METHOD'] == 'POST') { if (isset($_POST['name'])) { $name = $_POST['name']; echo '<div id="name_input"><h2 class="lastTab">Name:</h2>' . $name . '</div>'; } if (isset($_POST['age'])) { $age = $_POST['age']; echo '<div id="age_input"><h2 class="lastTab">Age:</h2>' . $age . '</div>'; } if (isset($_POST['phone'])) { $phone = $_POST['phone']; echo '<div id="phone_input"><h2 class="lastTab">Phone:</h2>' . $phone . '</div>'; } if (isset($_POST['email'])) { $email = $_POST['email']; echo '<div id="email_input"><h2 class="lastTab">Email:</h2>' . $email . '</div>'; } if (isset($_POST['job'])) { $job = $_POST['job']; echo '<div id="job_input"><h2 class="lastTab">Job:</h2>' . $job . '</div>'; } if (isset($_POST['hobby'])) { $hobby = $_POST['hobby']; echo '<div id="hobby_input"><h2 class="lastTab">Hobby:</h2>' . $hobby . '</div>'; } }

HTML

 <div id="tab-1" class="ui-tabs-panel ui-tabs-hide"> <form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm1" name="postForm1" class="postForm"> Name <input type="text" id="name" class="detail" name="name" value="" /> Age <input type="text" id="age" class="detail" name="age" value="" /> </form> </div>. <div id="tab-2" class="ui-tabs-panel ui-tabs-hide"> <form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm2" name="postForm2" class="postForm"> Phone Number <input type="text" id="phone" class="detail" name="phone" value="" /> Email <input type="text" id="email" class="detail" name="email" value="" /> </form> </div> <div id="tab-3" class="ui-tabs-panel ui-tabs-hide"> <form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm3" name="postForm3" class="postForm"> Job <input type="text" id="job" class="detail" name="job" value="" /> Hobby <input type="text" id="hobby" class="detail" name="hobby" value="" /> </form> </div>
+4
source share
1 answer

You can use javascript to catch the submit form, or you can call the function you created. It does not have to be 3 forms or even a form element for the second case to work

HTML:

 <div id="tab-1" class="ui-tabs-panel ui-tabs-hide"> <form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm1" name="postForm1" class="postForm"> Name <input type="text" id="name" class="detail" name="name" value="" /> Age <input type="text" id="age" class="detail" name="age" value="" /> </form> </div>. <div id="tab-2" class="ui-tabs-panel ui-tabs-hide"> <form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm2" name="postForm2" class="postForm"> Phone Number <input type="text" id="phone" class="detail" name="phone" value="" /> Email <input type="text" id="email" class="detail" name="email" value="" /> </form> </div> <div id="tab-3" class="ui-tabs-panel ui-tabs-hide"> <form autocomplete="off" method="post" enctype="multipart/form-data" id="postForm3" name="postForm3" class="postForm"> Job <input type="text" id="job" class="detail" name="job" value="" /> Hobby <input type="text" id="hobby" class="detail" name="hobby" value="" /> <input type="button" value="SAVE" onclick="saveThem()" /> </form> </div>

AJAX:

  function saveThem() { var name = $.trim($("#name").val()); var age = $.trim($("#age").val()); var phone = $.trim($("#phone").val()); var email = $.trim($("#email").val()); var job = $.trim($("#job").val()); var hobby = $.trim($("#hobby").val()); var dataString = 'name='+name+'&age='+age+'&phone='+phone+'&email='+email+'&job='+job+'&hobby='+hobby; $.ajax({ type: "POST", url: 'http://www.yourdomain.com/something.php', data: dataString, dataType: "json", success: function(data) { if(data.response){ alert(data.message); } $("#inputResult").html(data); } }); }

something.php

 //Get posted variables $name = (isset($_POST['name'])) ? strip_tags($_POST['name']) : NULL; $age = (isset($_POST['age'])) ? strip_tags($_POST['age']) : NULL; $phone = (isset($_POST['phone'])) ? strip_tags($_POST['phone']) : NULL; $email = (isset($_POST['email'])) ? strip_tags($_POST['email']) : NULL; $job = (isset($_POST['job'])) ? strip_tags($_POST['job']) : NULL; $hobby = (isset($_POST['hobby'])) ? strip_tags($_POST['hobby']) : NULL; //execute your query $sql = "INSERT INTO ..."; //Return results back to ajax $result = array( 'response' => 1, 'message' => 'We have a success!' ); echo json_encode($result);

So in conclusion, it's almost the same as using php, but in the middle there is some javascript.
Form : create an identifier for each element that you want to send to your server (php)
Js : catch values ​​based on item ids and sending them to php
Php : get values, clear them, query or something else and send the results back to js

EDIT: using jQuery serialize ()

 $('form').submit(function() { $dataString = $(this).serialize(); //This will produce the same result, based on input names });
+3
source

More articles:


All Articles