Question

我有一个简单的对话框小部件，我用它来向服务器发送一些值，并将一些内容添加到页面上显示的无序列表中。例如name = matrixA a11 = 1 a12 = 2 a21 = 4 a22 = 1 所以这些数据被传递给服务器，name属性将被附加到列表中。

用户按下提交后，将调用Validate（）例程，该例程验证条目，将名称条目附加到无序列表并提交表单。

然而，在提交表单后，页面将重新加载并且附加内容将丢失。有什么方法可以避免这种情况吗？我知道附加功能可以实际看到它，然后页面会重新加载，我们又回到了开始状态。

@EDIT：这是我代码的一部分。整个代码变得太大所以请查看 -

    <script>
    $('#form1').submit(function(event){
        event.preventDefault();
        //Validate is a function which returns a bool if validation proceeds correctly
        var isCorrect = Validate(this);
        if(isCorrect){
        //if validated correctly then submit, close widget, add name of matrix to a list

            this.submit();  
            $('#dialog').dialog('close'); //the form sits inside a dialog widget
            $('#selectable').append("<li class='ui-widget-content'>name</li>"); 
        } 

    });
    </script>
    <form name='form1' id='form1'  method='get'>
<fieldset>
    <label for="Name">Name</label>
    <input type='text' name='nameofmatrix' id='Name' class='whitepanes'><br>
    <label for="a11">a11</label>
    <input type="text" name='a11' id='a11' class='whitepanes number-field'><br>
    <label for="a22">a22</label>
    <input type="text" name='a22' id='a22' class='whitepanes number-field'><br>
    <label for="a12">a12</label>
    <input type="text" name='a12' id='a12' class='whitepanes number-field'><br>
    <label for="a21">a21</label>
    <input type="text" name='a21' id='a21' class='whitepanes number-field'><br>
    <input type='submit' name='mysubmit' id='submit_button'  value='submit'>
    <button id='cancel_button'>cancel</button>
</fieldset>
</form>

Answer 1

您可能需要分享您的代码。

但我要做的是在你的提交按钮上放置一个点击监听器。然后使用prevent default来阻止页面重新加载。

e.g。

$('#buttonID').click(function(event){
  event.preventDefault(); //important
  // calculations here
  // validate method

});

或者，正如mplungjan提到的那样，您可以使用submit上的form事件代替。

$('#formID').submit(function(event){
  event.preventDefault(); //important
  // calculations here
  // validate method

});

表单提交后Jquery插入丢失

1 个答案: