jquery - jQuery post 表单代码未通过无法正常工作

Question

  function send_quick_pm() {
    $.post('/privmsg', {
        'username%5B%5D' : document.getElementById('quick_pm_username').value,
        subject : document.getElementById('quick_pm_subject').value,
        message : document.getElementById('quick_pm_message').value,
        folder : 'inbox',
        mode : 'post',
        post : 1
    }, function(r) {
      alert('PM is sent!');
    });
  }

这就是我正在使用的代码，这是我正在使用的标记-

<form id="privatemessage" class="newmessage">
  <input id="quick_pm_username" placeholder="Message To:" type="text" class="usernameinput"/>
    <input id="quick_pm_subject" placeholder="Subject:" onkeypress="if (event.keyCode==13){return false}" maxlength="64" type="text" class="usernameinput"/>
      <textarea id="quick_pm_message" class="noThis" placeholder="Type your message here..." >     
      </textarea>
   </div>
 <div id="bottombuttons">
   <span class="button">
     <button onClick="send_quick_pm();" class="submitbutton uiButton uiButtonConfirm uiButtonLarge">Submit</button>
    </form>
      <button class="submitbutton cancelButton uiButton uiButtonConfirm uiButtonLarge">Cancel</button>
  </span>
 </div>

标记可能是错误的，这是我编写代码使其看起来应该的唯一方法。

http://jsfiddle.net/n9eNe/

任何人都可以提出一些建议吗？

Answer 1

添加type="button"到您的<button>元素。

<button type="button" onClick="send_quick_pm();" class="submitbutton uiButton uiButtonConfirm uiButtonLarge">Submit</button>
<button type="button" class="submitbutton cancelButton uiButton uiButtonConfirm uiButtonLarge">Cancel</button>

如果不指定，则默认为type="submit". 这将导致您的表单提交，进而导致页面被刷新。这将阻止您查看send_quick_pm函数的结果。

---

此外，您确实应该将结束表单标记 ( </form>) 移到末尾。正如您在此处所做的那样，重叠/交错元素不会带来任何好处。

Answer 2

您可以通过添加 preventDefault 来阻止提交表单。

正如@Lee 指出的那样，修复标记！

http://jsfiddle.net/n9eNe/4/

$("#privatemessage").on("submit", function(e){
    $.post('/privmsg', {
        'username%5B%5D' : document.getElementById('quick_pm_username').value,
        subject : document.getElementById('quick_pm_subject').value,
        message : document.getElementById('quick_pm_message').value,
        folder : 'inbox',
        mode : 'post',
        post : 1},
        function(r) {
          alert('PM is sent!');
        });

    e.preventDefault();
});