473,386 Members | 1,720 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

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 2767
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
608 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
608 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

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

Similar topics

8
by: Sue | last post by:
Hello! I am back with another question. Remember I am a new JavaScript student and I am aware that this code does not check for all the possibilities and that as a "NEW" JavaScript student I am...
5
by: RobG | last post by:
I am trying to get users to fill in a form on a web page, then click a button to send an e-mail. I am using JavaScript to get the fields from the form, then run a mailto command to put the...
4
by: John Boy | last post by:
Hi, Can anyone help. This is really doing my nut in. 3 years ASP exp. and now doing .DOT which is a step in the wrong direction. Basically I am left with the code of a guy who has left. When I...
8
by: chrisdude911 | last post by:
how do i add video into a javascript web page with my own custom buttons?
5
by: mk | last post by:
Greetings all - im new to this newsgroup so pls dont flame me :p I need some help! Please view the html below in a browser. Or goto this url -http://firebrain.co.uk/java-problem.htm (Assuming...
7
by: julian.tklim | last post by:
Hi, I need to build an editable Datagrid with add & delete buttons on each row using javascript. DataGrid need not be pre-populated with values. To make the thing complicated, one of the...
1
by: anniefs | last post by:
hi help me i m so much stuck int he code and i have no time .... i used ASP VBscipt and javascript functions with MS database javascript function add records in MS DB by using ASP vbscript...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.