...

View Full Version : How to set Property of Form Fields



WebPlaya
11-15-2002, 03:21 PM
Hello guys, I wasn't sure if this is the right place to post this question or not and if not then I am sorry.

I need to create a form that has 2 radio buttons and 3 Fields.

The radio buttons are “yes” and “no”.

Well, when you first come to the page, the form order is

Radio button 1: Yes
Radio button 2: No

FIELD 1 : which takes 15 (not more not less) numeric characters.
FIELD 2 : which takes 20 (not more not less) numeric characters
and the first 4 characters have to be “8931”.
FIELD 3 : which takes 11 (not more not less) numeric characters.

And then “Submit”, “Clear”, and “Cancel” buttons.

So when you come the page, all three fields are grayed out. You can not put anything unless one of the radio button is marked.

-- When you pick yes radio button, all three fields become alive and you can put the numbers in there.

-- If you pick no, only first and second fields become alive and you can put the numbers in there.

When you click the “Submit” button, it should check that all FIELDS contains only numeric values, first FIELD contains 15 characters (not more not less), second FIELD contains 20 characters (not more not less) and starts with "8931", and if third FIELD is available then check that it only contains 11 characters (not more not less).

I know it’s quite a lot to ask but I am kind of a apprentice and don’t know how to get to the end. So I was hoping any of you can help me out. If there are any tutorials for this then please give a link to that too so I can use that for future reference and don’t have to keep on posting questions like this. And if someone already has this kind of a form done and is handy then please email it at athakkar@yahoo.com (I appreciate any help more than anything)

Thank you so much in advance.

joh6nn
11-15-2002, 09:32 PM
i'm going to suggest that instead of using two radio buttons for your "yes / no" option, you use a checkbox, which is specifically designed for yes or no situations.

input boxes have a maxlength attribute, which you can set as a number of characters that can be entered. unfortunately, the only way to specify which kinds of characters can be entered, and what the minimum length is, is to use javascript.

WebPlaya
11-15-2002, 10:43 PM
The reason why I need to use radio buttons is because I don't want the user to check both of them. I mean either they can click yes or no. And if I use check box then I guess there is no way to prevent them to choose only one.

I did think that I was going to have to use javascript but when it comes to javascript the only thing I can do is manipulate it. I have such a hard time creating something on my own unless I have some guidence.

Thanks for the reply joh6nn. And any help is welcome and greately appreciated.

WebPlaya
11-15-2002, 10:58 PM
I found this script on dynamicdrive that checks if all the fields are filled or not.
http://www.dynamicdrive.com/dynamicindex16/requiredcheck.htm

and this script will allow me to limit the characters in the fields.
http://www.dynamicdrive.com/dynamicindex16/limitinput.htm

However, there are still few parts that are missing and I still can't figure out how to finish this puzzle.

Any help?

zoobie
11-15-2002, 11:21 PM
Try being specific and post your code. :D

WebPlaya
11-16-2002, 02:52 PM
Sorry, but if you read the first post you'll know what my question is.
And about posting the code, it's just a simple form right now with 2 radio buttons, 3 fields, and submit, clear, and cancel buttons.
I don't know how to put the javascripts in there to make it work. :(
Please Help!!

mhere
11-16-2002, 04:53 PM
simple way to limit the content of a field:
<input maxlength=15>

for validating the fields you will have to use any javascript form validation

whammy
11-18-2002, 02:01 AM
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Validation Example</title>
<script type="text/javascript">
<!--
function valform(f){
var errormsg = "";
var focusfield = "";
if(!/^\d{15}$/.test(f.field1.value)){
errormsg += "Please enter 15 numeric characters in Field 1.\n";
if(focusfield == "") focusfield = "field1";
}
if(!/^8931\d{16}$/.test(f.field2.value)){
errormsg += "Please enter 20 numeric characters in Field 2 starting with \"8931\".\n";
if(focusfield == "") focusfield = "field2";
}
if(f.enablefield3.checked == true && !/^\d{11}$/.test(f.field3.value)){
errormsg += "Please enter 11 numeric characters in Field 3.\n";
if(focusfield == "") focusfield = "field3";
}
if(errormsg != ""){
alert("Please correct the following errors:\n\n" + errormsg);
eval("f." + focusfield + ".focus()");
return false;
}
else{
return true;
}
}
// -->
</script>
</head>
<body>
<form id="exampleform" action="exampleform.htm" onsubmit="return valform(this)">
<div>
<input type="checkbox" name="enablefield3" value="Yes" />Enable Field 3.<br />
<input type="text" name="field1" size="20" maxlength="15" value="" /> Field 1<br />
<input type="text" name="field2" size="20" maxlength="20" value="" /> Field 2<br />
<input type="text" name="field3" size="20" maxlength="11" value="" onblur="if(this.form.enablefield3.checked == false){this.value = this.defaultValue}" /> Field 3<br />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</div>
</form>
</body>
</html>


I don't think any validation script could match the requirements you posted any more exactly (minus the unnecessary radio buttons).

No use really disabling the third field (until people no longer use NS 4.X, since "disabled" doesn't work in that browser...), just delete anything they might put in there unless they agree to the checkbox... also, what is a "cancel" button supposed to do? Reset clears the form. :confused:

I used a checkbox, since it is either checked or not (as suggested above), which satisfies the "yes/no" condition that two radio buttons would otherwise be required to achieve.

P.S. That "/^8931\d{16}$/" mumbo-jumbo is called a "Regular Expression". Regular Expressions (otherwise known as "RegEx") are one of the most powerful (and simple) validation tools available, and any good programming language uses them, not just javascript. See this link for more info:

http://www.siteexperts.com/tips/functions/ts23/page1.asp

Also, FYI, the best forum to post this in would have been the javascript programming forum.

Hope this helps... :)

If for some reason (which I would hope is not the case, since you were pretty clear in your explanation) this doesn't do what you're trying to do, please let me know.

:D

WebPlaya
11-18-2002, 03:11 AM
Hi whammy, how are you? First of all, I like to apologies for not replying sooner. I kinda got caught up with work. Second of all, I don't know how to thank you for taking time and helping me with this form. This is exactly how I wanted and you made it to work!!

May be my ideas were little too extreme but your solution is much more logical and better. I really have not enough words to appreciate you taking time and doing this. If there is a way I could repay then please let me know. (At least then I won't feel guilty)

I have done C++ and I have done something like this in VB too but I am new to javascript and totally ignorant to the methods of javascript so please excuse me for that.

The link is very educational and just by taking a glance at it, I learned lots of stuff ie. the use of ^ $ \b and \B. And you are right, I should have posted my question in Javascript section but I wasn't sure.

Once again, thank you very much and thanks a lot for helping.

whammy
11-18-2002, 03:21 AM
Your thanks and very kind compliments are more than enough. :)

You never know, I might need to learn some C++ stuff from you in the future. ;)

P.S. Let us know if you're looking for additional validation or any methods to acheive it. That is just one solution out of many. :D

WebPlaya
11-18-2002, 03:24 AM
I don't think so... I am sure you can open the C++ book, knock it down in few hours and then you can beat me in that too!! :)

whammy
11-18-2002, 03:25 AM
Heh... well let's hope your prediction comes true, I am not learning C++ but I have to master .NET for my MCAD certification, and it does not look easy. :eek:

WebPlaya
11-18-2002, 03:28 AM
By the way, I am trying to combine these two scripts. I mean the solution you gave me and then I got this script from DynamicDrive which is for to disable the submit button once you hit it. and this is how the form tag looks like, please correct me if I am wrong.

<form id="exampleform" action="exampleform.htm" onsubmit="return valform(this)"; "submitonce(this)" >

where "submitonce(this)" function is in the head section which looks like

<script>

function submitonce(theform){
//if IE 4+ or NS 6+
if (document.all||document.getElementById){
//screen thru every element in the form, and hunt down "submit" and "reset"
for (i=0;i<theform.length;i++){
var tempobj=theform.elements[i]
if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset")
//disable em
tempobj.disabled=true
}
}
}
</script>

(I only pasted the function and not the comments in my reply becasue i didn't want to take any space, however the comments are still there in the code)

WebPlaya
11-18-2002, 03:29 AM
...

whammy
11-18-2002, 03:30 AM
Hmm, what are you trying to accomplish with the provided code?

If you want to disable the submit button once you hit it, I don't understand what you are trying to accomplish, since the validation I provided shouldn't let the form be submitted unless it meets your requirements. :)

P.S. I don't use AIM, but I use Yahoo or MSN messenger...

WebPlaya
11-18-2002, 03:33 AM
you are right, however, some people are still using 56K or on the other hand the server is slow due to traffic so once hitting the submit button it might take few seconds to come up the next page and i don't want the user to keep on hitting submit over and over which can result in multiple copies

whammy
11-18-2002, 03:37 AM
Is this script updating a server-side database?

If so, I would actually scrap everything we just talked about and validate your form input using whataver server-side language you're using, since you never know whether the client's machine has javascript enabled (unless you check for it server-side).

