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>

您可以查看输出here

到目前为止一切正常。但是现在我想在提交表单时打开弹出窗口（触发 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），当我提交表单...提交表格代码如下......

我认为您说的是模态对话框。

我创建了question，我认为我错了标题，因为搜索很难。我使用方法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();
     })
});

如何在表单提交上触发div

4 个答案: