Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Form validation on submit and new window only on success

    Trying to create an eBay listing template with a form on it.

    The form will allow the buyer to enter in their ebay ID, item number, and 3 choices.

    Form is complete, using this javascript for validation:
    Code:
    <SCRIPT language=javascript>
       function validate(){
            var ebayid= document.getElementById('ebayid').value;
            var itemnumber= document.getElementById('itemnumber').value;
            var choice1= document.getElementById('choice1').value;
            var choice2= document.getElementById('choice2').value;
            var choice3= document.getElementById('choice3').value;
            
            if (!ebayid){
              alert('Ebayid is required!');
              document.getElementById('ebayid').focus();
              return false;
            }
            
             if (!itemnumber){
              alert('Item Number is required!');
              document.getElementById('itemnumber').focus();
              return false;
            }
    
            if (!choice1){
              alert('Choice 1 is required!');
              document.getElementById('choice1').focus();
              return false;
            }
    
           if (!choice2){
              alert('Choice 2 is required!');
              return false;
            }
    
    
           if (!choice3){
              alert('Choice 3 is required!');
              return false;
            }
    
            
            
            return true;
            
    
            
       }
    
    </SCRIPT>
    I like this because it gives a pop up alert box (with definition) if a field is left empty. Upon success though the user is redirected off the page to a success page. I was told that this has to happen because the .php for the form to work is hosted on my site and the user needs to be redirected to my site in order for the form to work.

    Since this is the case, I was told I could use javascript to open up a separate window for this to happen, thus allowing the buyer to stay on the eBay listing (and to stay compliant with eBay's html/javascript policy).

    I have pieced together code from numerous forums to actually do this but there is one flaw.
    Code:
    <form action="http://www.mysite.com/test.php" method="post" name="testform" id="testform" onsubmit="window.open('', 'success', 'width=450,height=300,status=yes,resizable=yes,scrollbars=yes'); javascript:return validate();" target="success"/>
    This code not only opens a new window but it opens the new window on any click to the submit button, even if the validation fails.

    How do I write this so that the new window is only opened when the validation completes all true and not when the validation returns an error/alert box?



    Additionally... how do I add to the javascript so that the field "ebayid" requires 6 characters and the "itemnumber" requires 12 numbers?

    I would also like for the form itself to erase after a successful submission to prevent the user from hitting the submit button 100's of times spamming me with email (if it's possible)

    Thanks
    Kemble
    Last edited by kemble; 11-21-2010 at 07:24 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Move javascript:return validate(); (javascript is redundant) to before the window.open.

    Code:
    ebayid = ebayid.replace(/^\s+|\s+$/g,"");   // strip leading and trailing spaces
    if (ebayid.length !=6) {   // ebayid must be six characters
    alert ("Invalid ID"")
    return false;
    }
    
    itemnumber = Number(itemnumber);  // ensure itemnumber is a number
    if (!/^\d{12}$/.test(itemnumber)) {  // must be 12 digits
    alert ("Invalid Item Number");
    return false;
    }
    Seen in the classified ads: Nice parachute - never opened - used once.

  • Users who have thanked Philip M for this post:

    kemble (11-22-2010)

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Putting the validation in the beginning does exactly what I want (new window only comes up after an error free validation) just 1 small problem. The new window designated size isn't working now, It just opens a full sized window.

    Code:
    <form action="http://www.mysite.com/test.php" method="post" name="testform" id="testform" onsubmit="javascript:return validate(); window.open('', 'success', 'width=450,height=300,status=yes,resizable=yes,scrollbars=yes');" target="success"/>
    If I remove the:
    Code:
    javascript:return validate();
    The window opens up at width=450,height=300 Add the validation to it and the window opens full size =(

    Any thoughts?


    Thanks
    Kemble
    Last edited by kemble; 11-22-2010 at 03:57 PM. Reason: Answered 2 of my questions

  • #4
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    .....
    Last edited by kemble; 11-22-2010 at 03:55 PM. Reason: duplicate post

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Code:
    if (!/^\d{12,}$/.test(itemnumber)) {  // must be at least 12 digits
    For your other issue, see
    http://webtips.dan.info/new-window.html

    Note carefully the advice given at th end.

  • Users who have thanked Philip M for this post:

    kemble (11-22-2010)

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you for the page suggestion however it does not solve my problem. I have to open a new window in order to stay compliant with eBay's listing policies. If the form redirects the user on the same page it's illegal. Only way I can have the form on the page is if it opens up a new window. This is why I want the new window to be a specified size so that the new window can be a small enough size in the center of their screen so the user can easily close it.

    I will most likely have a timed script on the opened window to auto close it after "x" seconds.
    Last edited by kemble; 11-22-2010 at 04:11 PM. Reason: Fixed some spelling mistakes

  • #7
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I also have 1 last request (should be).

    How can I add to the Javascript a clear function so that once the user enters their info into in the form and the form passes validation, the form clears itself back to the default values? Being careful that the clear function does not clear the form if any validation errors come up. Only clearing the form on successful validation and also being careful that the form's email to me isn't blank.

    I want to prevent any annoying person who would want to click on the submit button 100 times and spamming my email with duplicate emails.

    Many thanks
    Kemble

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Are you trying to circumvent eBay's rules?

    Set the form values back to their default values (blank?) at the end of the validation routine. But it would perhaps be better to disable the submit button for xx seconds.

  • #9
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Of course not. I'm trying to create a form that does what I want it to do but also be 100% compliant.

    eBay's listing policy states that I can't redirect a user off of eBay UNLESS it's by a clickable link (aka form submission button) that opens a new window (thus the parent window keeps the user on eBay).

    What I'm doing is 100% legal. I just want the opened window to be a specified size so that it acts as if it's a pop up so the user can easily close the window.

    ex. I use firefox, the way the form/script is now... when the window opens in full screen the browser moves me from the form window to the new opened window (the form's landing page). When I removed the validate the landing page opened in my 450x500 window. This kept me on the form's page still and made the landing page act as a pop up. It centered it in the middle of my computer screen and was easily closeable.

    For some reason when I moved the javascript:return validate(); before the window.open it caused the specified size to not work anymore. It still opens the window but in full size.

    Did that make sense?


    As far as the clearing of the form... Yes, the default values would be blank for the ebayid and itemnumber, Choice 1,2, and 3 would get reset to their form default values "Choice 1", "Choice 2", "Choice 3" (these are drop down menu's). I'm confused what you mean about the disabling of the submit button though.

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by kemble View Post
    I'm confused what you mean about the disabling of the submit button though.
    Well, you can disable the submit button for xx seconds:-

    Code:
    <input type = "submit" id = "subButton" value = "Submit" onclick = "disable()">
    
    <script type = "text/javascript">
    function disable() {
    document.getElementById("subButton"). disabled = true;
    window.setTimeout("reEnable()", 10000);  // re-enable after 10 seconds
    }
    function reEnable() {
    document.getElementById("subButton"). disabled = false;
    }
    
    </script>
    This is just a demo - you will need to call the disable() function after successful completion of the form validation.

  • #11
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry for being a complete noob. Could you help me out by writing the clear form code for me? If you want, leave me your email and I can paypal you some $ for your time. I've been pulling my hair out for 3 days trying to get this form completed and I just need to get it done so I can move on and work on other things.

    This is what I have so far:
    Code:
    <form action="http://www.mysite.com/3choicestest.php" method="post" name="choice3" id="choose3form" onsubmit="javascript:return validate(); window.open('', 'success', 'width=450,height=300,status=yes,resizable=yes,scrollbars=yes');" target="success"/>
    <TABLE width="450" align="center">
    <TR>
    <TD colspan="2" align="left" class="push">eBay ID (Required)</TD><TD align="left"><INPUT size="16" id="ebayid" name="ebayid"></TD>
    </TR>
    <TR>
    <TD colspan="2" align="left" class="push">Item Number (Required)</TD><TD align="left"><INPUT size="16" id="itemnumber" name="itemnumber"></TD>
    </TR>
    <TR>
    <TD align="left"  style="border-top:dotted; border-color:#000000; padding-top:10px;" ><!-- List 1 --><SELECT size="1" id="choice1" name="choice1"> <OPTION selected value="">-- Skin Choice 1 --</OPTION>
    <OPTION value="Alphabet Soup">Alphabet Soup</OPTION>
    </SELECT></TD>
    
    <TD align="center" style="border-top:dotted; border-color:#000000; padding-top:10px;"><!-- List 2 --><SELECT size="1" id="choice2" name="choice2"> <OPTION selected value="">-- Skin Choice 2 --</OPTION>
    <OPTION value="Alphabet Soup">Alphabet Soup</OPTION>
    </SELECT></TD>
    
    <TD align="right" style="border-top:dotted; border-color:#000000; padding-top:10px;" ><!-- List 3 --><SELECT size="1" id="choice3" name="choice3"> <OPTION selected value="">-- Skin Choice 3 --</OPTION>
    <OPTION value="Alphabet Soup">Alphabet Soup</OPTION>
    </SELECT></TD>
    
    </TR>
    <TR><TD colspan="3" align="center"><input name="Submit" type="submit" value="Submit my design choices!"/></TD></TR>
    </TABLE>
    
    
    <SCRIPT language=javascript>
       function validate(){
     		var ebayid= document.getElementById('ebayid').value;
            var itemnumber= document.getElementById('itemnumber').value;
            var choice1= document.getElementById('choice1').value;
            var choice2= document.getElementById('choice2').value;
            var choice3= document.getElementById('choice3').value;
            
    		ebayid = ebayid.replace(/^\s+|\s+$/g,"");   // strip leading and trailing spaces
    		if (ebayid.length < 6) {   // ebayid must be at least six characters
    		alert ("Please enter a valid eBay ID");
    		return false;
    		}
    
    		itemnumber = Number(itemnumber);  // ensure itemnumber is a number
    		if (!/^\d{12,}$/.test(itemnumber)) {  // must be at least 12 digits
    		alert ("Please enter the listing Item Number");
    		return false;
    		}
    	
    
            if (!choice1){
              alert('Choice 1 is required!');
              document.getElementById('choice1').focus();
              return false;
            }
    
           if (!choice2){
              alert('Choice 2 is required!');
              return false;
            }
    
    
           if (!choice3){
              alert('Choice 3 is required!');
              return false;
            }
    
            		
            return true;
    		        
       }
    </SCRIPT>
    
    </FORM>
    If you need the .php info I can post that as well but I don't think you do.

    Still having an issue with the opened window going full window. Don't know why it wont listen to the designated size.

    Also, if you prefer me to put up a test html so you can see it in action I can do that as well. I've just been testing it in dreamweaver for now.

  • #12
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    .....
    Last edited by kemble; 11-22-2010 at 11:31 PM. Reason: removed link to my website

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    You are using the same name choice3 for the name of the form and for a form element. Correct that and it works. The reason why you cannot open a new pop-up window is that the parent page is destroyed onsubmit, but the code does redirect to a new page.

    Move
    Code:
    window.open('', 'success', 'width=450,height=300,status=yes,resizable=yes,scrollbars=yes');
    to the validation script, right before
    Code:
    return true;

  • Users who have thanked Philip M for this post:

    kemble (11-22-2010)

  • #14
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    PERFECT !!!!!!

    Thats exactly what I wanted !!

    Thank You Thank You Thank You Thank You Thank You

    Now for my last request... how do I make the form clear itself once the person hits submit so I don't get some idiot clicking submit 100 times spamming my email box? Being careful not to clear the form upon validation errors and careful not to submit to my email a blank form?

  • #15
    New Coder
    Join Date
    Nov 2010
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts
    WOOT !!! DID IT !!!

    Code:
     window.open('','success','width=420,height=330,status=yes,resizable=yes,scrollbars=yes');
    	setTimeout('clearFields()', 200); 	
            return true;
    		
    
    }
    function clearFields(){
    	document.choice3form.reset();
    }
    </SCRIPT>
    Sometimes I even amaze myself

    Thanks so much Philip M for all your help you are a true saint!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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