You can use javascript to preserve bandwidth, but if that's the case I would validate redundantly using server-side validtion.

:confused:

whammy
11-18-2002, 03:38 AM
Either way, you can set a variable or some kind of flag (or even a database value) to "true" or "1" or "posted" or whatever, to make sure that they don't submit the same information again.

:D

WebPlaya
11-18-2002, 03:44 AM
it's just a form that is being mailed with the values and then from the froms, the data is being taken and being entered manually in the server. now since we receive over 500 forms a day it's just impossible to keep track of every form if it's a duplicate copy of other form...

so once this script can work with your solution it's fine. but then the question is if the user has javascript enabled.

and you are right, for that i'll have to use server side scripting which i don't think i want to do that becasue the forms are just simply being mailed once they are submitted.

and most of our clients have js enabled or that's what i have been told so i don't see if there should be any problem. and even if it is not, there will be fewer duplicate forms than what we receive right now.

whammy
11-18-2002, 03:47 AM
Yeah, it isn't too hard to set some kind of flag or something, but I would just go with that if you're not using a server-side language to validate the form submission - at least for now.

If you end up handling a lot of data, and/or want to format the text of email messages, etc. you will probably want to use ASP, PHP, Perl/CGI, or ASP.NET though. And get familiar with relational databases.

http://hotwired.lycos.com/webmonkey/backend/databases/

:)

WebPlaya
11-18-2002, 03:53 AM
you know, every links that you have posted so far has been really helpfull. :) Thank you for that.

Also, if you could tell me, is this the right syntex for calling 2 function on submit?

<form id="exampleform" action="exampleform.htm" onsubmit="return valform(this)" ; "submitonce(this)" >

whammy
11-18-2002, 03:54 AM
<form id="exampleform" action="exampleform.htm" onsubmit="return valform(this); submitonce(this)" >

WebPlaya
11-18-2002, 03:55 AM
and about using a database, well.. it's only a short term project, and once we have all the information from clients we won't be needing this anymore because they already have the database created. it's just a matter of gettin the data from them and putting it in the system.

they figured it was too expnasive to link the form and the database than just having few people put it manually. so they decided to do it the old fashion way.. lol..

WebPlaya
11-18-2002, 03:57 AM
awesome.. you are the best... man.. :) thank you so much for your help and I trully appreciate it.

and sorry that you had to put with my stupid questions. let me finish this up.. so i can go to sleep.. got a long day tomo

once again.. thank you so much!!

whammy
11-18-2002, 04:12 AM
Glad I could help. :)

I owe my start to my new career to this forum's predecessors, so I gotta pay back when I can. ;)

whammy
11-20-2002, 12:22 AM
I don't know if you're still responding to this thread, but check this out:



<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Validation Example</title>
<script type="text/javascript">
<!--
var submitted = false; // Submit only once!
function valform(f){
if(submitted == false){
var errormsg = "";
var focusfield = "";
if(!/^\d{15}$/.test(f.field1.value)){
errormsg += "Please enter 15 numeric characters in Field 1.\n";
if(focusfield == "") focusfield = "field1";
}
if(!/^8931\d{16}$/.test(f.field2.value)){
errormsg += "Please enter 20 numeric characters in Field 2 starting with \"8931\".\n";
if(focusfield == "") focusfield = "field2";
}
if(f.enablefield3.checked == true && !/^\d{11}$/.test(f.field3.value)){
errormsg += "Please enter 11 numeric characters in Field 3.\n";
if(focusfield == "") focusfield = "field3";
}
if(errormsg != ""){
alert("Please correct the following errors:\n\n" + errormsg);
eval("f." + focusfield + ".focus()");
return false;
}
else{
submitted = true;
return true;
}
}
else{
alert('Please be patient, your form has already been submitted.');
}
}
// -->
</script>
</head>
<body>
<form id="exampleform" action="exampleform.htm" onsubmit="return valform(this)">
<div>
<input type="checkbox" name="enablefield3" value="Yes" onclick="if(this.checked == false){this.form.field3.value = ''}"/>Enable Field 3.<br />
<input type="text" name="field1" size="20" maxlength="15" value="" /> Field 1<br />
<input type="text" name="field2" size="20" maxlength="20" value="" /> Field 2<br />
<input type="text" name="field3" size="20" maxlength="11" value="" onfocus="if(this.form.enablefield3.checked == false){this.blur()}" /> Field 3<br />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</div>
</form>
</body>
</html>


I added a flag so if they try to submit the form again, it alerts a warning. I also added additional scripting to prevent people from typing in the third field if they have checked and unchecked the box.

:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum