Multi page webform validation - javascript

Problem:
I have created a webform in Business Catalyst which I have customized so that I have multiple instances of it on a static page.
First I created several divs that will contain parts of the form:
<form name="catwebformform23079" method="post" onsubmit="return checkWholeForm23079(this)" enctype="multipart/form-data" action="/FormProcessv2.aspx?WebFormID=446040&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}"> <span class="req">*</span> Required
{module_ccsecurity}
<div class="web1"><label for="CAT_Custom_1433316">ARRIVAL <span class="req">*</span>
</label>
<br />
<input type="text" name="CAT_Custom_1433316" id="dpd1" class="cat_textbox" readonly="readonly" onfocus="displayDatePicker('CAT_Custom_1433316');return false;" />
<label for="CAT_Custom_1433317">DEPARTURE <span class="req">*</span>
</label>
<br />
<input type="text" name="CAT_Custom_1433317" id="dpd2" class="cat_textbox" readonly="readonly" onfocus="displayDatePicker('CAT_Custom_1433317');return false;" />
<label for="CAT_Custom_1433318">Bedrooms: <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433318" id="CAT_Custom_1433318" style="width:100%;" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<label for="CAT_Custom_1433319">Adults <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433319" id="CAT_Custom_1433319" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select></div>
<div class="web2"> <label for="CAT_Custom_1433320">Children <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433320" id="CAT_Custom_1433320" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<label for="CAT_Custom_1433321">Pets <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433321" id="CAT_Custom_1433321" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<label for="CAT_Custom_1433324">Parking <span class="req">*</span>
</label>
<br />
<select name="CAT_Custom_1433324" id="CAT_Custom_1433324" style="width:100%;" class="pretty-select">
<option value=""></option>
<option value="Yes">Yes</option>
<option selected="selected" value="No">No</option>
</select>
</div>
<div class="web3"><label for="CAT_Custom_1433322">Name <span class="req">*</span>
</label>
<br />
<input type="text" maxlength="4000" name="CAT_Custom_1433322" id="CAT_Custom_1433322" class="cat_textbox" />
<label for="CAT_Custom_1433323">Surname <span class="req">*</span>
</label>
<br />
<input type="text" maxlength="4000" name="CAT_Custom_1433323" id="CAT_Custom_1433323" class="cat_textbox" />
<label for="WorkPhone">Work Phone Number <span class="req">*</span>
</label>
<br />
<input type="text" name="WorkPhone" id="WorkPhone" class="cat_textbox" maxlength="255" />
<label for="EmailAddress">Email Address <span class="req">*</span>
</label>
<br />
<input type="text" name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" />
<input class="cat_button" type="submit" value="Submit" id="catwebformbutton" />
</div>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js?vs=b1677.r461496-phase1"></script>
<script type="text/javascript" src="/CatalystScripts/Java_DatePicker.js?vs=b1677.r461496-phase1"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount23079 = 0;
function checkWholeForm23079(theForm) {
var why = "";
if (theForm.WorkPhone) why += isEmpty(theForm.WorkPhone.value, "Work Phone Number");
if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);
if (theForm.CAT_Custom_1433316) why += checkDate(theForm.CAT_Custom_1433316.value, "ARRIVAL");
if (theForm.CAT_Custom_1433317) why += checkDate(theForm.CAT_Custom_1433317.value, "DEPARTURE");
if (theForm.CAT_Custom_1433318) why += checkDropdown(theForm.CAT_Custom_1433318.value, "Bedrooms:");
if (theForm.CAT_Custom_1433319) why += checkDropdown(theForm.CAT_Custom_1433319.value, "Adults");
if (theForm.CAT_Custom_1433320) why += checkDropdown(theForm.CAT_Custom_1433320.value, "Children");
if (theForm.CAT_Custom_1433321) why += checkDropdown(theForm.CAT_Custom_1433321.value, "Pets");
if (theForm.CAT_Custom_1433324) why += checkDropdown(theForm.CAT_Custom_1433324.value, "Parking");
if (theForm.CAT_Custom_1433322) why += isEmpty(theForm.CAT_Custom_1433322.value, "Name");
if (theForm.CAT_Custom_1433323) why += isEmpty(theForm.CAT_Custom_1433323.value, "Surname");
if (why != "") {
alert(why);
return false;
}
if (submitcount23079 == 0) {
submitcount23079++;
theForm.submit();
return false;
} else {orm.CAT_Custom_1433321) why
alert("Form submission is in progress.");
return false;
}
}
//]]>
</script>
As you can see the website is broken down into 3 parts: .web1 .web2 .web3
I also have buttons #hide1 #hide2 that hide and replace .web1 and .web2
// JavaScript Document
$('#hide').click(function(){
if($.trim($('.web1 :input').val()) == ''){
$.each().alert('PLEASE FILL IS ALL FIELDS.');
}
else {
$(".web1").hide();
$(".web2").show();
$("#hide").hide();
$("#hide2").show();
}
}
);
// JavaScript Document
$('#hide2').click(function(){
if($.trim($('.web2 :input').val()) == ''){
$.each().alert('PLEASE FILL IS ALL FIELDS.');
}
else {
$(".web2").hide();
$(".web3").show();
$("#hide2").hide();
}
}
);
$('.web2').hide();
$('.web3').hide();
$('#hide2').hide();
As you can tell with the code when you click the buttons they are suppose to validate the input values within the div before they proceed to the next div.
I tried this but it seems not validate all of the form inputs. Any help on how I can solve this problem?

Related

I need to show different inputs with every different choices and need to the others to remain hidden

I need to show a combo box and hide other inputs and show them only when I select one of the options.
I tried this, but they don't show at all when I select something.
Tried all the thing I saw online, but they didn't solve my problem at all, I don't know why;
function showDiv() {
getSelectValue = document.getElementById("hidden").value;
if (getSelectValue == "1") {
document.getElementById("hidden").style.display = "block";
} else {
document.getElementById("hidden").style.display = "none";
}
}
<select id="select-styled">
<option selected value="">Nessuna selezione</option>
<option value="ds">Disposizioni semplici</option>
<option value="dr">Disposizioni ripetizione</option>
<option value="cs">Combinazoni semplici</option>
<option value="cr">Combinazoni ripetizione</option>
<option value="ps">Permutazioni semplici</option>
<option value="pr">Permutazioni ripetizione</option>
<option value="gs">Gestione stringa</option>
</select>
</div>
<br>
<div id="hidden" style="width:200px;" onchange="showDiv()">
<label for="nTextField">Inserire n</label><br>
<input type="text" name="textField" class="textField" id="nTextField"><br><br>
<label for="kTextField">Inserire k</label><br>
<input type="text" name="textField" class="textField" id="kTextField"><br><br>
<label for="answerTextField">Ecco la risposta</label><br>
<input type="text" name="textField" class="textField" id="answerTextField"><br><br>
<input type="text" name="textField" class="stringManagement" id="stringManagement">
</div>
You need to add onchange function on the select tag, not the div
function showDiv() {
var x = document.getElementById("select-styled").value;
if(x != "") {
document.getElementById("myDiv").style.display = "block";
// or any desired code...
}
}
<select id="select-styled" onchange="showDiv()">
<option selected value="">Nessuna selezione</option>
<option value="ds">Disposizioni semplici</option>
<option value="dr">Disposizioni ripetizione</option>
<option value="cs">Combinazoni semplici</option>
<option value="cr">Combinazoni ripetizione</option>
<option value="ps">Permutazioni semplici</option>
<option value="pr">Permutazioni ripetizione</option>
<option value="gs">Gestione stringa</option>
</select>
<br>
<div class="hidden" id="myDiv" style="width:200px; display:none">
<label for="nTextField">Inserire n</label><br>
<input type="text" name="textField" class="textField" id="nTextField" ><br><br>
<label for="kTextField">Inserire k</label><br>
<input type="text" name="textField" class="textField" id="kTextField" ><br><br>
<label for="answerTextField">Ecco la risposta</label><br>
<input type="text" name="textField" class="textField" id="answerTextField" ><br><br>
<input type="text" name="textField" class="stringManagement" id="stringManagement">
</div>
<select id="select-styled" onchange="showDiv()">
<option selected value="">Nessuna selezione</option>
<option value="ds">Disposizioni semplici</option>
<option value="dr">Disposizioni ripetizione</option>
<option value="cs">Combinazoni semplici</option>
<option value="cr">Combinazoni ripetizione</option>
<option value="ps">Permutazioni semplici</option>
<option value="pr">Permutazioni ripetizione</option>
<option value="gs">Gestione stringa</option>
</select>
<br>
<div id="hidden" style="width:200px; display:none" >
<label for="nTextField">Inserire n</label><br>
<input type="text" name="textField" class="textField" id="nTextField" ><br><br>
<label for="kTextField">Inserire k</label><br>
<input type="text" name="textField" class="textField" id="kTextField" ><br><br>
<label for="answerTextField">Ecco la risposta</label><br>
<input type="text" name="textField" class="textField" id="answerTextField" ><br><br>
<input type="text" name="textField" class="stringManagement" id="stringManagement">
</div>
<script>
function showDiv() {
document.getElementById("hidden").style.display = "block";;
}
</script>

