2

我正在尝试使用 AJAX 提交表单，该表单是 jQuery UI 对话框的内容。

我使用与jQuery 文档中相同的代码

但我修改了表单，所以只有一个文本输入，所以表单看起来像这样：

<form>
  <fieldset>
    <label for="answer"><strong>Your Answer : </strong></label>
    <input type="text" name="answer" id="answer" class="text ui-widget-content ui-corner-all" />    
  </fieldset>
  </form>

当我单击确定（或创建用户）按钮时，它可以工作，即使用 AJAX 提交答案，但我也希望它在按下 Enter 键时工作。

现在，当我输入asd并按input#answerEnter 键时，URL 如下所示：

mysite.com/?answer=asd

我尝试添加功能：

  $('#answer').keypress(function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER) {
          alert("enter pressed on answer input");
    }
});

这次它会发出警报"enter pressed on answer input"，然后转换 URL。然而，我不希望它修改 URL，如何删除该功能？它在哪里定义？

简而言之，我希望回车键只做我想做的事。

谢谢你的帮助 ！

编辑：

按钮 - 在鼠标单击时起作用 -jQuery.dialog();像这样添加：

$( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        Answer: function() {
            var answer = $("#dialog-form #answer").val();
            alert("your answer : "+answer);
                    submit_with_ajax(answer);
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }


      },
      close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
        alert("asd");
      }
    });
4

3 回答 3

3

您可以使用 来阻止事件的默认操作event.preventDefault()。我不是 100% 确定表单在 jQuery-ui 中的外观以及阻止默认按键是否有效。作为替代方案，您可以阻止submit事件的默认操作，正如您可能期望的那样，阻止提交表单（根据 Gokul 的回答）。有关. _ _event.preventDefault()

$('#answer').keypress(function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER) {
          e.preventDefault();
    }
});

- 或者 - 

$('whatevertheuiformis').on( 'submit', function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER) {
          e.preventDefault();
    }
});
于 2013-08-25T18:48:04.417 回答
2

作为你的...

<form>
<!-- <form onsubmit="return false"> is an optional -->
<fieldset>
    <label for="answer">
        <strong>Your Answer : </strong>
    </label>
    <input type="text" name="answer" id="answer" 
           class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>

//jQuery Version
$('form').submit(function(){
    return false;
});
// javascript
document.getElementById('my-form').onsubmit = function() {
    return false;
}
$('#answer').keypress(function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER) {
        e.preventDefault();
        //alert("enter pressed on answer input");
        submit_with_ajax(answer);
    }
});

所以这里表格根本不会提交..这样您就可以执行您的AJAX提交或请求....

希望能帮助到你...

于 2013-08-25T18:34:55.183 回答
1

演示

尝试这个，

在输入答案中输入值，然后单击输入

$(document).ready(function () {
     $(document).on('keypress',function(e)
               {
                if(e.which==13 && $("#answer").val().length>0)
                {
                    alert("hi"); // do your ajax call here
                }
          });
});

希望这可以帮助

于 2013-08-25T18:40:13.057 回答