2017-06-16 53 views
0

我想让我的表单停止刷新提交,而是我想做一个ajax调用,我还没有完成ajax部分,但它仍然清爽?JavaScript:从清爽停止表单?

你有什么试过? 我在论坛上提出了建议并添加了“返回false”;函数调用onSubmit之后?

$('#message_form').submit(function() { 
    postMessage(); 
    return false; 
}); 

function postMessage() { 
    var isValid = true; 

    var username = document.forms["post_message_form"]["username"].value; 
    var message = document.forms["post_message_form"]["message"].value; 

    var errorMessage = "Something went wrong, try again!"; 

    if (isEmpty(username) || isEmpty(message)) { 
     errorMessage = "You can't post with an empty name or message."; 
     isValid = false; 
    } 

    if (!isValid) { 
     alert(errorMessage); 
    } 
    else { 
     alert("Your message has been posted."); 
    } 

    return false; 
} 

function isEmpty(field) { 
    return field == null || field == ""; 
} 

形式:

<form id="message_form" name="post_message_form" method="post"> 
      <input type="text" class="form-control" placeholder="Whats your name?" name="username"> 
      <textarea class="form-control" placeholder="Whats your message?" name="message"></textarea> 
      <input type="submit" class="btn btn-info" name="message_form" value="Submit Message"> 
     </form> 
+1

不EXAC tly相关,但[postMessage'](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)可能不是全局函数的最佳名称。 – Teemu

回答

0

编辑:更新

可以有关于此类问题的某种原因

  • postMessage不能访问

    可能有机会,该消息不是全局声明

  • 可以存在以JavaScript代码

    一些一些一段代码不工作的其他错误是由于JavaScript代码的其它部分的错误

  • 可能有机会,你有没有加载的jQuery核心库文件

    如果没有包括jquery.min.js提交您上面的代码将无法正常工作(你的情况 - 看评论

由于返回假和event.preventDefault();做同样的工作在这个例子中,你可以使用其中一个

$('#message_form').submit(function(event) { 
    event.preventDefault(); 
    postMessage(); 
    // return false; 
}); 

要调试的代码,并通过点击右键按下F12或选择选项检查元素发现你可以在浏览器中打开开发人员工具的错误点击页面

+0

它仍然刷新,即使添加后。 – Keriosk

+0

然后肯定有错误,你有没有检查你的控制台? –

+0

嗨,我有一个错误,说$没有定义(在页面加载)? – Keriosk

-1

使用preventDefault而不是返回false;

$('#message_form').submit(function(event) { 
    console.log(123); 
    event.preventDefault(); 
}); 

https://codepen.io/animhotep/pen/bRBmxm?editors=1011

像官方maual;)https://api.jquery.com/submit/

+0

这个答案与我的不同么?无论如何尝试阅读评论第一,你会看到他的问题已解决,他没有包括jquery核心文件见评论。 –

+0

你用过无用的return false;并没有例子 –

0

试试这个代码添加onsubmit="return postMessage()

<form id="message_form" name="post_message_form" method="post" onsubmit="return postMessage()"> 
     <input type="text" class="form-control" placeholder="Whats your name?" name="username"> 
     <textarea class="form-control" placeholder="Whats your message?" name="message"></textarea> 
     <input type="submit" class="btn btn-info" name="message_form" value="Submit Message"> 
    </form> 
0

试试这个:

<form id="message_form" name="post_message_form" method="post" onsubmit="return postMessage();"> 
      <input type="text" class="form-control" placeholder="Whats your name?" name="username"> 
      <textarea class="form-control" placeholder="Whats your message?" name="message"></textarea> 
      <input type="submit" class="btn btn-info" name="message_form" value="Submit Message"> 
     </form>