动态行表格提交
[英]Dynamic Rows Form Submit
问题描述
我的网站上有一个尺寸合适的表单，该表单的底部有一个插入行按钮，这会将行添加到表单的底部，我也可以单击相应的删除按钮将该行删除到该行。
表单底部的屏幕截图
现在，当我单击“发送”按钮时，就会出现问题。 如果我在表单中添加了几行，然后单击“发送”按钮，则这些行将从表单中消失，它们的值也将消失。 我想要它，所以一旦添加行并单击“发送”按钮，该表单将正确保持其状态并保留我先前添加的行。
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 个解决方案
解决方案1
1 2017-06-30 15:58:54
完成表单提交（而不是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];
}
?>
希望能帮助到你。
如何提交包含动态列和行的表单
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.