Jump to content

Two Functions On Submit?


Recommended Posts

Okay, I'm making a different form, and this time, I would like to have the form both validate the entries and have a pop up or an alert that if you put in all the entries correctly, it will say thank you as if it submitted elsewhere. Problem is, I can't make the button work.

<script>function checkforblank() {var errormessage="";var email = document.getElementById('email').value;var elength = email.length;var atpos = email.indexOf('@');var atdot = email.lastIndexOf('.');var tld = email.substring(atdot);if (document.getElementById('fname').value == "") {  errormessage += "Enter your first name\n";  document.getElementById('fname').style.borderColor = "blue";  } if (document.getElementById('phone').value == "") {  errormessage += "Enter your phone number\n";  document.getElementById('fname').style.borderColor = "blue";  }if (document.getElementById('email').value == "") {  errormessage += "Enter an email\n";  document.getElementById('email').style.borderColor = "blue";  } if (atpos < 1 || atdot < 1) {  errormessage += "E-mail is not valid\n";  document.getElementById('email').style.borderColor = "blue";  }  else if (atpos > atdot) {   errormessage += "E-mail is not valid\n";   document.getElementById('email').style.borderColor = "blue";  }if (document.getElementById('message').value == "") {  errormessage += "Enter a message\n";  } if (errormessage !="") {  alert (errormessage);  return false;  }}</script>

<form method="post" action="success.html" onSubmit="return checkforblank()"><label>First Name:<input type="text" id="fname" name="fname"></label><br><label>Phone:<input type="text" id="phone" name="phone"></label><br><label>Email:<input type="text" id="email" name="email"></label><br><label>Message:<b><textarea name="message" id="message" name="message" rows="5" cols="50"></textarea></label><input type="submit" value="Send!"></form>

If I put a webpage in the action, it will obviously load in the current window, but if I use target_blank, it doesn't work. What am I doing wrong? Is it even possible to do what I want? Thanks!

Link to post
Share on other sites

Seems to work for me. The only thing is, the second If statement, for phone, you have fname there instead of phone for document.getElementById.(If what you're trying to do is light up the border for missed fields).When all is well, the form will return true, thus submitting to the success.html page.

Link to post
Share on other sites

What I wanted was if the form was correct, the user gets a "thank you" page. If it wasn't correct according to the validation, then it would have an alert. Is that possible? I was also thinking of making the "thank you" an alert but I don't know why its not working.

Link to post
Share on other sites

Yes it's possible. One way is you can have the action attribute of the form element set to a thank you page. If it's not correct, you can send an alert and return false so that the form isn't submitted and remains on the same page until the user enters the required fields with accurate info.Another way instead of the form action attribute being set to a thank you page, you can use the window.open() function in JavaScript. If validation is all correct, you can use that function to open a window that sends them to a thank you page.Here's link to window.open method: http://w3schools.com/jsref/met_win_open.asp Has some examples if you scroll down a bit. The second way is probably more recommended since the form action attribute really has to do with processing the form-data when the form is submitted to a server side language like PHP, ASP, etc.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...