469,347 Members | 20,428 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,347 developers. It's quick & easy.

Javascript to check req fields on button click

200 100+
Good day, I urgently need help.

I need to check all fields have values on click of button.

The button already has a command but i need to check / run through the page for required fields.

On find a blank required field then display message else continue with button next command.

If possible, maybe something that continues check on the form & display text this is required before making button visibe?

I need to get this going else my project is screwed.

Regards
Jan 18 '10 #1

✓ answered by larztheloser

Hey ismailc,

The approach to use is, when the button is clicked, to get it to run a java script function. I gather you're already doing this. This function checks each form element, to see whether it is empty. Let me show you an example from a website I built recently.

The form (the important part) looked like this:
Expand|Select|Wrap|Line Numbers
  1. Name:<input type="text" name="contact"><br>
  2. <textarea rows="10" cols="60" name="feedback"></textarea><br>
  3.  
The code (part of it) looked like this:
Expand|Select|Wrap|Line Numbers
  1. function validate()
  2. {
  3. input1=document.forms[0].contact.value;
  4. input2=document.forms[0].feedback.value;
  5. if(input1=="")
  6. {
  7. alert("Please provide your contact details");
  8. }
  9. else if(input2=="")
  10. {
  11. alert("You have posted no comments!");
  12. }
  13. else
  14. {
  15. document.forms[0].submit()
  16. }
  17. }
  18.  
Of course, here the button is always visible - to make a dynamically appearing button is harder, but since you sound like you're in a bit of a hurry this should be find.

Your button to call the function could be a link or a HTML button. Remember also to give the form somewhere to submit to.

regards,
lars

7 2587
Hey ismailc,

The approach to use is, when the button is clicked, to get it to run a java script function. I gather you're already doing this. This function checks each form element, to see whether it is empty. Let me show you an example from a website I built recently.

The form (the important part) looked like this:
Expand|Select|Wrap|Line Numbers
  1. Name:<input type="text" name="contact"><br>
  2. <textarea rows="10" cols="60" name="feedback"></textarea><br>
  3.  
The code (part of it) looked like this:
Expand|Select|Wrap|Line Numbers
  1. function validate()
  2. {
  3. input1=document.forms[0].contact.value;
  4. input2=document.forms[0].feedback.value;
  5. if(input1=="")
  6. {
  7. alert("Please provide your contact details");
  8. }
  9. else if(input2=="")
  10. {
  11. alert("You have posted no comments!");
  12. }
  13. else
  14. {
  15. document.forms[0].submit()
  16. }
  17. }
  18.  
Of course, here the button is always visible - to make a dynamically appearing button is harder, but since you sound like you're in a bit of a hurry this should be find.

Your button to call the function could be a link or a HTML button. Remember also to give the form somewhere to submit to.

regards,
lars
Jan 18 '10 #2
ismailc
200 100+
Thank You very much, I'll start now...

Is there a way to decorate the display the message.

To maybe change the font & have a OK Button on message

Please help - i'll get back soon on the validate
Jan 18 '10 #3
RamananKalirajan
607 512MB
You can have a dedicated div for showing the error messages or success message. In the body you can have a "onmousedown" listener and clear the content of the div

Ex:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE> New Document </TITLE>
  5. <META NAME="Generator" CONTENT="EditPlus">
  6. <META NAME="Author" CONTENT="Ramanan Kalirajan">
  7. <META NAME="Keywords" CONTENT="Demo">
  8. <META NAME="Description" CONTENT="Demo">
  9. <style type="text/css">
  10. html, body
  11. {
  12.     height: 100%;
  13.     width: 100%;
  14.     margin: 0px;
  15.     width: 0px;
  16.     overflow: auto;
  17.     font-family: arial;
  18.     font-size: 11px;
  19. }
  20. body{
  21.     overflow: hidden;
  22. }
  23.  
  24. .errorDiv{
  25.     color: #FF0000;
  26.     height: 24px;
  27.     width: 100%;
  28.     float:left;
  29.     font-weight: bold;
  30.     text-align: center;
  31. }
  32.  
  33. </style>
  34. </HEAD>
  35. <BODY onmousedown="document.getElementById('errorMsg').innerHTML='';">
  36. <div id="errorMsg" class="errorDiv">
  37.     &nbsp;
  38. </div>
  39. <input type="button" value="Show Message" onclick="document.getElementById('errorMsg').innerHTML='This is a Sample Message';">
  40. </BODY>
  41. </HTML>
Thanks and Regards
Ramanan Kalirajan
Jan 18 '10 #4
ismailc
200 100+
Thank You this works great.

Thanks - I realized the message box is better as the user will have to read the message

Any suggestions on displaying an information message box which has a info icon on with an ok button. Also change the font of the message box.


Expand|Select|Wrap|Line Numbers
  1. <SCRIPT TYPE='text/javascript'>
  2. function validate()
  3. {
  4.   input1=document.getElementById('VE1020User').value;
  5.   input2=document.getElementById('VE1085NewVSite').value;
  6.  
  7. if(input1=="")
  8. {
  9.   alert("Please provide your contact details");
  10. }
  11. else if(input2=="")
  12. {
  13. alert("You have posted no comments!");
  14. }
  15. else
  16. {
  17.   document.getElementById('VE10999Done').click();
  18.   document.getElementById('___Submit').click();
  19. }
  20. }
  21. </SCRIPT>
  22.  
  23.  
Jan 18 '10 #5
RamananKalirajan
607 512MB
You can't change the font-style or size of the alert box. For that you have to create your own message boxes with your own styles.


Thanks and Regards
Ramanan Kalirajan
Jan 18 '10 #6
acoder
16,027 Expert Mod 8TB
Where you submit programmatically:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('___Submit').click();
can be replaced by
Expand|Select|Wrap|Line Numbers
  1. return true;
if you call it from the form onsubmit event.

One other thing to consider: you could provide immediate visible feedback by having messages next to the input which appear when focus is removed from an input box.
Jan 18 '10 #7
ismailc
200 100+
Thank You :) I will give it a try
Jan 18 '10 #8

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by RobG | last post: by
8 posts views Thread by chrisdude911 | last post: by
7 posts views Thread by julian.tklim | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.