需要有关AJAX表单处理小部件的帮助
我将尽量保持简短，同时仍然提供所需的信息，因为它是一个更大的项目的一部分。本质上，这个页面的目标是在默认情况下隐藏CSS元素，这些元素显示为选中，并且需要在“提交”操作后保持可见。
问题是如何准确地实现这一点。我目前的问题是，尽管下面显示了代码，但在单击submit按钮后，页面会刷新，这也会将表单可见性重置为隐藏。我需要它保持可见，同时仍然处理输出的php代码。
页面分为左右两部分，左侧为输入(表单)，右侧为表单的输出。该站点是用PHP编写的，必要时使用HTML5/JS/CSS/AJAX。
不必要的位被截断：
***** 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)，以及在所有验证通过之前阻止表单提交操作。
回答 1
Stack Overflow用户
发布于 2016-10-05 23:22:44
看起来这个问题已经回答了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')
}
});
});
});https://stackoverflow.com/questions/39877349
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号