我会尽量保持简短，同时仍然提供所需的信息，因为它是一个更大元素的一部分。从本质上讲，此页面的目标是默认隐藏显示为选中状态且需要在“提交”操作后保持可见的 CSS 元素。
问题是如何准确地做到这一点。我当前的问题是，尽管下面显示的代码在单击提交按钮后页面会刷新，这也会将表单可见性重置为隐藏。我需要它在处理输出 php 代码的同时保持可见。
页面分为左右两边，左边是输入(表单)，右边是所述表单的输出。该站点是用 PHP 编写的，并根据需要使用 HTML5/JS/CSS/AJAX。
不必要的位被 chop :
***** index.php *****
<?php
echo '<!DOCTYPE html>'."\n";
echo '<html>'."\n";
echo '<head>'."\n";
echo '<meta charset="UTF-8">'."\n";
echo '<script src="base.js"></script>'."\n";
...
echo '<link rel="stylesheet" type="text/css" href="input_form.css">'."\n";
...
echo '</head>'."\n";
echo '<body>'."\n";
...
echo '<span id="input_block" style="display:none;z-index:1;">';
require_once "input_form.php";
echo '</span>'."\n";
...
echo '</body>'."\n";
echo '</html>'."\n";
?>
***** base.js *****
var input_form = "";
var script_output = "";
//called from a multi-tier drop down menu of various form options
function show_sub(choice) {
var input_block = document.getElementById('input_block').style;
// Show the input form container for the first time
if(input_block.display = "none"){
input_block.display = 'block';
}
// This will hide current form to be replaced with selected form after first click
if( input_form != "" ) {
window.input_form.display = 'none';
}
// Update the current input form globally
window.input_form = document.getElementById(choice).style;
window.input_form.display = 'block';
}
//This is what is not working. Sourced from: http://stackoverflow.com/questions/23507608/form-submission-without-page-refresh
var input_data = $('#input_form');
input_data.submit(function (data) {
$.ajax({
type: input_data.attr('method'),
url: input_data.attr('action'),
data: input_data.serialize(),
success: function (complete) {
alert('data processing');
}
});
data.preventDefault();
});
***** input_form.php *****
<?php
echo '
<form id="input_form" action="index.php" method="get" name="submit">
';
require_once "cpe_input.php";
echo '
</form>
';
?>
***** cpe_input.php *****
<span id="cpe_3916">
<table>
<colgroup>
...
<tr> <!-- example form field -->
<td class="form_text">BANDWIDTH (MB)</td>
<td class="form_field" colspan="5">
<input type="text" name="bandwidth">
</td>
</tr>
<tr>
<td colspan="6">
<input type="submit" value="GENERATE SCRIPT" class="input_submit" style="position:relative;left:-1px;" onmouseover="this.style.cursor='."'pointer'".';">
</td>
</tr>
</table>
</span>
';
***** input_form.css//省略，因为它只是位置和样式选项
我没有包含输出文本代码，因为它只是嵌套在 <span> 中的纯文本标记在页面上表单的右侧。
我还没有解决表单验证问题，所以这是一个问题，即在代码中完成该步骤的位置(ajax 在离开字段焦点时触发)以及在所有验证通过之前阻止表单提交操作。
最佳答案
看起来有人回答了 here ，但您可能希望将提交功能包装在 DOM Ready 中。
$(function() {
var input_data = $('#input_form');
input_data.submit(function (data) {
data.preventDefault();
$.ajax({
type: input_data.attr('method')
url: input_data.attr('action'),
data: input_data.serialize(),
success: function (complete) {
alert('data processing')
}
});
});
});
更新:
有时您可能必须将函数附加到文档而不是单个元素。这会减慢处理速度，但如果可行，您可以寻找如何更有效地附加到表单元素而不是整个文档。尝试以下操作:
$(function() {
var input_data = $('#input_form');
$(document).on('submit', input_data, function (data) {
data.preventDefault();
$.ajax({
type: input_data.attr('method')
url: input_data.attr('action'),
data: input_data.serialize(),
success: function (complete) {
alert('data processing')
}
});
});
});
关于javascript - 需要有关 AJAX 表单处理小部件的帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39877349/