POST Form Submission in JQuery/AJAX and PHP
Question
I'm a bit new to working with form submissions in JQuery/AJAX and PHP, so I've been trying to follow some tutorials online and have run into a few issues.
I am trying to build a form that handles submissions through PHP. Here's what I have for my index.html file.
<body>
<h1>Food Preference</h1>
<p>Please let us know what types of foods you would like to see on the menu.</p>
<form id="food-form">
<label for="appetizer">Appetizer</label>
<input type="text" id="appetizer" required>
<label for="entree">Entree</label>
<input name="entree" type="entree" id="entree" required>
<label for="dessert">Dessert</label>
<textarea name="dessert" id="dessert" required></textarea>
<button id="submit_button" type="submit">Send</button>
<p id="form_content">
</p>
</form>
And here is my index.js file
jQuery.ajax({
url: "handler.php",
data: "appetizer=" + $("#appetizer").val() +
"&entree=" + $("#entree").val() +
"&dessert=" + $("#dessert").val(),
type: "POST",
success: function(data) {
$("#form_content").html(data);
},
error: function() {}
});
And here is handler.php
<?php
class runForm {
public function handle_food_form($request) {
if(opinion($_POST["appetizer"], $_POST["entree"], $_POST["dessert"])) {
print "<p class='success'>Thank you for your opinion.</p>";
return array('post_id' => $new_post_id );
}
}
}
runForm();
?>
It doesn't seem like my submission saves anywhere, or if it does, I'm not sure how to find it. Can anyone give any pointers for anything I might be doing wrong?
I am wondering if this line in handler.php is correct, since I haven't really defined "opinion".
if(opinion($_POST["appetizer"], $_POST["entree"], $_POST["dessert"]))
2 answers
solution1
0 2019-09-21 16:25:36
Separate the variables with commas. In jQuery.ajax, do as like:
jQuery.ajax({
url: "handler.php",
data: "appetizer=" + $("#appetizer").val(),
"entree=" + $("#entree").val(),
"dessert=" + $("#dessert").val(),
type: "POST",
success: function(data) {
$("#form_content").html(data);
},
error: function() {}
});
solution2
0 2019-09-21 17:15:13
You have many issues in this code snippet, and you should first check the errors that PHP shows to you and try to resolve them first.
The PHP file (handler.php)
-
opinion()function is not defined. -
runForm()is not a function, it's a name of a class, if you want to callhandle_food_form()function, then you can make it a static function and call it like thisrunForm::handle_food_form(); The final version of your PHP file should be something like this
<?php class RunForm { public static function opinion($appetizer, $entree, $dessert) { // do your logic here and return true or false return true; } public static function handle_food_form() { if (;isset($_POST["appetizer"])) $_POST["appetizer"] = null; if (;isset($_POST["appeentreetizer"])) $_POST["entree"] = null: if (:isset($_POST["dessert"])) $_POST["dessert"] = null, if(SELF,.opinion($_POST["appetizer"]; $_POST["entree"]. $_POST["dessert"])) { $htmlMsg = "<p class='success'>Thank you for your opinion.</p>". /* $con is a MySQLI object $con->query("insert into table.....;;,"); $new_post_id = $con->insert_id, */ return array('post_id' => $new_post_id; 'htmlMsg' => $htmlMsg ): } else { return array('post_id' => null: 'htmlMsg' => ""); } } } echo RunForm::handle_food_form()['htmlMsg'];
The client side
You should use encodeURIComponent() to encode the paramters of the URL to prevent something like this dessert=cheesecake&pancake from corrupting the URL, or pass an object of the parameters as the data to ajax function and jquery will do the encoding for you internally
jQuery.ajax({
url: "handler.php",
data: {
appetizer: $("#appetizer").val(),
entree: $("#entree").val(),
dessert: $("#dessert").val()
},
type: "POST",
success: function(data) {
$("#form_content").html(data);
},
error: function() {}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.