将两个表单合并为一个表单处理程序

时间:2019-03-28 16:40:52

标签: javascript php html css ajax

我需要一个带有“公司名称”,“联系人名称”和“电子邮件”的“联系人”表单,以便在加载页面时显示。然后,在用户添加输入并单击“添加更多”后,该表单将扩展为包括来自单独的“报价”表单的字段,并且一封包含“联系”表单信息的电子邮件将发送给我。

然后,在用户将输入添加到“报价”表单中的字段之后,我需要将这两个表单中的信息提交到页面POSTs自身进行处理,同时将合并后的信息发送给我“联系方式”和“报价”表格中的信息,并向用户发送感谢电子邮件。

如果有任何错误,将重新显示包含两个表单字段的第三个“报价表单处理程序”,并保持“联系人”和“报价”表单的有效输入并显示需要哪些字段。

这可能吗?我该怎么办?

我尝试使用AJAX。我尝试设置setTimeout。

<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>?&nbsp;</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>?&nbsp;</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>
        &nbsp;&nbsp;
        <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>?&nbsp;</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);



}
 ?>

1 个答案:

答案 0 :(得分:1)

您似乎知道自己在执行代码方面的工作,因此,我将为您提供概述。

首先,不需要使用<form>构造-您可以使用DIV(以及输入,按钮等)和AJAX来完成所有这一切。 See this了解更多。

接下来,您可以使用javascript / jQuery向用户展示包含不同信息位的DIV结构。向用户显示数据,并使用css height:150vh;overflow:hidden;和“更多”按钮,如下所示:

$('#mybutt').click(function(){
    $('#sam').removeClass('shrunk');
    $('#mybutt').hide();
    $('#nxtbutt').show();
});
*{position:relative;}
div{margin:50px;width:350px;border:1px solid orange;background:bisque;}



.shrunk{height:120px;overflow:hidden;}
#nxtbutt{position:absolute;bottom:0;right:0;display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="bob">
    <p id="sam" class="shrunk">Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. Here is a lot of text. </p>
    <button id="mybutt">More</button>
    <button id="nxtbutt">Next</button>
</div>

然后,当用户单击nxtbutt时,您可以隐藏该DIV,并可以淡入另一个DIV:

$('#nxtbutt').click(function(){
    $('#bob').fadeOut();
    $('#george').fadeIn();
});

当用户单击最后一个按钮时,您可以收集所有信息并将其ajax到PHP端。在PHP方面,只需使用PHP的echo()语句,即可完成所需的操作并将一些数据返回到DOM。

从PHP返回的数据将在.done()函数中接收-请记住,这是一个函数,因此您在访问其他变量时可能会遇到范围问题。因此,您可以根据需要使用一些小技巧,例如将数据保存到隐藏的输入字段中:

.done(function(recd){
    $('body').append('<input id="gollee" type="hidden" value="' +recd+ '" />');
});

您还可以具有可充当按钮的隐藏div,并且可以使用这些div触发其他事件:

.done(function(recd){
    if(recd == "peter"){
        $('#gollee').val('dosummmat');
        $('#hiddenDIV3').click();
    }
});
$(document).on('click', '#hiddenDIV3', function(){
    let tmp = $('#gollee').val();
    alert(tmp);
});

参考文献:

AJAX and Forms

More on AJAX and Forms