2017-06-16 57 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>