how to enable /disable form field based on selection using php

I am create the form with for online course. if the existing student refer the student means they will get the money.
My form contain Name,Mobile No,Email Id
Give your referral details as drop down.
Eg: i select 2 in the drop-down means it show the 2 rows form data again
Referral form value contain Name,Mobile No,City,Course Name.
Based on the selection i need to show and hide multiple form fields and
I need put validation and Mobile,City and Course is mandatory field.
Then,I need to capture the refers name and assign the students are created by referrer.
When i select refer as 2 it shows the field value two times how to do it. How to put validation
$(document).ready(function(){
$('select#select_btn').change(function(){
var sel_value = $('option:selected').val();
if(sel_value==0)
{
//Resetting Form
//$("#form_submit").empty();
//$("#form1").css({'display':'none'});
}
else{
//Resetting Form
//$("#form_submit").empty();
//Below Function Creates Input Fields Dynamically
create(sel_value);
//appending submit button to form
$("#form_submit").append(
$("<input/>",{type:'submit', value:'Sumbit'})
)
}
});
function create(sel_value){
for(var i=1;i<=sel_value;i++)
{
$("div#form1").slideDown('slow');
$("div#form1").append(
$("#form_submit").append(
$("<div/>",{id:'head'}).append(
$("<h3/>").text("Refer Form"+i)),
$("<h7/>").text("Name: "),
$("<input/>", {type:'text', placeholder:'Name', name:'name_'+i}),
$("<br/>"),
$("<br/>"),
$("<h7/>").text("Mobile No: "),
$("<input/>", {type:'text', placeholder:'Mobile', name:'mobile'+i}),
$("<br/>"),
$("<br/>"),
$("<h7/>").text("Email: "),
$("<input/>", {type:'email', placeholder:'Email', name:'email_'+i}),
$("<br/>"),
$("<br/>"),
$("<h7/>").text("City: "),
$("<select>").append('<option val="0">--Select--</option>','<option val="1">One</option>','<option val="2">Two</option>','<option val="3">Three</option>','<option val="4">Four</option>','<option val="5">Five</option>'),
$("<br/>"),
$("<br/>"),
$("<h7/>").text("Course: "),
$("<select>").append('<option val="0">--Select--</option>','<option val="1">One</option>','<option val="2">Two</option>','<option val="3">Three</option>','<option val="4">Four</option>','<option val="5">Five</option>'),
$("<hr/>"),
$("<br/>")
))
}
}
});
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class ="container">
<div id="form1">
<form id="form_submit" action="#" method="post">
<p>Name:
<input type="text" name="Name" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p> Refer:
<div id="selected_form_code">
<select id="select_btn">
<option value="0">--Select--</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
<!-- dynamic Registration Form Fields Creates here-->
</form>
</div>
<!------ right side advertisement div ----------------->
</div>
<?Php
print_r($_REQUEST);
?>
when i select the refer as 2 and then it shows refer form fields 2 times.... i change refer field from 2 to 1 it shows one times of refer field.But,Now its show 3 times(2+1). How to do it....Where i did wrong????
$(document).ready(function(e) {
$("#select_btn").val('0');
$('#select_btn').change(function(e) {
var selno = $(this).val();
$('#input').empty();
for(i=0; i < selno; i++ ){
$('#input').append('<div class="input'+i+'"><h2>'+(i+1)+'</h2><p> Name: <input type="text" name="name" /> </p> <p> Mobile:<input type="text" name="mob" /></p><p>Email:<input type="text" name="email" /></p><p>City: <select id="city" name="City"><option value="Mumbai">Mumbai</option><option value="Chennai">Chennai</option><option value="Delhi">Delhi</option><option value="Jammu">Jammu</option><option value="Ooty">Ooty</option></select></p><p>Course: <select id="course" name="Course"><option value="B.com">B.com</option><option value="B.A">B.A</option><option value="MBA">MBA</option><option value="B.Sc">B.Sc</option><option value="BCA">BCA</option></select></p></div>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Toggle fields based on form values</h1>
<p>Change the age field and see what happens</p>
<div id="form1">
<form id="form_submit" action="#" method="post">
<p>Name:
<input type="text" name="Name" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Refer:
<select id="select_btn" name="refer" value="0">
<option value="0">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<div id="input">
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>
</div>
$(document).ready(function(e) {
$('#select_btn').change(function(e) {
var selno = $(this).val();
$('.input').remove();
for(i=0; i < selno; i++ ){
$('#input').append('<div class="input'+i+'"><p> Name: <input type="text" name="name" /> </p> <p> Mobile:<input type="text" name="mob" /></p><p>Email:<input type="text" name="email" /></p><p>City: <select id="city" name="City"><option value="Mumbai">Mumbai</option><option value="Chennai">Chennai</option><option value="Delhi">Delhi</option><option value="Jammu">Jammu</option><option value="Ooty">Ooty</option></select></p><p>Course: <select id="course" name="Course"><option value="B.com">B.com</option><option value="B.A">B.A</option><option value="MBA">MBA</option><option value="B.Sc">B.Sc</option><option value="BCA">BCA</option></select></p></div>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Toggle fields based on form values</h1>
<p>Change the age field and see what happens</p>
<div id="form1">
<form id="form_submit" action="#" method="post">
<p>Name:
<input type="text" name="Name" />
</p>
<p>Email:
<input type="text" name="player_email" />
</p>
<p>Mobile:
<input type="text" name="mobile" />
</p>
<p>Refer:
<select id="select_btn" name="refer">
<option >select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<div id="input">
<div class="input">
<p> Name:
<input type="text" name="name" />
</p>
<p> Mobile:
<input type="text" name="mob" />
</p>
<p>Email:
<input type="text" name="email" />
</p>
<p>City:
<select id="city" name="City">
<option value="Mumbai">Mumbai</option>
<option value="Chennai">Chennai</option>
<option value="Delhi">Delhi</option>
<option value="Jammu">Jammu</option>
<option value="Ooty">Ooty</option>
</select>
</p>
<p>Course:
<select id="course" name="Course">
<option value="B.com">B.com</option>
<option value="B.A">B.A</option>
<option value="MBA">MBA</option>
<option value="B.Sc">B.Sc</option>
<option value="BCA">BCA</option>
</select>
</p>
</div>
</div>
<p align="center">
<input type="submit" value="Join!" />
</p>
</form>
</div>

How to clear user selected values with a reset button

I need help with a reset button that will clear all the values selected or entered by the user. My code example is below. I have used JS before to reset all the values from a form but in this case i only need to clear a section of the form. My code is below: So each Fieldset has either text box or drop down.
<div class="column">
<p class="label item-information-fields">New Item</p>
<div class="item-information-fields">
<fieldset class="input-section">
<label for="tItemNickname"><span class="required">*</span>Item Name</label>
<input type="text" class="input" name="tItemNickname" id="tItemNickname" maxlength="15" />
</fieldset>
<fieldset class="input-section">
<label for="sItemType"><span class="required">*</span>Item Type</label>
<select name="sItemType" id="sItemType">
<option value="">Select</option>
<option value="1">Cash/Certificate</option>
<option value="2">Jewelry</option>
<option value="3">Clothing/Home Products</option>
<option value="4">Arts/Crafts</option>
<option value="5">Media, Music/Video</option>
<option value="6">Electronics</option>
<option value="7">Computers</option>
<option value="8">Collectibles</option>
<option value="9">Sports Equipment</option>
<option value="10">Liquor/Wine</option>
<option value="11">Animals</option>
<option value="12">Document Reconstruction</option>
<option value="13">Firearm</option>
<option value="14">Hazardous Material</option>
<option value="16">Event Tickets</option>
<option value="15">Other</option>
</select>
</fieldset>
<fieldset class="input-section hide" id="otherItemType">
<label for="tOtherItem"><span class="required">*</span>Other Item Type</label>
<input type="text" class="input" name="tOtherItem" id="tOtherItem" maxlength="15" />
</fieldset>
<fieldset class="input-section">
<label for="tItemDescription"><span class="required">*</span>Item Description</label>
<textarea class="textarea counter" name="tItemDescription" id="tItemDescription" maxlength="120"></textarea>
</fieldset>
<fieldset class="input-section input-section-short">
<label for="tPurchaseDate"><span class="required">*</span>Purchase Date (mm/dd/yyyy)</label>
<input class="input hasDatePicker enable-sundays" name="tPurchaseDate" id="tPurchaseDate" type="text" />
</fieldset>
<p class="note">If there was no purchase date, use the date the item was shipped.</p>
<fieldset class="input-section borders">
<label for="tAmountRequested"><span class="required">*</span>Amount Requested</label>
<span class="dollarWrap">
<span class="input-dollar-sign">$</span>
<input class="input" name="tAmountRequested" id="tAmountRequested" type="text" />
</span>
</fieldset>
// Button to clear the form.
<input type="reset" value="Reset" />
Or something like this:
$(function(){
$("#ClearItems").click(function(){
$("#myForm")[0].reset();
});
});
Working fiddle: http://jsfiddle.net/oqcqwyy4/

Result of the radio buttons does not work properly if I have the code for both of the options

I have a problem, i have two radio buttons which if you select on the Doctor radio button it will display all the next fields which are needed to show for the doctors and the same we want to happen if you select the patient radio button , i did it to work fine if I have the code for the patient for example but if i write the code also for the doctor it destroy the result of the both options
HERE IS THE CODE...
<html>
<head>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<fieldset>
<legend>Registration Form</legend>
<label>First Name
<input type="text" name="fname" required="required" />
</label>
<br/>
<br/>
<label>Last Name
<input type="text" name="lname" required="required" />
</label>
<br />
<br />
<label>Username
<input type="text" name="username" required="required" />
</label>
<br />
<br />
<label>Email
<input type="text" name="email" required="required" />
</label>
<br />
<br />
<label>Password
<input type="text" name="password" required="required" />
</label>
<br/><br/>
User Type:
<br/>
Doctor <input type="radio" name="answer" value="Doctor" />
Patient <input type="radio" name="answer" value="Patient" />
<br/>
<br/>
<!--DOCTOR OPTIONS
<label style="display:none;" id="Male">Male</label>
<input style="display:none;" type="radio" name="DoctorG" value="male" id="DoctorGM">
<label style="display:none;" id="Female">Female</label>
<input style="display:none;" type="radio" name="DoctorG" value="male" id="DoctorGF">
<br/>
<br/>
<label style="display:none;" id="Age">Age:</label>
<input style="display:none;" type="text" name="DoctorAge" id="DoctorAge" />
<br/>
<br/>
<label style="display:none;" id="Specialty">Specialty:</label>
<select style="display:none;" id="SelectSpecialty">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
<label style="display:none;" id="ID">Doctor ID:</label>
<input style="display:none;" type="text" name="Doctor_ID" id="Doctor_ID" />
-->
<!--PATIENT OPTIONS -->
<label style="display:none;" id="Male">Male</label>
<input style="display:none;" type="radio" name="PatientGender" value="male" id="PatientGM">
<label style="display:none;" id="Female">Female</label>
<input style="display:none;" type="radio" name="PatientGender" value="male" id="PatientGF">
<br/>
<br/>
<label style="display:none;" id="Age">Age:</label>
<input style="display:none;" type="text" name="PatientAge" id="PatientAge" />
<br/>
<br/>
<label style="display:none;" id="Disease">Disease:</label>
<select style="display:none;" id="SelectDisease">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
<label style="display:none;" id="SPID">SPID:</label>
<input style="display:none;" type="text" name="PatientSPID" id="PatientSPID" />
</fieldset>
</body>
<script>
$("input[type='radio'][name='answer']").change(function () {
if ($(this).val() == "Doctor") {
$("#DoctorGM").show();
$("#DoctorGF").show();
$("#DoctorAge").show();
$("#SelectSpecialty").show();
$("#Male").show();
$("#Female").show();
$("#Age").show();
$("#Disease").show();
$("#ID").show();
$("#Doctor_ID").show();
} else {
$("#PatientGM").hide();
$("#PatientGF").hide();
$("#PatientAge").hide();
$("#SelectDisease").hide();
$("#Male").hide();
$("#Female").hide();
$("#Age").hide();
$("#Disease").hide();
$("#ID").hide();
$("#Doctor_ID").hide();
}
if ($(this).val() == "Patient") {
$("#PatientGM").show();
$("#PatientGF").show();
$("#PatientAge").show();
$("#SelectDisease").show();
$("#Male").show();
$("#Female").show();
$("#Age").show();
$("#Disease").show();
$("#SPID").show();
$("#PatientSPID").show();
} else {
$("#PatientGM").hide();
$("#PatientGF").hide();
$("#PatientAge").hide();
$("#SelectDisease").hide();
$("#Male").hide();
$("#Female").hide();
$("#Age").hide();
$("#Disease").hide();
$("#SPID").hide();
$("#PatientSPID").hide();
}
});</script>
</html>
PS 1: I COMMENTED THE CODE FOR THE DOCTOR IN ORDER TO WORK PROPERLY FOR THE PATIENT
PS 2: http://jsfiddle.net/niklakis/qp7s409a/24/ HERE IS A LINK TO SEE WHAT HAPPENS IF A HAVE BOTH OF THE CODE
Assuming you can edit the HTML of this form, you should put the extra fields inside separate divs and hide just those divs. Then, your jQuery becomes much simpler, too.
Now in this jQuery, what we're doing is hiding both of the "expansion" sections by default. That's the line $("[id^=expand]").hide(). What this does is select all elements whose id starts with expand and hides them.
Then, we select the expansion section associated with the clicked radio and show that.
$("input[type='radio'][name='answer']").change(function() {
$("[id^=expand]").hide();
$("#expand" + $(this).val()).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
User Type:
<br/>Doctor
<input type="radio" name="answer" value="Doctor" />
Patient
<input type="radio" name="answer" value="Patient" />
<!--DOCTOR OPTIONS -->
<div id="expandDoctor" style="display:none;">
<label id="Male">Male</label>
<input type="radio" name="DoctorG" value="male" id="DoctorG">
<label id="Female">Female</label>
<input type="radio" name="DoctorG" value="male" id="DoctorG">
<br/>
<br/>
<label id="Age">Age:</label>
<input type="text" name="DoctorAge" id="DoctorAge" />
<br/>
<br/>
<label id="Specialty">Specialty:</label>
<select id="SelectSpecialty">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
<label id="ID">Doctor ID:</label>
<input type="text" name="Doctor_ID" id="Doctor_ID" />
</div>
<!--PATIENT OPTIONS -->
<div id="expandPatient" style="display:none;">
<label id="Male">Male</label>
<input type="radio" name="PatientG" value="male" id="PatientGM">
<label id="Female">Female</label>
<input type="radio" name="PatientG" value="male" id="PatientGF">
<br/>
<br/>
<label id="Age">Age:</label>
<input type="text" name="PatientAge" id="PatientAge" />
<br/>
<br/>
<label id="Disease">Disease:</label>
<select id="SelectDisease">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<br/>
<br/>
<label id="SPID">SPID:</label>
<input type="text" name="PatientSPID" id="PatientSPID" />
</div>
</fieldset>
However, you were having your problem because you were trying to show and hide elements that weren't actually there. For example, you were trying to show/hide #DoctorGM, which doesn't exist, you only have #DoctorG. You should change those ids, too, because it's invalid to have any elements sharing the same id in HTML.

Submit button disappears when clicked

When you fill in the form and click the "Start Earning" button the button disappears!!! It still goes through and goes to the next page so that much works but I have no idea why the button disappears.... Any ideas???
<?php /*** Form begins here ***/ ?>
<form method="post" action="redirect.php" name="home_sub" accept-charset="utf-8" id="home_sub">
<div class="form_fields">
<p><label for="first_name" class="over">First Name:</label>
<input name="first_name" id="first_name" class="text_input required" type="text" value="" onClick="$('#optinsection').show()" /></p>
<p><label for="last_name" class="over">Last Name:</label>
<input name="last_name" id="last_name" class="text_input required" type="text" value="" onClick="$('#optinsection').show()" /></p>
<p><label for="email" class="over">E-mail:</label>
<input name="subscriber_email" id="email" class="text_input xverify_email required" type="text" value="" onClick="$('#optinsection').show()" autocomplete="off" /></p>
<p><label for="custom_Address" class="over">Address:</label>
<input name="custom_Address" type="text" id="custom_Address" value="" class="text_input" autocomplete="off" /></p>
<p><label for="custom_City" class="over">City:</label>
<input name="custom_City" type="text" id="custom_City" value="" class="text_input" autocomplete="off" /></p>
<p><label class="hidden">Select State</label>
<select name="custom_State" id="custom_State" class="select_input">
<option value="">Select State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="WY">Wyoming</option>
</select></p>
<p><label for="custom_ZipCode" class="over">Zip code:</label>
<input name="custom_ZipCode" type="text" id="custom_ZipCode" class="text_input required" value="" maxlength="5" autocomplete="off" /></p>
<p><label class="hidden">Birth Month</label>
<select name="custom_DOBMonth" id="custom_DOBMonth" class="select_input select_month">
<option value="">Birth Month</option>
<option value="01">January</option>
<option value="02">Febuary</option>
</select>
<label class="hidden">Birth Day</label>
<select name="custom_DOBDay" id="custom_DOBDay" class="select_input select_day">
<option value="">Day</option>
<?php for($dy=1; $dy<32; $dy++){
$sdy = $dy < 10? '0'.$dy: $dy;
echo '<option value="'.$sdy.'">'.$dy.'</option>';
} ?>
</select>
<label class="hidden">Birth Year</label>
<select name="custom_DOB_Year" id="custom_DOB_Year" class="select_input select_year">
<option value="">Year</option>
<?php for($yr=2000; $yr>1910; $yr--){
echo '<option value="'.$yr.'">'.$yr.'</option>';
} ?>
</select></p>
<p><label class="hidden">Select Gender</label>
<select name="custom_Gender" id="custom_Gender" class="select_input">
<option value="">Select Gender</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select></p>
<p><label for="custom_Phone" class="over">Phone: (xxx-xxx-xxxx)</label>
<input type="text" name="custom_Phone" id="custom_Phone" class="text_input" value="" /></p>
<span id="optinsection">
<br />
<input type="checkbox" name="chk_allinbox" id="chk_allinbox" class="required" value="1" />
By checking this box, you agree to our Terms of Service and Privacy Policy and agree to receive daily newsletters and promotions via email from BestHotSurveys.com.
<br /><br />
</div>
<div class="form_button">
<input type="submit" class="submit" onclick="javascript: return TMG_CheckForClick(); ShowExitPopup=false;" />
</div>
</form>
<?php /*** Form ends here ***/ ?>
From the site you provided after submit button is clicked the submit button wrapper div form_button is stylized by a background-image style.
Before Button Click :
<div class="form_button">
<input type="submit" class="submit" onclick="javascript: return TMG_CheckForClick(); ShowExitPopup=false;">
</div>
After button click with validation pass :
<div class="form_button" style="background-image: url(http://www.besthotsurveys.com/images/form_bottom_sending.gif);">
<input type="submit" class="submit" onclick="javascript: return TMG_CheckForClick(); ShowExitPopup=false;" disabled="disabled">
</div>
So look onto your TMG_CheckForClick for removing that style or check the availability of that image.
Currently for the image access it throws
The requested URL /images/form_bottom_sending.gif was not found on
this server.

Categories

Resources