动态行表单提交

Question

我的网站上有一个大小合适的表单，底部有一个插入行按钮，这会将行添加到表单的底部，我还可以单击相应的删除按钮来删除该单行。

表单底部截图

现在，当我单击“发送”按钮时出现问题。如果我在表单中添加了几行，然后单击“发送”按钮，这些行将从表单中消失，它们的值也会消失。我想要它，所以一旦我添加了行并单击发送按钮，表单会正确保持其状态并保留我之前添加的行。

HTML 代码可以在这里找到：

<form name="contact" action="request-a-quote.php" method="POST">
  <table class="form">
    <thead>
      <?php if (isset($form_error_message)) { echo $form_error_message; } ?>
      <tr>
        <th colspan="3">Company Information</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="desktop_only">Company Name *</th>
        <td colspan="2"><input name="company_name" type="text" <?php if ($error_company_name=='Y' ) { echo 'class="error_on_field"'; } ?>
          <?php if ($detect->isMobile()) { echo 'placeholder="Company Name"'; } ?> maxlength="45" value="
          <?php if (isset($company_name)) echo $company_name; ?>"></td>
      </tr>
    </tbody>
    <thead>
      <tr>
        <th colspan="3">Contact Information</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="desktop_only">Contact person name *</th>
        <td colspan="2"><input name="contact_person_name" type="text" <?php if ($error_contact_person_name=='Y' ) { echo 'class="error_on_field"'; } ?>
          <?php if ($detect->isMobile()) { echo 'placeholder="Contact Person Name"'; } ?> maxlength="45" value="
          <?php if (isset($contact_person_name)) echo $contact_person_name; ?>"></td>
      </tr>
      <tr>
        <th class="desktop_only">Contact person e-mail *</th>
        <td colspan="2"><input name="contact_person_email" type="email" <?php if ($error_contact_person_email=='Y' ) { echo 'class="error_on_field"'; } ?>
          <?php if ($detect->isMobile()) { echo 'placeholder="Contact Person Email"'; } ?> size="40" value="
          <?php if (isset($contact_person_email)) echo $contact_person_email; ?>" /></td>
      </tr>
      <tr>
        <th class="desktop_only">Contact address *</th>
        <td colspan="2"><input name="contact_address" type="text" <?php if ($error_contact_address=='Y' ) { echo 'class="error_on_field"'; } ?>
          <?php if ($detect->isMobile()) { echo 'placeholder="Contact Address"'; } ?> maxlength="45" value="
          <?php if (isset($contact_address)) echo $contact_address; ?>"></td>
      </tr>
      <tr>
        <th class="desktop_only">Contact person phone *</th>
        <td colspan="2"><input name="contact_person_phone" type="text" <?php if ($error_contact_person_phone=='Y' ) { echo 'class="error_on_field"'; } ?>
          <?php if ($detect->isMobile()) { echo 'placeholder="Contact Person Phone"'; } ?> maxlength="45" value="
          <?php if (isset($contact_person_phone)) echo $contact_person_phone; ?>"></td>
      </tr>
    </tbody>
    <thead>
      <tr>
        <th colspan="3">Boiler Information</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="desktop_only">Boiler brand / manufacturer *</th>
        <td colspan="2"><input name="boiler_brand_manufacturer" type="text" <?php if ($error_boiler_brand_manufacturer=='Y' ) { echo 'class="error_on_field"'; } ?>
          <?php if ($detect->isMobile()) { echo 'placeholder="Boiler brand / Manufacturer"'; } ?> maxlength="45" value="
          <?php if (isset($boiler_brand_manufacturer)) echo $boiler_brand_manufacturer; ?>"></td>
      </tr>
      <tr>
        <th class="desktop_only">Average annual fuel consumption (kW or £)</th>
        <td colspan="2"><input name="average_annual_fuel_consumption" type="text" <?php if ($detect->isMobile()) { echo 'placeholder="Average annual fuel consumption (kW or £)"'; } ?> size="60" value="
          <?php if (isset($average_annual_fuel_consumption)) echo $average_annual_fuel_consumption; ?>" ></td>
      </tr>
      <tr>
        <th class="desktop_only">Current cost per kW (Pence)</th>
        <td colspan="2"><input name="current_cost_per_kw" type="text" <?php if ($detect->isMobile()) { echo 'placeholder="Current cost per kW (Pence)"'; } ?> size="60" value="
          <?php if (isset($current_cost_per_kw)) echo $current_cost_per_kw; ?>" ></td>
      </tr>
      <tr>
        <th>Type of fuel</th>
        <td colspan="2">
          <select name="type_of_fuel">
                                            <option value="0">Please Select...</option>
                                            <option <?php if ($type_of_fuel == "Gas") echo "selected=selected" ?>>Gas</option>
                                            <option <?php if ($type_of_fuel == "Oil") echo "selected=selected" ?>>Oil</option>
                                            <option <?php if ($type_of_fuel == "LPG") echo "selected=selected" ?>>LPG</option>
                                            <option <?php if ($type_of_fuel == "Other") echo "selected=selected" ?>>Other</option>
                                        </select>
        </td>
      </tr>
    </tbody>
    <thead>
      <tr>
        <th colspan="3">Boiler Capacity</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Type of boiler</th>
        <td colspan="2">
          <select name="type_of_boiler">
                                            <option value="0">Please Select...</option>
                                            <option <?php if ($type_of_boiler == "Thermostatically Controlled") echo "selected=selected" ?>>Thermostatically Controlled</option>
                                            <option <?php if ($type_of_boiler == "CHP") echo "selected=selected" ?>>CHP</option>
                                            <option <?php if ($type_of_boiler == "Steam") echo "selected=selected" ?>>Steam</option>
                                        </select>
        </td>
      </tr>
      <tr>
        <th class="desktop_only">Total capacity</th>
        <td colspan="2"><input name="total_capacity" type="text" <?php if ($detect->isMobile()) { echo 'placeholder="Total Capacity"'; } ?> size="60" value="
          <?php if (isset($total_capacity)) echo $total_capacity; ?>" ></td>
      </tr>
      <tr>
        <th class="desktop_only">Boiler capacity</th>
        <td colspan="2"><input name="boiler_capacity" type="text" <?php if ($detect->isMobile()) { echo 'placeholder="Boiler Capacity"'; } ?> size="60" value="
          <?php if (isset($boiler_capacity)) echo $boiler_capacity; ?>" ></td>
      </tr>
    </tbody>
    <thead>
      <tr>
        <th colspan="3">Required Measurements (up to 4 meters)</th>
      </tr>
    </thead>
    <tbody class="row">
      <tr>
        <td colspan="3" class="center">
          <img src="images/required-measurements.jpg" alt="Required Measurements" />
        </td>
      </tr>
    </tbody>
  </table>

  <table id="addrows">
    <thead>
      <tr>
        <th></th>
        <th>Circumference</th>
        <th>Length</th>
        <th></th>
      </tr>
    </thead>
    <tbody class="row">
      <tr>
        <th>Measurement 1</th>
        <td><input name="circumference_1" type="text" <?php if ($detect->isMobile()) { echo 'placeholder="Circumference 1"'; } ?> size="60" value="
          <?php if (isset($circumference_1)) echo $circumference_1; ?>" ></td>
        <td><input name="length_1" type="text" <?php if ($detect->isMobile()) { echo 'placeholder="Length 1"'; } ?> size="60" value="
          <?php if (isset($length_1)) echo $length_1; ?>" ></td>
        <td style="width:200px;"></td>
      </tr>
    </tbody>
  </table>
  <p><input type="button" id="insert_row" value="Insert row"></p>
  <script>
    $('#addrows').on('click', 'input[type="button"]', function() {
      $(this).closest('tr').remove();
    })
    $('p input[type="button"]').click(function() {
      $('#addrows').append('<tr><th>Measurement 2</th><td><input type="text" class="fname" /></td><td><input type="text" class="fname" /></td><td><input type="button" value="Delete" /></td></tr>')
    });
  </script>
  <table class="form">
    <tr id="send_holder">
      <td class="calculate" colspan="3">
        <input type="submit" id="send" value="Send">
        <input type="hidden" name="submitted" value="TRUE">
      </td>
    </tr>
  </table>
