Question

我会尽量保持这个尽可能简短，同时仍然提供所需的信息，因为它是一个更大的项目的一部分。本质上，此页面的目标是隐藏默认的CSS元素，这些元素显示为已选中，并且需要在“提交”操作后保持可见。

问题是如何完成这一目标。我目前的问题是，尽管下面显示了代码，但在单击提交按钮后页面会刷新，这也会将表单可见性重置为隐藏。我还需要它在处理输出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）以及在传递所有验证之前阻止表单提交操作方面存在问题。

Answer 1

看起来已经回复了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')
        }
    });
  });
});

需要有关AJAX表单处理小部件的帮助

1 个答案: