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.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts

    submit() = onsubmit?

    i have this js form vaildator.
    in the <form> tag it has an onsubmit="....." part. It works the way its supposed to.

    now, theres this other part to the form. i have a "preview" button which brings up a confirm() with the values of the inputs in the form.

    So after filling out the inputs, you hit Preview. It brings up a confirm() with the values that you just typed. Since it's confirm(), theres Ok and Cancel. If you hit OK, it will send the form (.....submit()).

    But when you do that, the first form vaildator (which uses the onsubmit="") doesn't check the confirm one.

    what do i do?

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,050
    Thanks
    0
    Thanked 251 Times in 247 Posts
    The form submit() method doesn't trigger the onsubmit event. I don't know why it doesn't when it should. The solution is to make the preview button a submit button.

    <input type="submit" name="btnPreview" value="Preview" onclick="return confirm('Are you sure you want to preview the page?');" />

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Another way would be to call the function specified in the onclick event manually before using the submit() function, or you could use dispatchEvent to simulate a real click on the submit button.

  • #4
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    glenngv, if i make the other buton (the preview one) into a submit also (type="submit"), wouldn't that interfere with the real submit button?

    so this is my preview button's code:
    Code:
    <input type="submit" value="Preview" onclick="preview();" />
    and preview() is:
    Code:
    function preview() {
    name = document.getElementById("name").value;
    email = document.getElementById("email").value;
    url = document.getElementById("url").value;
    subject = document.getElementById("subject").value;
    msg = document.getElementById("message").value;
    
    if ((msg) && (confirm("Message Preview-\n\nName:\n"+name+"\n_______________\nEmail:\n"+email+"\n_______________\nWebsite:\n"+url+"\n_______________\nSubject:\n"+subject+"\n_______________\nMessage:\n"+msg+"\n_______________\nSend?"))) {
    document.getElementById("form").submit();
    }
    else {
    alert("Type in your message before previewing.");
    }
    }
    thanks

    and martijntje, i dont understand your method (im new to js). ill probably stick with glenngv's, but thanks anyway.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,050
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Make the preview() function return true or false.

    Code:
    <input type="submit" value="Preview" onclick="return preview();" />
    ...
    function preview() {
      var name = document.getElementById("name").value;
      var email = document.getElementById("email").value;
      var url = document.getElementById("url").value;
      var subject = document.getElementById("subject").value;
      var msg = document.getElementById("message").value;
    
      if (!msg){
        alert("Type in your message before previewing.");
        return false;
      }
      else {
        return confirm("Message Preview-\n\nName:\n"+name+"\n_______________\nEmail:\n"+email+"\n_______________\nWebsite:\n"+url+"\n_______________\nSubject:\n"+subject+"\n_______________\nMessage:\n"+msg+"\n_______________\nSend?");
      }
    }
    When false is returned, the form submission is cancelled, otherwise, submission continues and triggers onsubmit handler.


  •  

    Posting Permissions

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