1

i am newbie in jquery... just started learning it...

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

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

    <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

3
  • $('.modalDialog').fadeIn(); will it work for you?
    – Adam Azad
    Nov 12, 2013 at 8:50
  • You spelt openModal wrong.
    – rybo111
    Nov 12, 2013 at 8:52
  • Excuse but I can receive information that my answer is helpful or not? Nov 13, 2013 at 18:48

4 Answers 4

1

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

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.

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?
                    });

}
0
0

Your jquery code should go like this

$('form').submit( function(e) {
    $('a').trigger('click') //or open model directly
    e.preventDefault();
});
2
  • Yeah, above approach will work. Main thing is about e.preventDefault that will cancel the default form submit.
    – piscript
    Nov 12, 2013 at 8:55
  • see here jsbin.com/iMAzehE/4/edit... anchor is working.. insted of anchor i want to do samething when i submits the form Nov 12, 2013 at 8:57
0

I think you want (When you submit the form the dialog will be displayed:

$('#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();
     })
});
3
  • it's redirecting me to my form action page... it's coming inside sumbit function but it's not showing ... Nov 12, 2013 at 9:15
  • change #send type to button <input type="button" id="send" value="SUBMIT" class="button" />
    – Adam Azad
    Nov 12, 2013 at 9:17
  • when i click on sumbit button nothing happens... can you edit your code jsbin.com/iMAzehE/4/edit here Nov 12, 2013 at 9:20
0
//then here is your code
$('form').submit(function(e){
        $('#openModal').fadeIn()
        e.preventDefault()
    })
5
  • @AdamAzad anchor link i just kept for testing.. originally i want to popup window while user submit form Nov 12, 2013 at 8:55
  • see here jsbin.com/iMAzehE/4/edit... anchor is working.. insted of anchor i want to do samething when i submits the form Nov 12, 2013 at 8:58
  • See edit above, you need to call your method, which popups the div in the jquery
    – Feanor
    Nov 12, 2013 at 9:09
  • i tried that same code but not working... it's directly redirecting in to my form action page... Nov 12, 2013 at 9:12
  • So, you need to prevent default submit, added e.preventDefault() to the code above
    – Feanor
    Nov 12, 2013 at 9:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.