Javascript 将两个表单合并到一个表单处理程序中
我需要一个“联系人”与“企业名称”，“联系人姓名”和“电子邮件”的形式显示时，页面加载。然后，在用户添加输入并点击“添加更多”后，表单将展开，以包含单独“报价”表单中的字段，并且将向我发送一封电子邮件，其中包含“联系人”表单中的信息 然后，在用户向“报价”表单中的字段添加输入后，我需要这两个表单中的信息提交，并通过页面发布处理，同时使用“联系人”和“报价”表单中的组合信息向我发送电子邮件，并向用户发送感谢电子邮件 如果出现任何错误，将重新显示第三个“报价表单处理程序”，其中包括两个表单中的字段，维护“联系人”和“报价”表单中的有效输入，并显示需要哪些字段 这可能吗？我该怎么做呢 我尝试过使用AJAX。我试着设置超时Javascript 将两个表单合并到一个表单处理程序中,javascript,php,html,css,ajax,Javascript,Php,Html,Css,Ajax,我需要一个“联系人”与“企业名称”，“联系人姓名”和“电子邮件”的形式显示时，页面加载。然后，在用户添加输入并点击“添加更多”后，表单将展开，以包含单独“报价”表单中的字段，并且将向我发送一封电子邮件，其中包含“联系人”表单中的信息 然后，在用户向“报价”表单中的字段添加输入后，我需要这两个表单中的信息提交，并通过页面发布处理，同时使用“联系人”和“报价”表单中的组合信息向我发送电子邮件，并向用户发送感谢电子邮件 如果出现任何错误，将重新显示第三个“报价表单处理程序”，其中包括两个表单中的字段，
<style>
/* BEGIN CSS RESET */
box-sizing: border-box;
font-size: 18px;
}
*, *:before, *:after {
box-sizing: inherit;
}
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
margin: 0;
padding: 0;
font-weight: normal;
}
ol, ul {
list-style: none;
}
img {
width: 100%;
height: auto;
}
/*END CSS RESET*/
/* BEGIN FORM */
.form-embed {
padding: 24px;
background: grey;
border-radius: 8px;
}
label {
font-size: 20px;
color:#00ccff;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
input, select {
height: 48px;
width: 100%;
background: white;
border: 1px solid rgba(0,0,0,0.1);
outline: none;
border-radius: 4px;
padding-left: 16px;
padding-right: 16px;
display: block;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
input:hover {
border: 1px solid rgba(0,0,0,0.16);
}
input[type=button], input[type=submit]{
background-color: #1E90FF;
border: none;
width: 25%;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px;
text-align: center;
display:inline-block;
}
.buttons {
text-align: center;
}
.bodyText {
margin-bottom: 25px;
}
#Contact_Form{
width: 100%;
}
.hiddenForm {
width: 100%;
display: none;
}
.error {
color: #FF0000;
}
/* END FORM */
</style>
```````````````````````````````````````````````````````````
<script>
$(document).ready(function(){
$("#formButton").click(function(){
$(".hiddenForm").show();
$("#Contact_Form").hide();
$(".hide-button").hide();
event.preventDefault(); //prevent default action
var post_url = $(this).attr("ajax.php"); //get form action url
var request_method = $(this).attr("POST"); //get form GET/POST method
var form_data = $('#Contact_Form').serialize(); //Encode form elements for submission
$.ajax({
url : post_url,
type: request_method,
data : form_data
}).done(function(response){
$("#server-results").html(response);
});
});
$("#submitButton").click(function(event){
//$(".hiddenForm").show();
//$("#Quote_Form").hide();
//$("#Contact_Form").hide();
$("#Quote_Form").submit();
//$("#Contact_Form").submit();
//setTimeout(function(){ document.getElementById("Contact_Form").submit();}, 3000);
});
/*$("#submitButton").click(function(){
$("#Contact_Form").submit();
$("#Quote_Form").submit();
});
*/
});
</script>
<div class="form-embed">
<form id="Contact_Form" name="Contact_Form" target="_blank" action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?> method="post">
<div class="bodyText"><p style="text-align: center;">
<span style="font-family: 'times new roman',
times; font-size: 18px; color: #00ccff;">
<strong><span style="font-size: 24px;"><em>Looking For A Quote</em>
</span>? </strong></span>
</div>
<br><br>
<label for="bizName" class="control-label">Business Name:</label>
<input required maxlength="200" type="text" class="form-control" placeholder="Enter Business Name" name="bizName" id="bizName" />
<label for="cName" class="control-label">Contact Name:</label>
<input required maxlength="200" type="text" class="form-control" placeholder="Enter Contact Name" name="cName" id="cName" />
<label for="email" class="control-label">Email Address: </label>
<input required maxlength="200" type="email" class="form-control" placeholder="Enter Email Address" name="email" id="email" />
<br>
<div class="buttons">
<div class="hide-button">
<input id="formButton" class="btn btn-success add-more" type="button" value="Add More" />
</div>
</div>
</form>
<div class="hiddenForm">
<form id="Quote_Form" name="Quote_Form" target="_blank" action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?> method="post">
<div class="bodyText"><p style="text-align: center;">
<span style="font-family: 'times new roman',
times; font-size: 18px; color: #00ccff;">
<strong><span style="font-size: 24px;"><em>Looking For A Quote</em>
</span>? </strong></span>
</div>
<br><br>
<label for="bizName" class="control-label">Business Name:</label>
<input required maxlength="200" type="text" class="form-control" value="<?php echo $bizName; ?>" placeholder="Enter Business Name" name="bizName" id="bizName" />
<label for="cName" class="control-label">Contact Name:</label>
<input required maxlength="200" type="text" class="form-control" value="<?php echo $cName; ?>" placeholder="Enter Contact Name" name="cName" id="cName" />
<label for="email" class="control-label">Email Address: </label>
<input required maxlength="200" type="email" class="form-control" value="<?php echo $email; ?>" placeholder="Enter Email Address" name="email" id="email" />
<label for="bizType">Business Type: </label>
<select name="bizType">
<option value="">Choose an option...</option>
<option value="Restaurant">Restaurant</option>
<option value="Bar or Pub">Bar or Pub</option>
<option value="Brewery">Brewery</option>
<option value="Wedding Venue">Wedding Venue</option>
<option value="Salon or Spa">Salon or Spa</option>
<option value="Event or Party Space">Event or Party Space</option>
<option value="Funeral Home">Funeral Home</option>
<option value="Retail">Retail</option>
<option value="Museum or Gallery">Museum or Gallery</option>
<option value="Industrial Facility">Industrial Facility</option>
<option value="Medical Facility">Medical Facility</option>
<option value="Commercial Property">Commercial Property</option>
<option value="Fitness Facility / Gym">Fitness Facility / Gym</option>
<option value="Sports or Recreational Facility ">Sports or Recreational Facility </option>
<option value="Other">Other</option>
</select>
<label for="address1">Address Line 1: </label>
<input type="text" name="address1" id="address1"
size="40" placeholder="Street and number, P.O. box, c/o">
<label for="address2">Address Line 2: (Optional)</label>
<input type="text" name="address2" id="address2"
size="40" placeholder = "Apartment, suite, unit, building, floor, ect.">
<label for="city" class="control-label">City: </label>
<input maxlength="200" type="text" class="form-control" placeholder="Enter City" name="city" id="city" />
<label for="state">State: </label>
<select name="state">
<option value="">Choose an option...</option>
<option value="AL">Alabama (AL)</option>
<option value="AK">Alaska (AK)</option>
<option value="AZ">Arizona (AZ)</option>
<option value="AR">Arkansas (AR)</option>
<option value="CA">California (CA)</option>
<option value="CO">Colorado (CO)</option>
<option value="CT">Connecticut (CT)</option>
<option value="DE">Delaware (DE)</option>
<option value="DC">District Of Columbia (DC)</option>
<option value="FL">Florida (FL)</option>
<option value="GA">Georgia (GA)</option>
<option value="HI">Hawaii (HI)</option>
<option value="ID">Idaho (ID)</option>
<option value="IL">Illinois (IL)</option>
<option value="IN">Indiana (IN)</option>
<option value="IA">Iowa (IA)</option>
<option value="KS">Kansas (KS)</option>
<option value="KY">Kentucky (KY)</option>
<option value="LA">Louisiana (LA)</option>
<option value="ME">Maine (ME)</option>
<option value="MD">Maryland (MD)</option>
<option value="MA">Massachusetts (MA)</option>
<option value="MI">Michigan (MI)</option>
<option value="MN">Minnesota (MN)</option>
<option value="MS">Mississippi (MS)</option>
<option value="MO">Missouri (MO)</option>
<option value="MT">Montana (MT)</option>
<option value="NE">Nebraska (NE)</option>
<option value="NV">Nevada (NV)</option>
<option value="NH">New Hampshire (NH)</option>
<option value="NJ">New Jersey (NJ)</option>
<option value="NM">New Mexico (NM)</option>
<option value="NY">New York (NY)</option>
<option value="NC">North Carolina (NC)</option>
<option value="ND">North Dakota (ND)</option>
<option value="OH">Ohio (OH)</option>
<option value="OK">Oklahoma (OK)</option>
<option value="OR">Oregon (OR)</option>
<option value="PA">Pennsylvania (PA)</option>
<option value="RI">Rhode Island (RI)</option>
<option value="SC">South Carolina (SC)</option>
<option value="SD">South Dakota (SD)</option>
<option value="TN">Tennessee (TN)</option>
<option value="TX">Texas (TX)</option>
<option value="UT">Utah (UT)</option>
<option value="VT">Vermont (VT)</option>
<option value="VA">Virginia (VA)</option>
<option value="WA">Washington (WA)</option>
<option value="WV">West Virginia (WV)</option>
<option value="WI">Wisconsin (WI)</option>
<option value="WY">Wyoming (WY)</option>
</select>
<label for="zip" class="control-label">Zip Code: </label>
<input type="text" class="form-control"
pattern="[0-9]{5}" maxlength="5" size="5"
placeholder="Enter Zip Code" name="zip" id="zip" />
<label for="sqft">Estimated Square Feet: </label>
<select name="sqft">
<option value="">Choose an option...</option>
<option value="4,000 or less">4,000 sqft or less</option>
<option value="5,000 to 9,000">5,000 sqft to 9,000 sqft</option>
<option value="10,000 to 14,000">10,000 sqft to 14,000 sqft</option>
<option value="15,000 to 20,000">15,000 sqft to 20,000 sqft</option>
<option value="20,000 or more">20,000 sqft or more</option>
</select>
<br>
<div class="buttons">
<!--<input id="submitButton" type="button" onclick="submitForms()" value="Submit the form"/>-->
<input id="submitButton" class="btn btn-success" type="submit" value="submit the form" />
</div>
</form>
</div>
</div>
<?php
$errorCount = "";
$bizNameErr = $bizTypeErr = $address1Err = $address2Err = $cityErr = $stateErr
= $zipErr = $sqftErr = $cNameErr = $emailErr = "";
$bizName = $bizType = $address1 = $address2 = $city = $state
= $zip = $sqft = $cName = $email = "";
// Check to make sure the required fields from the Quote Form are not empty
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["bizName"])) {
$bizNameErr = "Business name is required";
++$errorCount;
} else {
$bizName = test_input($_POST["bizName"]);
}
if (empty($_POST["cName"])) {
$cNameErr = "Contact Name is required";
++$errorCount;
} else {
$cName = test_input($_POST["cName"]);
}
if (empty($_POST["email"])) {
$emailErr = "Email is required";
++$errorCount;
} else {
$email = test_input($_POST["email"]);
}
if (empty($_POST["bizType"])) {
$bizTypeErr = "Business Type is required";
++$errorCount;
} else {
$bizType = test_input($_POST["bizType"]);
}
if (empty($_POST["address1"])) {
$address1Err = "Address Line 1 is required";
++$errorCount;
} else {
$address1 = test_input($_POST["address1"]);
}
if (!empty($_POST["address2"])) {
$address2 = test_input($_POST["address2"]);
}
if (empty($_POST["city"])) {
$cityErr = "City is required";
++$errorCount;
} else {
$city = test_input($_POST["city"]);
}
if (empty($_POST["state"])) {
$stateErr = "State is required";
++$errorCount;
} else {
$state = test_input($_POST["state"]);
}
if (empty($_POST["zip"])) {
$zipErr = "Zip Code is required";
++$errorCount;
} else {
$zip = test_input($_POST["zip"]);
}
if (empty($_POST["sqft"])) {
$sqftErr = "Square Feet is required";
++$errorCount;
} else {
$sqft = test_input($_POST["sqft"]);
}
}
// Form validation
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
// This function, when called, redisplays the Quote Form Handler
function redisplayForm($bizName, $bizType, $address1, $address2, $city,
$state, $zip, $sqft, $cName, $email, $bizNameErr, $bizTypeErr,
$address1Err, $cityErr, $stateErr, $zipErr, $sqftErr, $cNameErr, $emailErr ) {
?>
<form name="Quote_Form" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
<div class="form-embed">
<span class="error"> <?php
// Determining that the user input was sent successfully and setting a resultMsg variable accordingly
if (isset($result)) {
$resultMsg = "Your infomation was sent successfully.";
} else {
$resultMsg = "There was a problem sending your information.";
}
echo $resultMsg; ?>
</span><br><br>
<p><span class="error">Please re-enter the information below. <br><br> * required field</span></p>
<div class="bodyText"><p style="text-align: center;">
<span style="font-family: 'times new roman', times; font-size: 18px; color: #00ccff;">
<strong><span style="font-size: 24px;"><em>Looking For A Quote</em>
</span>? </strong></span></p>
</div><br><br>
<label for="bizName" class="control-label">Business Name:
<span class="error">* <?php echo $bizNameErr;?> </span></label>
<input required maxlength="200" type="text" class="form-control" value="<?php echo $bizName; ?>" placeholder="Enter Business Name" name="bizName" id="bizName" />
<label for="cName" class="control-label">Contact Name:
<span class="error">* <?php echo $cNameErr;?></span></label>
<input required maxlength="200" type="text" class="form-control" value="<?php echo $cName; ?>" placeholder="Enter Contact Name" name="cName" id="cName" />
<label for="email" class="control-label">Email Address:
<span class="error">* <?php echo $emailErr;?></span></label>
<input required maxlength="200" type="email" class="form-control" value="<?php echo $email; ?>" placeholder="Enter Email Address" name="email" id="email" />
<label for="bizType" class="control-label">Business Type:
<span class="error">* <?php echo $bizTypeErr;?></span></label>
<select required name="bizType">
<?php
if(empty($_POST["bizType"])){ ?>
<option value="<?php echo $bizType; ?>" disabled selected hidden><?php echo "Choose business type...";
}
else { ?>
<option value="<?php echo $bizType; ?>"><?php echo $bizType;?> </option><?php
}
?>
<option value="Restaurant">Restaurant</option>
<option value="Bar or Pub">Bar or Pub</option>
<option value="Brewery">Brewery</option>
<option value="Wedding Venue">Wedding Venue</option>
<option value="Salon or Spa">Salon or Spa</option>
<option value="Event or Party Space">Event or Party Space</option>
<option value="Funeral Home">Funeral Home</option>
<option value="Retail">Retail</option>
<option value="Museum or Gallery">Museum or Gallery</option>
<option value="Industrial Facility">Industrial Facility</option>
<option value="Medical Facility">Medical Facility</option>
<option value="Commercial Property">Commercial Property</option>
<option value="Fitness Facility / Gym">Fitness Facility / Gym</option>
<option value="Sports or Recreational Facility ">Sports or Recreational Facility </option>
<option value="Other">Other</option>
</select>
<label for="address1" class="control-label">Address Line 1:
<span class="error">* <?php echo $address1Err;?></span></label>
<input required type="text" name="address1" id="address1"
size="40" value="<?php echo $address1; ?>" placeholder="Street and number, P.O. box, c/o">
<label for="address2" class="control-label">Address Line 2:
<input type="text" name="address2" id="address2"
size="40" value="<?php echo $address2; ?>" placeholder = "Apartment, suite, unit, building, floor, ect.">
<label for="city" class="control-label">City:
<span class="error">* <?php echo $cityErr;?></span></label>
<input required type="text" class="form-control" value="<?php echo $city; ?>" placeholder="Enter City" name="city" id="city" />
<label for="state" class="control-label">State:
<span class="error">* <?php echo $stateErr;?></span></label>
<select required name="state">
<?php
if(empty($_POST["state"])){ ?>
<option value="<?php echo $state; ?>" disabled selected hidden><?php echo "Choose state...";
}
else { ?>
<option value="<?php echo $state; ?>"><?php echo $state;?> </option><?php
}
?>
<option value="AL">Alabama (AL)</option>
<option value="AK">Alaska (AK)</option>
<option value="AZ">Arizona (AZ)</option>
<option value="AR">Arkansas (AR)</option>
<option value="CA">California (CA)</option>
<option value="CO">Colorado (CO)</option>
<option value="CT">Connecticut (CT)</option>
<option value="DE">Delaware (DE)</option>
<option value="DC">District Of Columbia (DC)</option>
<option value="FL">Florida (FL)</option>
<option value="GA">Georgia (GA)</option>
<option value="HI">Hawaii (HI)</option>
<option value="ID">Idaho (ID)</option>
<option value="IL">Illinois (IL)</option>
<option value="IN">Indiana (IN)</option>
<option value="IA">Iowa (IA)</option>
<option value="KS">Kansas (KS)</option>
<option value="KY">Kentucky (KY)</option>
<option value="LA">Louisiana (LA)</option>
<option value="ME">Maine (ME)</option>
<option value="MD">Maryland (MD)</option>
<option value="MA">Massachusetts (MA)</option>
<option value="MI">Michigan (MI)</option>
<option value="MN">Minnesota (MN)</option>
<option value="MS">Mississippi (MS)</option>
<option value="MO">Missouri (MO)</option>
<option value="MT">Montana (MT)</option>
<option value="NE">Nebraska (NE)</option>
<option value="NV">Nevada (NV)</option>
<option value="NH">New Hampshire (NH)</option>
<option value="NJ">New Jersey (NJ)</option>
<option value="NM">New Mexico (NM)</option>
<option value="NY">New York (NY)</option>
<option value="NC">North Carolina (NC)</option>
<option value="ND">North Dakota (ND)</option>
<option value="OH">Ohio (OH)</option>
<option value="OK">Oklahoma (OK)</option>
<option value="OR">Oregon (OR)</option>
<option value="PA">Pennsylvania (PA)</option>
<option value="RI">Rhode Island (RI)</option>
<option value="SC">South Carolina (SC)</option>
<option value="SD">South Dakota (SD)</option>
<option value="TN">Tennessee (TN)</option>
<option value="TX">Texas (TX)</option>
<option value="UT">Utah (UT)</option>
<option value="VT">Vermont (VT)</option>
<option value="VA">Virginia (VA)</option>
<option value="WA">Washington (WA)</option>
<option value="WV">West Virginia (WV)</option>
<option value="WI">Wisconsin (WI)</option>
<option value="WY">Wyoming (WY)</option>
</select>
<label for="zip" class="control-label">Zip Code:
<span class="error">* <?php echo $zipErr;?></span></label>
<input required type="text" class="form-control"
pattern="[0-9]{5}" maxlength="5" size="5"
value="<?php echo $zip; ?>" placeholder="Enter Zip Code" name="zip" id="zip" />
<label for="sqft" class="control-label">Estimated Square Feet:
<span class="error">* <?php echo $sqftErr;?></span></label>
<select required name="sqft" >
<?php
if(empty($_POST["sqft"])){ ?>
<option value="<?php echo $sqft; ?>" disabled selected hidden><?php echo "Choose square footage...";
}
else { ?>
<option value="<?php echo $sqft; ?>"><?php echo $sqft;?> </option><?php
}
?>
<option value="4,000 or less">4,000 sqft or less</option>
<option value="5,000 to 9,000">5,000 sqft to 9,000 sqft</option>
<option value="10,000 to 14,000">10,000 sqft to 14,000 sqft</option>
<option value="15,000 to 20,000">15,000 sqft to 20,000 sqft</option>
<option value="20,000 or more">20,000 sqft or more</option>
</select>
<br>
<div class="buttons">
<!--<input type="submit" name="Submit" value="Send Form" /> -->
<input id="submitButton" class="btn btn-success" type="submit" value="submit the form" />
</div>
</div>
</form>
<?php
}
// Error checking. If there are errors, call the redisplayForm function to redisplay the Quote Form Handler.
if ($errorCount>0 || $errorCount<0) {
redisplayForm($bizName, $bizType, $address1, $address2, $city,
$state, $zip, $sqft, $cName, $email, $bizNameErr, $bizTypeErr,
$address1Err, $cityErr, $stateErr, $zipErr, $sqftErr, $cNameErr, $emailErr );
$bizNameErr = $bizTypeErr = $address1Err = $address2Err = $cityErr = $stateErr
= $zipErr = $sqftErr = $cNameErr = $emailErr = "";
$bizName = $bizType = $address1 = $address2 = $city = $state
= $zip = $sqft = $cName = $email = "";
// If there are no errors, an email will be sent to Conversion Worx with the user's input.
} else {
$To = "myemail";
$Subject = "Quote Form Results";
$Message = "Business Name: " . $bizName . "\n"
. "Business Type: " . $bizType . "\n"
. "Address Line 1: " . $address1 . "\n"
. "Address Line 2: " . $address2 . "\n"
. "City: " . $city . "\n"
. "State: " . $state . "\n"
. "Zip Code: " . $zip . "\n"
. "Estimated Square Feet: " . $sqft . "\n"
. "Contact Name: " . $cName . "\n"
. "Email Address: " . $email;
$result = mail($To, $Subject, $Message);
}
// If email to Conversion Worx is sent succesfully, send thank you email to user.
if (isset($result)) {
$To = $email;
$Subject = "Virtual Tour Quote Request";
$Headers = 'From: myemail' . "\r\n" .
'Reply-To: myemail' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
$Message = $cName . ",";
$Message .= "\n" . "\n" . "Thank you for your interest in our 3D 360° Virtual Tours!";
$Message .= "\n" . "\n" . "Your information has been submitted. ";
$Message .= "A Conversion Worx represenative will be contacting you shortly to arrange a quote via phone or on-site visit.";
$Message .= "\n" . "\n" . "We look forward to working with you! ";
$Message .= "\n" . "\n" . "\n" . "Sincerely,";
$Message .= "\n" . "\n" . "The Conversion Worx Team";
$result = mail($To, $Subject, $Message, $Headers);
}
?>
/*开始CSS重置*/
框大小：边框框；
字号：18px；
}
*，*：之前，*：之后{
框大小：继承；
}
阀体，h1，h2，h3，h4，h5，h6，p，ol，ul{
保证金：0；
填充：0；
字体大小：正常；
}
ol，ul{
列表样式：无；
}
img{
宽度：100%；
高度：自动；
}
/*结束CSS重置*/
/*开始形成*/
.表格嵌入{
填充：24px；
背景：灰色；
边界半径：8px；
}
标签{
字体大小：20px；
颜色：#00ccff；
显示：块；
边缘顶部：10px；
边缘底部：10px；
}
输入，选择{
高度：48px；
宽度：100%；
背景：白色；
边框：1px实心rgba（0,0,0,0.1）；
大纲：无；
边界半径：4px；
左侧填充：16px；
右边填充：16px；
显示：块；
-ms框尺寸：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
输入：悬停{
边框：1px实心rgba（0,0,0,0.16）；
}
输入[类型=按钮]，输入[类型=提交]{
背景色：#1E90FF；
边界：无；
宽度：25%；
颜色：白色；
填充：16px 32px；
文字装饰：无；
利润：4倍2倍；
光标：指针；
边界半径：12px；
文本对齐：居中；
显示：内联块；
}
.按钮{
文本对齐：居中；
}
.正文{
边缘底部：25px；
}
#联络表格{
宽度：100%；
}
希登form先生{
宽度：100%；
显示：无；
}
.错误{
颜色：#FF0000；
}
/*结束形式*/
```````````````````````````````````````````````````````````
$（文档）.ready（函数（）{
$（“#表单按钮”）。单击（函数（）{
$（“.hiddenForm”）.show（）；
$（“#联系方式”）.hide（）；
$（“.hide按钮”）.hide（）；
event.preventDefault（）；//防止默认操作
var post_url=$（this.attr（“ajax.php”）；//获取表单操作url
var request_method=$（this.attr（“POST”）；//get form get/POST方法
var form_data=$（“#Contact_form”）.serialize（）；//对表单元素进行编码以便提交
$.ajax({
url:post_url，
类型：请求\u方法，
数据：form_数据
}).done（函数（响应）{
$（“#服务器结果”）.html（响应）；
});
});
$（“#提交按钮”）。单击（函数（事件）{
//$（“.hiddenForm”）.show（）；
//$（“#Quote_Form”）.hide（）；
//$（“#联系方式”）.hide（）；
$（“#报价表”）.submit（）；
//$（“#联系表格”）。提交（）；
//setTimeout（函数（）{document.getElementById（“Contact_Form”）.submit（）；}，3000）；
});
/*$（“#提交按钮”）。单击（函数（）{
$（“#联系表格”）。提交（）；
$（“#报价表”）.submit（）；
});
*/
});
从代码角度看，您似乎知道自己在做什么，因此我将为您提供概述
首先，不需要使用
结构-您可以使用div（以及输入、按钮等）和AJAX来完成所有这些。更多
接下来，您可以使用javascript/jQuery向用户呈现包含不同信息位的DIV结构。将数据呈现给用户，并使用cssheight:150vh；溢出：隐藏以及“更多”按钮，如下所示：
$（'#mybutt'）。单击（函数（）{
$（'#sam'）。removeClass（'收缩'）；
$（'#mybutt'）.hide（）；
$（'#nxtbutt'）.show（）；
});
*{position:relative；}
div{边距：50px；宽度：350px；边框：1px实心橙色；背景：bisque；}
.Shrink{高度：120px；溢出：隐藏；}
#nxtbutt{位置：绝对；底部：0；右侧：0；显示：无；}
这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本。这里有很多文本
更多
下一个
如果有帮助的话，我很乐意向别人展示我的所有代码。使用一些GET vars作为标志，以知道何时和发送什么邮件，并将页面作为PHP文件，您可以使用或不使用ajax技术来实现这一点（没有ajax可能会更容易）。再试一次。如果你不能自己解决问题，我将提供一个一般性的答案。我不知道如何从表单和AJAX收集所有数据，并将这些数据传输到PHP端。不要因为有多个数据输入而感到困惑