2012-07-21 71 views
3

我有两个不同的输入字段与他们各自的提交按钮,我希望用户能够输入到任何一个文本框输入他们的输入,然后按回车键,并具有与点击提交按钮相同的效果。目前,在文本框中输入内容并按下回车键不起作用。我正在使用HTML和JavaScript以及ASP .NET MVC3。我的代码如下所示:如何使用输入键提交时,有两个按钮

的HTML

<table> 
<tr> 
    <td><span class="labelText">Text1</span></td> <td><input id="text1" type="text" placeholder="Enter Text1"/> </td> <td style="width: 110px; text-align: left; margin-left: 5px"><button class="medium awesome blue" id="sendText1">Send Text1</button></td> 
</tr> 
<tr> 
    <td> <span class="labelText">Text2</span> </td> <td><input id="text2" type="text" placeholder="Enter Text2"/> </td> <td style="width: 110px; text-align: left; margin-left: 5px"> <button class="medium awesome blue" id="sendText2">Send Text2</button> </td> 
</tr> 

中的JavaScript

$('#sendText1').click(function() { 
     $('#text2').val(""); 
     var text1 = $("#text1").val(); 
     $('#loadingUsageInfo').css({ 'visibility': 'visible' }); 
     if (text1 == "" || text1 == 'Enter Text1') { 
      alert('Enter Text First'); 
      return; 
     } 
     $.ajax({ 
      url: '@Url.Action("ShowResult1", "Folder")', 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      data: JSON.stringify({ input1: text1 }), 
      traditional: true, 
      success: function (result) { 
       $('#info').html(result); 
      } 
     }); 
    }); 

    $('#sendText2').click(function() { 
     $('#text2').val(""); 
     var text2 = $("#text2").val(); 
     $('#loadingUsageInfo').css({ 'visibility': 'visible' }); 
     if (text2 == "" || text2 == 'Enter Text2') { 
      alert('Enter Text First'); 
      return; 
     } 

     $.ajax({ 
      url: '@Url.Action("ShowResult2", "Folder")', 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      data: JSON.stringify({ input2: text2 }), 
      traditional: true, 
      success: function (result) { 
       $('#info').html(result); 
      } 
     }); 
    }); 
提前

谢谢!

回答

1

添加此下方的js代码

$('#text1, #text2').keypress(function(e) { 
    if (e.which == 13) { 
    $('#sendText1, #sendText2').trigger('click'); 
    }  
}​​​​​​); 

Trigger - 执行附加到对于给定的事件类型匹配的元素的所有处理程序和行为。

所以我们在按键上绑定两个文本输入,并调用按钮的所有绑定。

也看到它是如何工作的jsFiddle

+0

谢谢Maksym!这真的很有帮助。 – user1543269 2012-07-22 18:26:48

+0

不客气。不要忘记标记为最佳答案;))谢谢。 – Maksym 2012-07-22 19:25:44

0

您的文本字段不知道它们应该在某处提交值。你可以通过标记form来让他们知道。

0

最后我做这样的事情。

$("#textbox").keypress(function (e) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code === 13) { 
     e.preventDefault(); 
     $("#btn").trigger("click"); 
    } 
});