Question

我仍在学习javascript和jquery，主要是通过反复试验，我现在有一个问题，我无法通过阅读类似的问题和答案（我通常的学习方式）来解决。此问题涉及使用jquery提交表单。

我有一个单独的html页面，主窗体（msg_form）正常工作。我最近添加了另一种形式的“小部件”（PMwdgt_form）。两个表单执行类似的操作，虽然不完全相同，所以我在jquery中添加了额外的函数来处理'widget'。页面和窗口小部件表单是动态的。

主窗体继续正常工作但是当我提交'窗口小部件'窗体时，我得到一个页面重新加载（正常提交活动），其中一个查询字符串被附加到URL，就好像事件没有被触发一样。此外，我希望'enter'键作为提交执行（就像它在主窗体上一样），但它只输入一个新行。页面和小部件是动态构建的。

我已经检查了Firefox检查器，发现“事件”列表显示“在jquery-1.11.1.min.js中的2个节点上提交”，其中只有一个在窗口小部件之前。我尝试过使用jquery-latest.min.js，但问题仍然存在。对不起，我没有演示它。

任何帮助你都可以让我通过jquery提交表格提交非常感谢。

主页表格......

<form id='msg_form'>
  <input id='chnl' name='chnl' type='hidden' value='$_SESSION[chnlid]'>
  <div class='msgbox left'>
    <textarea style='min-width: 635px; min-height: 45px;' name=message id=message placeholder='Type your message' title='Hold SHIFT and press ENTER for a new line'></textarea>
  </div>
  <div class='sendbtn right'>
    <button class='send' id='msg_send' type=submit>Send</button>
  </div>
</form>

主页js ......

$("#msg_form").on("submit",function(){
  t=$(this);
  var val = $('textarea#message').val();
  var val1 = $('input#chnl').val();

  if(val!=""){
    $.post("send.php",{msg:val,chnl:val1},function(){
      load_new_stuff();
      t[0].reset();
    });
  }

  return false;
});

$('#message').keydown(function(event) {
  if (event.keyCode == 13 && !event.shiftKey) {
    document.getElementById('msg_send').click();
    return false;
  }
});

小部件表格......

<form id='PMwdgt_form'>
  <div class='msgbox'>
    <textarea name=PMw_msg id=PMw_msg placeholder='Hit ENTER to send - Hold SHIFT and press ENTER for a new line.'></textarea>
  </div>
  <div class='sendbtn'>
    <input type=hidden id='PMw_msgto' name=msgto value='$frmid'>
    <button class='send' id='PMw_msg_send' type=submit>Send</button>
  </div>
</form>

widget js ...

$("#PMwdgt_form").on('submit', function(){
  t=$(this);

  var val = $('textarea#PMw_msg').val();
  var val1 = $('input#PMw_msgto').val();

  if(val!=""){
    $.post("PMsend.php",{msg:val,mto:val1},function(){
      t[0].reset();
    });
  }

  return false;
});


$('#PMw_msg').keydown(function(event) {
  if (event.keyCode == 13 && !event.shiftKey) {
    document.getElementById('PMw_msg_send').click();
    return false;
  }
});

上面的所有js片段都在$(document).ready(function(){

之内

Answer 1

除了下面的建议用jQuery选择器替换javascript选择器（我同意），我找不到你的代码的任何其他错误。但是，由于您的第二个表单位于某种窗口小部件中，我假设您稍后会在某个时候加载它？所以可能是<form id="PMwdgt_form">还没有加载。您必须将与此表单相关的jQuery放在将此表单添加到DOM的HTML下面，并且您可能还需要添加$(document).ready()。在不改变代码的任何其他内容的情况下，这个JSFiddle正在工作：https://jsfiddle.net/ecbxgpkk/1/所以我非常确定它与加载表单有关，并加载了附加的jQuery＆＃39 ;这种形式。如果您的小部件位于某种其他HTML页面中，或者稍后加载，请确保在将表单加载到DOM之后加载与其相关的jQuery。

编辑：我完全改变了你的代码。这是工作代码：请注意，出于演示目的，我更改了$ .post更简单的东西。你必须自己改变它。

＆＃13;

$(document).ready(function() {

  $("#msg_form").on("submit", function() {
    t = $(this);
    var val = $('textarea#message').val();
    var val1 = $('input#chnl').val();

    if (val != "") {
      $('.output').append(val + ' sent to channel: ' + val1 + '<br>');
    }

    return false;
  });

  $('#message').bind("enterKey", function(e) {
    $('#msg_send').click();
  });
  $('#message').keyup(function(e) {
    if (e.keyCode == 13 && !e.shiftKey) {
      $(this).trigger("enterKey");
	  $('#message').val('');
    }
  });

  $("#PMwdgt_form").on('submit', function() {
    t = $(this);

    var val = $('textarea#PMw_msg').val();
    var val1 = $('input#PMw_msgto').val();

    if (val != "") {
      $('.output').append(val + ' sent to person: ' + val1 + '<br>');
    }

    return false;
  });

  $('#PMw_msg').bind("enterKey2", function(e) {
    $('#PMw_msg_send').click();
  });
  $('#PMw_msg').keyup(function(e) {
    if (e.keyCode == 13 && !e.shiftKey) {
      $(this).trigger("enterKey2");
	  $('#PMw_msg').val('');
    }
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='msg_form'>
  <div class='msgbox left'>
    <textarea style='min-width: 635px; min-height: 45px;' name='message' id='message' placeholder='Type your message' title='Hold SHIFT and press ENTER for a new line'></textarea>
  </div>
  <div class='sendbtn right'>
    to: <input id='chnl' name='chnl' type='text' value='CHANNEL'>
    <button class='send' id='msg_send' type=submit>Send</button>
  </div>
</form><br>

<form id='PMwdgt_form'>
  <div class='msgbox'>
    <textarea style='min-width: 635px; min-height: 45px;' name='PMw_msg' id='PMw_msg' placeholder='Hit ENTER to send - Hold SHIFT and press ENTER for a new line.'></textarea>
  </div>
  <div class='sendbtn'>
    to: <input type='text' id='PMw_msgto' name='msgto' value='PERSON'>
    <button class='send' id='PMw_msg_send' type=submit>Send</button>
  </div>
</form><br>

Output:<br>
<div class="output"></div>

＆＃13;

jquery使用on（'submit'）有两个表单但只有一个正常工作

1 个答案: