动态行表单提交

时间:2017-06-30 09:53:08

标签: javascript php html forms submit

我的网站上有一个不错的大小表单,底部有一个插入行按钮,这会在表单底部添加行,我也可以单击相应的删除按钮将该行删除。

表单底部的屏幕截图

enter image description here

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

可以在此处找到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>';
?>

1 个答案:

答案 0 :(得分:0)

一旦你进行表单提交(而不是Ajax调用),这很容易。

以您的形式:

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

每次添加新输入(来自“测量”组)时,它应该与数组具有相同的名称:name="measure[]",如上面的输入。

然后在PHP中你只需要运行这个数组来获取所有字段。

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

希望它有所帮助。