简体   繁体   English

如何在表单提交时触发div

[英]how to trigger div on form submit

i am newbie in jquery... just started learning it... 我是jquery的新手...刚刚开始学习...

i stuck in one problem is when i click on Open Model anchor link it's triggering Open Modal div and it will give one popup window with content of Open Modal div ... that code is below... 我遇到的一个问题是,当我单击“ 打开模型”锚链接时,它会触发“ 打开模态” 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>

you can take look of output here 您可以在这里查看输出

till now everything is working fine. 到目前为止,一切正常。 but now i want to open popup window (trigger OpenModal div ) when i submit the form... the submit form code is below... 但现在我想在提交表单时打开弹出窗口(触发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**
    })

Thanks in advance 提前致谢

till now everything is working fine. 到目前为止,一切正常。 but now i want to open popup window (trigger OpenModal div) when i submit the form... the submit form code is below... 但是现在我想在提交表单时打开弹出窗口(触发OpenModal div)...提交表单代码在下面...

I think that you say of a modal dialog . 我认为您说的是模式对话

I created the question , I think that I wrong the title because is difficult for search it. 我创建了一个问题 ,我认为我错了标题,因为很难搜索它。 I worked with method GET and I have no idea if this work with also with method POST but you can try. 我使用GET方法,不知道是否也可以使用POST方法,但是您可以尝试。

Now I explain how to work. 现在,我解释如何工作。

You use this form and I say of see the action. 您使用此表单,我想看看该操作。

<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>

I suggest you of replace 我建议你更换

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

with

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

Because now not send the form. 因为现在不发送表格。

I explain the function 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?
                    });

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

Your jquery code should go like this 您的jQuery代码应该像这样

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

I think you want (When you submit the form the dialog will be displayed: 我想您想要(当您提交表单时,将显示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();
     })
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM