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();
});

jQuery发布表单代码不通过不起作用

2 个答案: