SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2001
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is it possible for a submit button to launch a pop-up before submitting a form?

    This may seem like a strange problem, but I'm hoping someone can provide some guidance. I'd like to have a submit button on a form launch a pop-up window with a couple of additional input fields that users must fill in before the form is submitted. I'm using an onsubmit event to call a function that launches a pop-up, but whenever I click the submit button, the form is submitted before the pop-up appears. Is there something I'm doing wrong? I've tried placing the onsubmit event in the <form> tag and the <input type="submit"> tag and neither technique has worked.

    Here's the code for the form:
    HTML Code:
    <form name="form" method="post" action="http://my.file.here/test-arts.txt">
    <input type="hidden" name="headline" value="Arts News" />
    <input type="hidden" name="pubDate" value="February 1, 2005" />
    <input onsubmit="showPopup();return false" type="submit" name="submit" value="Send this" />
    </form>
    In case you're wondering, here's the function:

    HTML Code:
    function showPopup(){
    var popup = window.open("email-popup.html","","width=300,height=300,top=100,left=300,location=1,status=1,scrollbars=1,resizable=1")
    }
    Thanks for any help you can offer.

  2. #2
    SitePoint Guru gavwvin's Avatar
    Join Date
    Nov 2004
    Location
    Cornwall, UK
    Posts
    686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    onsubmit attribute only ever goes in the form tag. Do you still want the form to submit as well? return false; will make the form not submit. Also in your function you have at the end:

    resizab le=1

  3. #3
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As gavwvin said, onsubmit is only on the form tag. Correct usage:
    Code:
      
    <form name="form" onsubmit="showPopup();return false" method="post" action="http://my.file.here/test-arts.txt"> <input type="hidden" name="headline" value="Arts News" /> <input type="hidden" name="pubDate" value="February 1, 2005" /> <input type="submit" name="submit" value="Send this" /> </form>


    Problem is, that'll just run showPopup. It won't send the form details to it. Since they're hidden fields, why not just window.open "whatever.php?headline=Arts News&pubDate=February 1, 2005"? No form required, unless you want the pushbutton functionality (in which case an input type="button" would work better, I'd imagine). Not sure the situation, or if there are non-hidden fields, but anything run onsubmit won't have the form data sent. You'd have to use showPopup to get the values of the fields you want and append them that way if you wanted.

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its kinda complicated sometimes but you can open the new window, then on the new page, call the window.opener.form.submit(); from the pop which will submit the parent form.

    I ended up submitting forms to showModalDialog. using the same method.

    Gav

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2001
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to all of you for your comments and suggestions. After moving onsubmit to the <form> tag, I changed the submit button from <input type="submit" name="submit" value="submit"> to <button type="submit" name="submit" value="submit">Submit</button>.

    This launches the pop-up without sending the form.

    someonewhois:
    The server I'm using doesn't allow php, so I have to use Javascript.

    gRoberts:
    I was wondering how I would submit the form from the popup window. Hopefully window.opener.form.submit() will do the trick...I may be asking you another question soon.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2001
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I mentioned in a previous post, I'm able to launch a pop-up before the form on the main web page submits. Now, I'm having problems passing values from the pop-up back to the main web page and submitting the form.

    Here's a description of what I have and what I'm trying to do. First, I have a web page with a form. This form has three hidden input fields, two of which (named senderEmail and destinationEmail) have the value set to "". I want to be able to click the form's submit button and have a pop-up window launch. The pop-up should contain another form with text input fields for senderEmail and destinationEmail. Once these fields are filled in, I want to be able to click a button and have the values for senderEmail and destinationEmail passed back to the form on the main page and then submit the main page's form.

    DISCLAIMER: I realize there are better ways to accomplish this, but because of my ISP's standards, this is how it must be done.

    As it stands now, I can launch the pop-up and submit the main page's form by clicking a button in the pop-up, but the error message I'm receiving indicates that the values for senderEmail and destinationEmail are not being passed back to the main form. This action is supposed to be taking place in the setFields function.

    Here's the code for the pop-up function and the form on my main web page.

    HTML Code:
    <script language="JavaScript" type="text/JavaScript">
    function showPopup(){
    var popup = window.open("email-popup.html","","width=300,height=300,top=100,left=300,location=1,status=1,scrollbars=1,resizable=1")
    }
    </script>
    ...
    <form onsubmit="showPopup();return false" name="storyPageForm" method="post" action="http://server.name.here/testemail-arts.txt">
    <input type="hidden" name="senderEmail" value="" />
    <input type="hidden" name="destinationEmail" value="" />
    <input type="hidden" name="headline" value="Arts News" />
    <button type="submit" name="submit" value="E-mail this article">Email this</button>
    </form>
    Note how the senderEmail and destinationEmail fields are hidden and the values are blank. These are the values I would like to set by using the pop-up window.

    Here's the code from the pop-up window. The form contains input fields that should be setting the values of the hidden fields on the main page. I'm trying to set the values using the Javascript function setFields.

    HTML Code:
    <script language="JavaScript" type="text/javascript">
    function setFields() {
    	window.opener.document.storyPageForm.senderEmail.value = document.emailForm.senderEmail.value;
    	window.opener.document.storyPageForm.destinationEmail.value = document.emailForm.destinationEmail.value;
    }
    </script>
    
    <form name="emailForm" method="post" action="#">
    <p>What is your e-mail address?<br />
    <input type="text" name="senderEmail">
    </p>
    	
    <p>Who would you like to send the article to?<br />
    <input type="text" name="destinationEmail"></p>
    <button type="button" onclick="setFields();window.opener.storyPageForm.submit();" name="submit" value="send e-mail">Send e-mail</button>
    </form>
    Once again, any help would be greatly appreciated.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •