呼叫功能提交按鈕

我有一個引導形式提交按鈕：呼叫功能提交按鈕

<form> 

    <div class=form-group> 
     <input type="text" class="form-control" name="inputcity" id="userinput"/> 
    </div> 

    <audio id="au001" src="t001.mp3"></audio> 

    <button class="button btn btn-success btn-lg center-block" id="submitBtn">Check it out!</button> 

</form>

我想有按鈕按下時提交過程繼續進行，並調用一個函數。已經嘗試從形式調用它：

<form onsubmit="thunderEffect()">

和JS腳本：

document.getElementByID("submitBtn").onclick(thunderEffect());

通過他們沒有工作。代碼已到達（我檢查警報），所以我想這是我的功能的性質。它只是在頁面上創建一個閃爍的效果：

function thunderEffect(){ 

      $(".ext-1").fadeIn(1500).fadeOut(250, function(){ 

       $(this).css("background-color", "rgba(255, 255, 255, .7)"); 

       document.getElementById("au001").play(); 

       $(this).fadeIn(250).fadeOut(2000, function(){ 

        $(this).css("background-color", "rgba(0, 0, 0, .4)");      
       });     
      });     
     }

當我把它在頁面加載它完美的作品，它只是不從提交按鈕調用時：它像效果相當被立即中斷後點擊。任何想法爲什麼？（在控制檯沒有返回錯誤）

我的整個頁面代碼在這裏---->http://pastebin.com/LQd0HdnY

謝謝！

編輯： ---解決了！通過在被提交按鈕調用的函數的開頭添加event.preventDefault（）......

來源

2016-02-22 Uknowho

柱具有表單 – Transformer

電話，在你的表單標籤的onsubmit功能代碼。 '

' –

謝謝!!!已經嘗試過您的解決方案:(...檢查編輯的職位。 – Uknowho

-1

您可能只需要調用jQuery的功能，如：

$('button.btn-lg').on('click', function(e) { 
/* On click implementation goes here */ 
});

來源

2016-02-22 11:53:51 mlewandowski

這將綁定點擊事件與'.btn-lg'所有按鈕。這將是最好的連接點擊事件的id選擇。 –

有沒有如何綁定按鈕明確的要求，因此是方法論的只是例子，不嚴格的解決方案，但... – mlewandowski

當然進一步的！你應該問OP張貼原料答案前的細節。 –

$(document).ready(function() { 
 
     $("button[id='submitBtn']").click(function(){ 
 
      thunderEffect(); 
 
     }); 
 
}); 
 
function thunderEffect(){ 
 
    $(".ext-1").fadeIn(1500).fadeOut(250, function(){ 
 
     $(this).css("background-color", "rgba(255, 255, 255, .7)"); 
 
     document.getElementById("au001").play(); 
 
     $(this).fadeIn(250).fadeOut(2000, function(){ 
 
      $(this).css("background-color", "rgba(0, 0, 0, .4)");      
 
     });     
 
    });  
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<form> 
 
    <div class=form-group> 
 
     <input type="text" class="form-control" name="inputcity" id="userinput"/> 
 
    </div> 
 
    <!-- i changed the audio source to suit the example --> 
 
    <audio id="au001" controls="controls"> 
 
     <source src="http://soundbible.com/grab.php?id=989&type=mp3" type="audio/mp3" /> 
 
    </audio> 
 

 
    <button class="button btn btn-success btn-lg center-block" id="submitBtn">Check it out!</button> 
 

 
</form> 
 
<!-- I assume this is the element with the class ".ext-1" --> 
 
<div class="ext-1" style="width:80px;height:80px;"></div>

來源

2016-02-22 11:54:43 Transformer

謝謝，但不工作... – Uknowho

我剛剛看到你的update.pls給我一些分鐘來更新我的答案su牛逼你的問題 – Transformer

請從形式還是從調用按鈕點擊功能（JS），兩者都在同一時間 – Transformer

呼叫表單中的標籤功能的onsubmit。

<html> 
<head> 
<meta charset="ISO-8859-1"> 
<title>No Title</title> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script> 
function thunderEffect(){ 
    alert("at the beginning"); 
    $(".ext-1").fadeIn(1500).fadeOut(250, function(){ 

     $(this).css("background-color", "rgba(255, 255, 255, .7)"); 

     document.getElementById("au001").play(); 

     $(this).fadeIn(250).fadeOut(2000, function(){ 

      $(this).css("background-color", "rgba(0, 0, 0, .4)");      
     });     
    }); 
    alert("at the end"); 
} 
</script> 
</head> 
<body> 
    <form action="foo.htm" onsubmit="thunderEffect()"> 
     <button class="button btn btn-success btn-lg center-block" id="submitBtn" >Check it out!!!</button> 
    </form> 
</body> 
</html>

這個工作對我來說...

來源

2016-02-22 12:03:54

謝謝，但不工作... – Uknowho

它向我展示了兩個警報消息，然後進入'foo.htm'頁面。 –

呼叫功能提交按鈕

回答

相關問題