Pesquisa
Pesquisa

Mesclar dois formulários em um manipulador de formulários

Elcid_91 Publicado em Dev
1
Jimloomis4

Preciso de um formulário de "Contato" com "Nome da empresa", "Nome do contato" e "E-mail" para exibir quando a página for carregada. Em seguida, depois que o usuário adicionar a entrada e clicar em "Adicionar mais", o formulário será expandido para incluir os campos de um formulário de "Cotação" separado E um e-mail será enviado para mim com as informações do formulário "Contato".

Em seguida, depois que o usuário adiciona dados aos campos do formulário "Cotação", preciso que as informações de ambos os formulários sejam enviadas e tratadas pela página POSTANDO para si mesma, ao enviar um e-mail para mim com as informações combinadas do Formulários "Contato" e "Cotação" E envio de email de agradecimento ao usuário.

Se houvesse algum erro, um 3º "Quote Form Handler" que inclui os campos de ambos os formulários seria reapresentado, mantendo a entrada válida dos formulários "Contact" e "Quote" e mostrando quais campos são obrigatórios.

Isso é possível? Como eu faria isso?

Tentei usar AJAX. Eu tentei 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);



}
 ?>
cssifo

Parece que você sabe o que está fazendo em termos de código, então darei uma visão geral.

Primeiro, não há necessidade de usar as <form>construções - você pode fazer tudo isso com DIVs (e entradas, botões, etc) e AJAX. Veja isso para mais informações.

Em seguida, você pode usar javascript / jQuery para apresentar ao usuário estruturas DIV que contêm diferentes bits de informação. Apresente os dados ao usuário e use css height:150vh;overflow:hidden;junto com um botão Mais, como este:

$('#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>

Então, quando o usuário clicar, nxtbuttvocê pode ocultar esse DIV e, talvez, aumentar o aparecimento de outro:

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

Quando o usuário clicar no último botão ... você pode coletar todas as informações e enviá-las para o lado do PHP. No lado do PHP, faça o que você precisa fazer e retornar alguns dados ao DOM apenas usando a echo()instrução do PHP .

Os dados que voltam do PHP serão recebidos na .done()função - e lembre-se, essa é uma função, então você pode ter problemas de escopo ao acessar outras variáveis. Portanto, você pode usar pequenos truques, como salvar dados em campos de entrada ocultos, se necessário:

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

Você também pode ter divs ocultos que podem agir como botões e pode usá-los para acionar outros eventos:

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

Referências:

AJAX e formulários

Mais sobre AJAX e Formulários

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

Como mesclar dois formulários em um?

Esconder um formulário de campo em formulários django

Usando php com dois formulários de contato diferentes em um site

Como validar vários formulários em um único componente? (Validação de formulários reativos)

Tentando enviar um formulário Javascript e, em vez disso, enviar dois formulários

Envio de dados de vários formulários em um único formulário

O formulário django preenche vários formulários de campo idênticos em um envio

Como preencher dados em um relacionamento de um para muitos entre dois formulários quando a tabela do formulário de destino não possui nenhuma entrada correspondente?

Envio de dois formulários com um arquivo de processamento para o banco de dados em expresso

Dois formulários em uma página

Dois formulários em uma página

Manipulador de banco de dados globalmente como padrão Singleton em formulários xamarin

Acessando o controle de formulários a partir do manipulador de funções em C #

Mesclar dois arquivos binários em um novo arquivo

Salvar um arquivo em formulários Xamarin de armazenamento compartilhado

Validar vários tipos de campo em um formulário

Como iniciar um aplicativo de outro em formulários Xamarin

Validar vários tipos de campo em um formulário

Alternar dois divs, mesclar vários ganchos de clique de JavaScript em um

Como mesclar e lidar com 2 formulários do symfony em um?

Solução alternativa para manipulador de eventos genérico em Formulários do Windows

Restringir entradas de formulários duplicados em diferentes formulários

Restringir entradas de formulários duplicados em diferentes formulários

Maneira do Python de mesclar dois dicionários com base em um valor comum?

Como obter valores de controles de formulário desabilitados em um grupo de formulários?

É possível criar dois objetos de dois formulários em uma visualização e relacioná-los?

como remover um campo de formulário em formulários embutidos do controlador do symfony 2

Mesclar dois quadros de dados em vários valores

Como posso combinar duas visualizações e dois formulários em um único modelo?

TOP lista

  1. 1

    Setas rotuladas horizontais apontando para uma linha vertical

  2. 2

    Why isn't my C# .Net Core Rest API route finding my method?

  3. 3

    Problema de escalada que requer programação dinâmica

  4. 4

    Operador de deslocamento bit a bit PostgreSQL para números de 64 bits

  5. 5

    Como adicionar o cabeçalho de autorização à solicitação de http Angular?

  6. 6

    Regex para encontrar padrões repetidos em um número de telefone? Ou talvez não?

  7. 7

    Changing long, lat values of Polygon coordinates in python

  8. 8

    verificação de regex para iniciais do nome

  9. 9

    CSS3 Box shadow até a metade do div

  10. 10

    Como coloco o ícone à direita

  11. 11

    Como obter a entrada de trás de diálogo em treeview pyqt5 python 3

  12. 12

    RegExp: antes ou depois de um delimitador

  13. 13

    Atalho IntelliJ para linha de comentário

  14. 14

    Carregamento de um recurso bloqueado pela Política de Segurança de Conteúdo

  15. 15

    DAX equivalente a Excel PERCENTRANK.INC por categoria

  16. 16

    FIRApp.Configure Crashing App

  17. 17

    Girar rótulos do eixo x em um determinado grau para boxplot em R

  18. 18

    Como adicionar elementos a um array multidimensional em PHP?

  19. 19

    Como assinar digitalmente um documento PDF com assinatura e texto visíveis usando Java

  20. 20

    Como redimensionar tabelas geradas pelo Stargazer no R Markdown?

  21. 21

    Usando selectInput em R brilhante para selecionar e filtrar linhas, não selecionar colunas

quentelabel

Arquivo