如何在表單提交時觸發div

Question

我是jquery的新手...剛剛開始學習...

我遇到的一個問題是，當我單擊“ 打開模型”錨鏈接時，它會觸發“ 打開模態” div ，它將給出一個包含“ 打開模態” div內容的彈出窗口...代碼如下...

  <a href="#opneModal"> Open Model </a>

<div id="openModal" class="modalDialog">
   <div>
    <a href="#close" title="Close" class="close">X</a>
    <h2>Congrats..</h2>
    <p>Now you can apply discount.</p>
   </div>
</div>

您可以在這里查看輸出

到目前為止，一切正常。 但現在我想在提交表單時打開彈出窗口（觸發OpenModal div ）...提交表單代碼如下...

    <form action="" method="POST">
       <input type="text" name="name" required="" placeholder="Name" class="textbox"/>
       <input type="email" name="email" required="" placeholder="Email Address*" class="textbox"/>
      <input type="submit"  id="send" value="SUBMIT" class="button" />
    </form>

    $('form').submit(function(){
        //which code i should write which will call **OpenModal div**
    })

提前致謝

Answer 1

到目前為止，一切正常。 但是現在我想在提交表單時打開彈出窗口（觸發OpenModal div）...提交表單代碼在下面...

我認為您說的是模式對話 。

我創建了一個問題 ，我認為我錯了標題，因為很難搜索它。 我使用GET方法，不知道是否也可以使用POST方法，但是您可以嘗試。

現在，我解釋如何工作。

您使用此表單，我想看看該操作。

<form action="" method="POST" id="forma">
       <input type="text" name="name" required="" placeholder="Name" class="textbox"/>
       <input type="email" name="email" required="" placeholder="Email Address*" class="textbox"/>
      <input type="submit"  id="send" value="SUBMIT" class="button" />
    </form>

我建議你更換

<input type="submit"  id="send" value="SUBMIT" class="button" />

同

<input type="button" value="Clicca qui" onclick="start()" />

因為現在不發送表格。

我解釋一下功能開始

function start() {
var $fm = $("#forma");
                $.post($fm.attr('you action is form'))
                    .done(function(data, ok){
                    var fr=$fm.serialize();
//now you can open the window popup and you can pass the variable fr or not. the important //that you not lose this contain of variable. When you close the window you say on server or //site that you go at address.
//With document.location.href="index2?"+fr; if you site is localhost:8100/index?bla=2&l=3
//document.location is localhost:8100 and document.location.href is the part index?bla=2&l=3
//then you have to go the localhost:8100/upload (look the action) you have to use
//document.location.href="upload?"+fr; 
//now I make the action 's form with this script


                    document.location.href="index2?"+fr;
                                    })
                    .fail(function(data){
                    alert('call failed');
                    // call failed for some reason -- add error messaging?
                    });

}

Answer 2

//then here is your code
$('form').submit(function(e){
        $('#openModal').fadeIn()
        e.preventDefault()
    })

Answer 3

您的jQuery代碼應該像這樣

$('form').submit( function(e) {
    $('a').trigger('click') //or open model directly
    e.preventDefault();
});

Answer 4

我想您想要（當您提交表單時，將顯示dialog ：

$('#send').click(function(foo){
     foo.preventDefault(); // you can remove this if you change #send type to button

     $('form').submit(function(){ // submit the form and show the dialog
        $('#mylink').click();
     })
});