|
|
so i have my code working....mostly.
This is a form, where i use javascript that toggles table visibility to hide/show 2 separate forms. I also use form validation based on which form is visible. My problem is that the radio buttons used to hide/show the tables are using the OnClick event...and will toggle visibility regardless of checked status. So the end user can click the same radio button more than once and toggle the forms...which i do not want. Here's my code, i'm still pretty new to javascript so any help is appreciated.
<script type="text/javascript">
function toggle(){
var table1 = document.getElementById('rUser')
var table2 = document.getElementById('nUser')
if (table1.style.display == 'none') {
table1.style.display = 'block';
table2.style.display = 'none';
} else {
table2.style.display = 'block';
table1.style.display = 'none';
}
}
//first name
function validateEmptyFirstName(fld) {
var error = "";
if (fld.value.length == 0) {
fld.style.background = 'Red';
error = "First Name Required.\n"
} else {
fld.style.background = 'White';
}
return error;
}
//last name
function validateEmptyLastName(fld) {
var error = "";
if (fld.value.length == 0) {
fld.style.background = 'Red';
error = "Last Name Required.\n"
} else {
fld.style.background = 'White';
}
return error;
}
//Address
function validateEmptyAddress(fld) {
var error = "";
if (fld.value.length == 0) {
fld.style.background = 'Red';
error = "Address Required.\n"
} else {
fld.style.background = 'White';
}
return error;
}
//City
function validateEmptyCity(fld) {
var error = "";
if (fld.value.length == 0) {
fld.style.background = 'Red';
error = "City Required.\n"
} else {
fld.style.background = 'White';
}
return error;
}
//State
function validateEmptyState(fld) {
var error = "";
if (fld.value.length == 0) {
fld.style.background = 'Red';
error = "State Required.\n"
} else {
fld.style.background = 'White';
}
return error;
}
//zip
function validateEmptyZip(fld) {
var error = "";
if (fld.value.length == 0) {
fld.style.background = 'Red';
error = "Zip Required.\n"
} else {
fld.style.background = 'White';
}
return error;
}
//function validating Email address
function trim(s)
{
return s.replace(/^\s+|\s+$/, '');
}
function validateEmail(fld) {
var error="";
var tfld = trim(fld.value); // value of field with whitespace trimmed off
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
if (fld.value == "") {
fld.style.background = 'Red';
error = "Email Required.\n";
} else if (!emailFilter.test(tfld)) { //test email for illegal characters
fld.style.background = 'Yellow';
error = "Please enter a valid email address.\n";
} else if (fld.value.match(illegalChars)) {
fld.style.background = 'Yellow';
error = "The email address contains illegal characters.\n";
} else {
fld.style.background = 'White';
}
return error;
}
//function validating phone number field
function validatePhone(fld) {
var error = "";
var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');
if (fld.value == "") {
error = "Phone Number Required.\n";
fld.style.background = 'Red';
} else if (isNaN(parseInt(stripped))) {
error = "The phone number contains illegal characters.\n";
fld.style.background = 'Yellow';
} else if (!(stripped.length == 10)) {
error = "The phone number is the wrong length. Make sure you included an area code.\n";
fld.style.background = 'Yellow';
}
return error;
}
//validate form onSubmit
function validateFormOnSubmit(theForm) {
var rad1 = document.getElementById('nUser')
var rad2 = document.getElementById('rUser')
var reason = "";
if (rad1.style.display == 'block') {
reason += validateEmptyFirstName(theForm.first_name);
reason += validateEmptyLastName(theForm.last_name);
reason += validateEmptyAddress(theForm.street);
reason += validateEmptyCity(theForm.city);
reason += validateEmptyState(theForm.state);
reason += validateEmptyZip(theForm.zip);
reason += validateEmail(theForm.email);
} else {
reason += validateEmail(theForm.email2);
}
if (reason != "") {
alert("Some fields need correction:\n" + reason);
return false;
}
return true;
}
</script>
the html is as follows:
<form action="/forum/ccpay.html" runat="server" onsubmit="return validateFormOnSubmit(this)" method="POST" name="Form1">
<fieldset>
<legend>
<input type="radio" name="change" onclick="toggle()" checked="checked" />New User?
<input type="radio" name="change" onclick="toggle()" /> Returning User?
</legend>
<table id="rUser" style="display:none;">
<tr>
<td colspan="2">
<center>
<label for="email">Email:<b class="required">*</b></label>
<input name="email2" id="email2" runat="server" size="20" maxlength="125" />
<input type="submit" value="Submit" />
</center>
</td>
</tr>
</table>
<table id="nUser">
<tfoot>
<tr>
<td colspan="2">
<center>
<input type="reset" value="reset" />
<input type="submit" value="Submit" />
</center>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td style="height: 25px">
<label for="first_name">First Name:<b class="required">*</b></label>
<input name="first_name" id="first_name" runat="server" size="20" maxlength="50" />
</td>
<td style="height: 25px">
</td>
</tr>
there is more to the form but this gives you the jist of how it's working.
thanx
|
|
|
|
You could add:
document.getElementById('nUser').setAttribute('checked','checked') to your toggle() function so the box gets checked when it's clicked, and the other one gets checked when the other box is clicked.
|
|
|
|
the radio buttons are working...checked/unchecked. what happens is even if a radio button is checked, i can click on it a second time(it remains checked)yet it toggles visibility again.
|
|
|
|
Update... I decided to switch and use only one radio button and just have the title text change as well w/ the toggle function.
Code
function toggle(){
var table1 = document.getElementById('rUser')
var table2 = document.getElementById('nUser')
var span1 = document.getElementById('hSpan')
var span2 = document.getElementById('fSpan')
if (table1.style.display == 'none') {
table1.style.display = 'block';
table2.style.display = 'none';
span1.innerHTML = 'title at head of form';
span2.innerHTML = 'label next to radio button';
} else {
table2.style.display = 'block';
table1.style.display = 'none';
span1.innerHTML = 'new title at head of form';
span2.innerHTML = 'new label next to radio button';
}
}
new question... after the initial click, the radio button remains checked. I would like to make the radio button remain empty...
|
|
|
|
sorry...i'm learning as i go along...fyi added
document.getElementById('radio button id').checked = false; to both events and that worked. thanks
|
|
|
|
^_^
Good job.
I am still learning as well .. Hense me joining this forum.. xD
Haven't found any free website hosts yet though >.<
Lol.
Good luck with yours, [x
|
|
|
|
|
|
|
|
Today I found a wonderful website,the site contained:
wedding dresses
cheap wedding dresses
Junior Bridesmaid Dresses
Cheap Homecoming Dresses
Cheap Quinceanera Dresses
Inexpensive bridesmaid dresses
Wholesale wedding dress
Wholesale wedding dress
Discount wedding dresses
Cheap Maternity Wedding Dresses
A-Line Wedding Dresses
Cheap Couture Wedding Dresses
Cheap Beach Wedding Dresses
Cheap Casual Wedding Dresses
Cheap Simple Wedding Dresses
Cheap Modest Wedding Dresses
Cheap Special Occasion Dresses
Cheap Evening Dresses
Cheap Prom Dresses
Cheap Little Black Dresses
Cheap Plus Size Wedding Dresses
Pink Wedding Dresses
Cheap Wedding Party Dresses
Cheap Bridesmaid Dresses
Cheap Flower Girl Dresses
Cheap Mother of the Bride Dresses
victoria's secret,
cheap wedding dresses,wholesale wedding dress,Wedding dresses 2011,Plus Size Wedding Dress wholesale,Couture Wedding Dress wholesale,Formal Wedding Dress wholesale,Bridesmaid Dresses wholesale,Discount Bridesmaid Dress wholesale,Junior Bridesmaids Dresses wholesale,Maternity Bridesmaid Dress wholesale,Cocktail Dress wholesale,Prom Dress wholesale,Evening Dress wholesale,Sexy Evening Dress wholesale,Stardoll Dress wholesale,Quinceanera Dress wholesale,Mother of the Bride Dress,Flower Girl Dress,Wedding Accessories wholesale
|
|
|
|
|
|
|
|
 child's louis vuitton bags tract.The shoe, clogs, and sandals which could possibly be made by Dankso producer usually are meant for gucci outlet put on for that extended term.If you are buying Dankso shoe, clogs, and sandals, you will comprehend lv bags you simply are acquiring a thing order. With sizes that contemplate length, width, and color specifications gucci sunglasses will locate a really perfect shoe for louis vuitton handbags about any person, as well as for just about any gucci shoes occasion.Whether you are searching for open-toed sandals, tightly lacing hiking sandals, or relaxing lv handbags sandals, you can obtain a few Dansko's that fits your wants. shoe, clogs, and sandals also appear in gucci outlet shoes several types
|
|
|
|
|
|
|
|
kaydance
