我的网站上有一个大小合适的表单，底部有一个插入行按钮，这会在表单底部添加行，我也可以单击相应的删除按钮来删除该单行。
表单底部的屏幕截图
现在，当我单击“发送”按钮时出现问题。如果我在表单中添加了几行，然后单击“发送”按钮，这些行就会从表单中消失，它们的值也会消失。我想要这样，一旦我添加了行并单击发送按钮，表单就会正确保持其状态并保留我之前添加的行。
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>';
?>
最佳答案
一旦您执行表单提交(而不是 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];
}
?>
希望有帮助。
关于javascript - 动态行表单提交，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44843622/