</form>

PHP 代码可以在这里找到：

<?php
// Taken from http://php.net/manual/en/function.mail.php - Example #4 Sending HTML email
// PHP script triggers if SEND button has been clicked
if  (isset($_POST['submitted']))    {

    // Set up Fasthosts mandatory settings to enable email sending
    $email_from = 'EMAIL';          // Must be an email set-up in Fasthosts, mailbox or forwarder 
    ini_set('SMTP','smtp.fasthosts.co.uk' );
    ini_set('sendmail_from', $email_from);
    $website_name = 'NAME';                     // Change to the name of the website in which the form is
    $form_name = 'Request a Quote';                         // Change to the name of the form

    // Populate PHP variables from $_POST array
    $company_name                       = htmlentities(trim($_POST['company_name']),ENT_QUOTES,"ISO-8859-15");
    $contact_person_name                = htmlentities(trim($_POST['contact_person_name']),ENT_QUOTES,"ISO-8859-15");
    $contact_person_email               = htmlentities(trim($_POST['contact_person_email']),ENT_QUOTES,"ISO-8859-15");
    $contact_address                    = htmlentities(trim($_POST['contact_address']),ENT_QUOTES,"ISO-8859-15");
    $contact_person_phone               = htmlentities(trim($_POST['contact_person_phone']),ENT_QUOTES,"ISO-8859-15");
    $boiler_brand_manufacturer          = htmlentities(trim($_POST['boiler_brand_manufacturer']),ENT_QUOTES,"ISO-8859-15");
    $average_annual_fuel_consumption    = htmlentities(trim($_POST['average_annual_fuel_consumption']),ENT_QUOTES,"ISO-8859-15");
    $current_cost_per_kw                = htmlentities(trim($_POST['current_cost_per_kw']),ENT_QUOTES,"ISO-8859-15");
    $type_of_fuel                       = htmlentities(trim($_POST['type_of_fuel']),ENT_QUOTES,"ISO-8859-15");
    $type_of_boiler                     = htmlentities(trim($_POST['type_of_boiler']),ENT_QUOTES,"ISO-8859-15");
    $total_capacity                     = htmlentities(trim($_POST['total_capacity']),ENT_QUOTES,"ISO-8859-15");
    $boiler_capacity                    = htmlentities(trim($_POST['boiler_capacity']),ENT_QUOTES,"ISO-8859-15");
    $circumference_1                    = htmlentities(trim($_POST['circumference_1']),ENT_QUOTES,"ISO-8859-15");
    $length_1                           = htmlentities(trim($_POST['length_1']),ENT_QUOTES,"ISO-8859-15");

    // Check for errors and update error variables, e.g. $error_on_name, etc.
    if  (empty($company_name)) { $error_company_name = 'Y'; }
    if  (empty($contact_person_name)) { $error_contact_person_name = 'Y'; }
    if  (empty($contact_person_email)) { $error_contact_person_email = 'Y'; }
    if  (empty($contact_address)) { $error_contact_address = 'Y'; }
    if  (empty($contact_person_phone)) { $error_contact_person_phone = 'Y'; }
    if  (empty($boiler_brand_manufacturer)) { $error_boiler_brand_manufacturer = 'Y'; }

    $errors_exist = $error_company_name.$error_contact_person_name.$error_contact_person_email.$error_contact_address.$error_contact_person_phone.$error_boiler_brand_manufacturer;

    // No errors exist - Set up and send emails and redirect
    if  (!empty($errors_exist)) {
            $form_error_message = '<tr><td colspan="2"><p id="form_error_message">There are a few pieces of information that we need from you before this form comes through to us. They are highlighted below in red, so please fill those in again and click the <strong>Submit</strong> button again.</p></td></tr>';
        // Else, i.e. if $errors array is empty
        }   else    {

        // Set up email recipient(s)
        $to1 = $contact_person_email;                       // First email is sent to the person who submitted the form; $email
        $to2 = 'email_address';             // Second email is sent to the website owner; change this to the relevant email address

        // Set up email subject(s)
        $subject1 = 'Thanks for your submission - '.$website_name.' - '.$form_name.' form'; // Do not change
        $subject2 = 'Website submission - '.$website_name.' - '.$form_name.' form';         // Do not change

        // Set up email message(s)
        $message1 = '
        <div style="font-family: arial, tahoma, sans serif; font-size: small; color: #666;">
            <p>Hi '.$contact_person_name.',</p>
            <p>Thanks for completing our '.$form_name.' form on the '.$website_name.' website. We\'ll be in touch as soon as we can!</p>
            <p>With kind regards<br />'.$website_name.'</p>
        </div>';
        $message2 = '
        <div style="font-family: arial, tahoma, sans serif; font-size: small; color: #666;">

            <p>The following submission has been made via the '.$form_name.' form:</p>
            <h2>Company Information</h2>
            <p>Company Name: '.$company_name.'</p>
            <h2>Contact Information</h2>
            <p>
                Contact Person Name: '.$contact_person_name.'
                <br />Contact Person Email: '.$contact_person_email.'
                <br />Contact Address: '.$contact_address.'
                <br />Contact Person Phone: '.$contact_person_phone.'
            </p>
            <h2>Boiler Information</h2>
            <p>
                Boiler Brand/Manufacturer: '.$boiler_brand_manufacturer.'
                <br />Average Annual Fuel Consumption: '.$average_annual_fuel_consumption.'
                <br />Current Cost per kW: '.$current_cost_per_kw.'
                <br />Type of Fuel: '.$type_of_fuel.'
            </p>
            <h2>Boiler Capacity</h2>
            <p>
                Type of Boiler: '.$type_of_boiler.'
                <br />Total Capacity: '.$total_capacity.'
                <br />Boiler Capacity: '.$boiler_capacity.'
            </p>
        </div>';

        // To send HTML mail, the Content-type header must be set
        $headers  = 'MIME-Version: 1.0' . "\r\n";
        $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

        // Additional headers can be set here; Change From to website owner
        $headers .= 'From: NAME <' . $email_from . '>' . "\r\n";

        // Send emails
        mail($to1, $subject1, $message1, $headers);
        mail($to2, $subject2, $message2, $headers);

    // Errors exist - populate $form_error_message ready for output to browser
    }   

}   // END-OF-IF (isset($_POST['submitted']))

//  Stage M3. Add <p> to end of $form_error_message
    $form_error_message = $form_error_message.'</p>';
?>

Answer 1

一旦您进行表单提交（而不是 Ajax 调用），这非常容易。

在您的表单中：

<input type="text" name="measure[]" value="This input is fixed">

每次添加新输入（来自“measure”组）时，它都应该与数组同名：name="measure[]"，就像上面的输入一样。

那么在 PHP 中你只需要跑进这个数组就可以得到所有的字段。

<?php
$total_elements = count($_POST['measure']);
for ( $i=0;$i<$total_elements;++$i ) {
  echo $_POST['measure'][$i];
}
?>

希望对你有帮助。