提交没有表单刷新的html表单，在html页面上显示成功消息
[英]Submit html form without page refresh show on html page a success message
问题描述
I know this has been asked before and I'm sorry to ask. 
我知道这已经被问过，不好意思问。 I've have searched through and am unable to find a way to get this to work. 我已经搜索过了，无法找到一种方法来使它工作。 I am trying to figure out how to incorporate a success message on the html form after submitting without a page refresh. 我试图弄清楚如何在提交后不将页面刷新的情况下将成功消息合并到html表单中。 This code works fine and writes to the database except for the addition of the ajax code which it where my issue is. 除了在我的问题所在的位置添加了ajax代码外，此代码可以正常工作并写入数据库。 I freely admit to having limited knowledge with Ajax. 我自由地承认对Ajax的了解有限。 Any help would be kindly appreciated - Thanks! 任何帮助将不胜感激-谢谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <style> /* Honey Pot: */ .robotic { display: none; } </style> </head> <body> <form id="form1" name="form1" method="post" action=""> <!-- <form id="form1" name="form1" method="post" action="result22.php"> --> <p> <input name="dealershipname" type="text" id="dealershipname" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="Dealership Name" required /> </p> <p> <input name="currentlycarry" type="text" id="currentlycarry" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="Manufactures You Currently Carry" required /> </p> <p><label>Which Vehicles are you looking to Carry?</label><br> <select required="required" name="vehicletype" id="vehicletype" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" /> <option value="">Select</option> <option value="Vans">Vans</option> <option value="Pick Up Trucks">Pick Up Trucks</option> <option value="SUV">SUV</option> <option value="Cars">Cars</option> <option value="Combination of Vehicles">Combination of Vehicles</option> </select> </p> <p> <input name="firstname" type="text" id="firstname" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="First Name" required /> </p> <p> <input name="lastname" type="text" id="lastname" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="Last Name" required /> </p> <p> <input name="streetaddress" type="text" id="streetaddress" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="Street Address" required /> </p> <p> <input name="city" type="text" id="city" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="City" required /> </p> <p> <select required="required" name="state" id="state" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" /> <option value="">Select Your State</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">District Of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select> </p> <p> <input name="zipcode" type="text" id="zipcode" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="Zip Code" required /> </p> <p> <input name="phone" type="text" id="phone" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="Your Phone Number" required /> </p> <p> <input name="email" type="text" id="email" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="Your Email Address" required /> </p> <p> <textarea rows="5" name="additionalinfo" id="additionalinfo" style="background: #fff none repeat scroll 0 0; border: 1px solid #b6b6b6; border-radius: 10px !important; color: #000; padding: 5px; width: 100% !important;" placeholder="Additional Information" /></textarea> </p> <p class="robotic" id="pot"><input name="robotest" type="text" id="robotest" class="robotest" /></p> <p> <input type="submit" name="submit" id="submit" style="background: #ff0000 none repeat scroll 0 0; border: 1px solid #000; border-radius: 10px !important; font-size: 20px; color: #fff; padding: 1px 17px;" value="Send Info!" /> </p> </form> <div id="contactResponse"></div> <script> $("#form1").submit(function(event) { /* stop form from submitting normally */ event.preventDefault(); /* get some values from elements on the page: */ var $form1 = $( this ), $submit = $form1.find( 'submit[type="submit"]' ), dealershipname_value = $form1.find( 'input[name="dealershipname"]' ).val(), currentlycarry_value = $form1.find( 'input[name="currentlycarry"]' ).val(), vehicletype_value = $form1.find( 'input[name="vehicletype"]' ).val(), firstname_value = $form1.find( 'input[name="firstname"]' ).val(), lastname_value = $form1.find( 'input[name="lastname"]' ).val(), streetaddress_value = $form1.find( 'input[name="streetaddress"]' ).val(), city_value = $form1.find( 'input[name="city"]' ).val(), state_value = $form1.find( 'input[name="state"]' ).val(), zipcode_value = $form1.find( 'input[name="zipcode"]' ).val(), phone_value = $form1.find( 'input[name="phone"]' ).val(), email_value = $form1.find( 'input[name="email"]' ).val(), additionalinfo_value = $form1.find( 'textarea[name="additionalinfo"]' ).val(), url = $form1.attr('action'); /* Send the data using post */ var posting = $.post( url, { dealershipname: dealershipname_value, currentlycarry: currentlycarry_value, vehicletype: vehicletype_value, firstname: firstname_value, lastname: lastname_value, streetaddress: streetaddress_value, city: city_value, state: state_value, zipcode: zipcode_value, phone: phone_value, email: email_value, additionalinfo: additionalinfo_value }); posting.done(function( data ) { /* Put the results in a div */ $( "#contactResponse" ).html(data); }); }); </script> </body> </html>
and the php code: 和PHP代码：
<?php # ---------------------------------------------------- # ---- result22.php # ---------------------------------------------------- // Receiving variables from form @$dfw_ip= $_SERVER['REMOTE_ADDR']; @$dealershipname = addslashes($_POST['dealershipname']); @$currentlycarry = addslashes($_POST['currentlycarry']); @$vehicletype = addslashes($_POST['vehicletype']); @$firstname = addslashes($_POST['firstname']); @$lastname = addslashes($_POST['lastname']); @$streetaddress = addslashes($_POST['streetaddress']); @$city = addslashes($_POST['city']); @$state = addslashes($_POST['state']); @$zipcode = addslashes($_POST['zipcode']); @$phone = addslashes($_POST['phone']); @$email = addslashes($_POST['email']); @$additionalinfo = addslashes($_POST['additionalinfo']); // @$robotest = addslashes($_POST['robotest']); // @$xxxx = addslashes($_POST['xxxx']); // Validation //Sending Email to form owner $dfw_header = "From: $email\\n" . "Reply-To: $email\\n"; $dfw_subject = "Message from redoform22 form Page"; // $dfw_email_to = "xxxxxxxxxxxx@xxx.com,xxxxxxxxxx@cccccccccc.com"; $dfw_email_to = "root@localhost"; $dfw_message = "Visitor's IP: $dfw_ip\\n" . "Dealership Name: $dealershipname\\n" . "Currently Carry: $currentlycarry\\n" . "Vehicle Type: $vehicletype\\n" . "First Name: $firstname\\n" . "Last Name: $lastname\\n" . "Street Address: $streetaddress\\n" . "City: $city\\n" . "State: $state\\n" . "Zip Code: $zipcode\\n" . "Phone: $phone\\n" . "Email: $email\\n" . "Additional Info: $additionalinfo\\n"; // . "robotest: $robotest\\n"; @mail($dfw_email_to, $dfw_subject ,$dfw_message ,$dfw_header ) ; //Sending auto respond Email to visitor $dfw_header = "From: root@localhost\\n" . "Reply-To: root@localhost\\n"; $dfw_subject = "Thank You for contacting redoform22"; $dfw_email_to = "$email"; $dfw_message = "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional //EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:o='urn:schemas-microsoft-com:office:office'> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> </head> <body> html thank you message to person that filled out the form would go here</body> </html>"; /////////// $dfw_header .= 'MIME-Version: 1.0' . "\\r\\n"; $dfw_header .= 'Content-type: text/html; charset=iso-8859-1' . "\\r\\n"; @mail($dfw_email_to, $dfw_subject ,$dfw_message ,$dfw_header ) ; ////////// if ($_POST) { $robotest = $_POST['robotest']; if ($robotest) { $error = "Bad Form."; // formerly robot msg } } //if there was an error, return if ($error) { @ob_end_clean(); // clean out buffer, nothing there now exit($error); // exit, displaying error msg } ///////////////// // start connect to the database |||||||||||||||||||||||||| //include db config file @require_once 'db_config.php'; // end connect to the database |||||||||||||||||||||||||| ////////////////////////////////////////////////////////////// // start saving record to the MYSQL database |||||||||||||||||||||||||| @$dfw_strQuery = "INSERT INTO `redoform22table`(`dealershipname`,`currentlycarry`,`vehicletype`,`firstname`,`lastname`,`streetaddress`,`city`,`state`,`zipcode`,`phone`,`email`,`additionalinfo`)VALUES (\\"$dealershipname\\",\\"$currentlycarry\\",\\"$vehicletype\\",\\"$firstname\\",\\"$lastname\\",\\"$streetaddress\\",\\"$city\\",\\"$state\\",\\"$zipcode\\",\\"$phone\\",\\"$email\\",\\"$additionalinfo\\")" ; // end saving record to the MYSQL database |||||||||||||||||||||||||| ////////////////////////////////////////////////////////////// //start yields Update @$dfw_strQueryUpdate = "UPDATE redoform22table SET `firstname`=\\"$firstname\\",`lastname`=\\"$lastname\\",`streetaddress`=\\"$streetaddress\\",`city`=\\"$city\\",`state`=\\"$state\\",`zipcode`=\\"$zipcode\\",`phone`=\\"$phone\\",`dealershipname`=\\"$dealershipname\\",`currentlycarry`=\\"$currentlycarry\\",`vehicletype`=\\"$vehicletype\\",`additionalinfo`=\\"$additionalinfo\\" WHERE (`email`=\\"$email\\")"; //end yields Update ////////////////////////////////////////////////////////////// // start check to see if an entry exists for this email |||||||||||||||||| @$dfw_strQueryEmail = "SELECT email FROM redoform22table WHERE email = \\"$email\\" "; //end check to see if an entry exists for this email |||||||||||||||||| ////////////////////////////////////////////////////////////// //start connect to the DB |||||||||||||||||||||||||||||||||| $dfw_link = mysql_connect($host, $user, $pw); if (!$dfw_link) { die('Could not connect: ' . mysql_error()); } $dfw_db_selected = mysql_select_db($db, $dfw_link); if (!$dfw_db_selected) { die ('Can not use $dfw_db : ' . mysql_error()); } //end connect to the DB |||||||||||||||||||||||||||||||||| ////////////////////////////////////////////////////////////// // start see if it should be an update or an insert |||||||||||||||||||||||| $dfw_result = mysql_query($dfw_strQueryEmail); if (!$dfw_result) { die('Invalid query: ' . mysql_error()); //a failure, scram } else { //the query worked, verify it's the same as the incoming email $row1 = mysql_fetch_assoc($dfw_result); if ($row1["email"] != $email) { //email doesn't exist, insert new record $dfw_result = mysql_query($dfw_strQuery); // insert row if (!$dfw_result) { die('Invalid query: ' . mysql_error()); } } else { //update the existing record $dfw_result = mysql_query($dfw_strQueryUpdate); // update existing row if (!$dfw_result) { die('Invalid query: ' . mysql_error()); } } } //end see if it should be an update or an insert |||||||||||||||||||||||| /////////////////////////////////////////////////////////////////// ob_end_flush; // send form on to user mysql_close($dfw_link); /////////////////////////////////////////////////////////////////// // start send to page if it ran this far // header("Location: http://example.com/" ); // end send to page if it ran this far /////////////////////////////////////////////////////////////////// // start OR just echo a message // echo("<p align='center'><font face='Arial' size='3' color='#FF0000'>cool it sent</font></p>"); // end OR just echo a message ?>
2 个解决方案
解决方案1
0 2017-09-08 21:36:41
Try to use a button instead of an input tag for the sendInfo. 尝试使用按钮代替sendInfo的输入标签。 And add a click event listener on the button to trigger the function to do ur submit. 并在按钮上添加一个click事件监听器，以触发该函数进行提交。 This should stop the page from automatically being refreshed. 这将阻止页面自动刷新。
<button id="submit"> Send Info </button>
$('#submit').on('click',function(event){ //Do your functionality here ..... });
解决方案2
0 2017-09-08 22:44:39
In your HTML is no action defined for your form1, but in the JS part, you are defining url = $form1.attr('action'); 在您的HTML中没有为form1定义任何操作，但是在JS部分中，您正在定义url = $form1.attr('action'); (which is empty) Thus your post will go to an empty url. （该字段为空），因此您的帖子将转到一个空网址。
As you say event.preventDefault(); 正如您所说的event.preventDefault(); this will not be called and you can still write the URL into the action field. 这不会被调用，您仍然可以将URL写入操作字段。 You should btw do this, for compatibility, when the user has no JS enabled ;) 为了兼容性，您应该在用户未启用JS时这样做；）
One sidenote for your PHP part: Use prepared statements and never call SQL querys mixed with input like this. PHP部分的旁注：使用准备好的语句，并且永远不要调用混合了这样的输入的SQL查询。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
HTML提交表单，没有刷新页面和显示警告框 - HTML submit form without refresh page and display alert box
使用PHP AJAX显示成功消息而不显示页面刷新后，再次显示Form div - Show Form div again after displaying success message without Page Refresh Using PHP AJAX
提交没有重定向的 HTML 表单并显示成功消息 - Submit a HTML form without redirection and showing a success message
Ajax页面刷新表单提交成功 - ajax page refresh on form submit success
提交 html 表单时显示成功消息 - Success Message display on submit html form
HTML 表单：提交时验证和防止页面刷新 - HTML form: validation and preventing page refresh when submit
表单提交后如何在不同的php文件处理的html表单下显示成功消息 - How to show success message below html form after form submit which is being handled by different php file
简单的表单提交没有页面刷新问题 - Simple form submit without page refresh issue
Django提交表单而不刷新页面 - Django submit form without page refresh
使用 jQuery 提交不刷新页面的表单 - Submit A Form Without Page Refresh using jQuery
相关标签