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

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>

Related

Having Trouble with Href in form

I am trying to create a form that will give an alert if a field is empty, or if the fields are not empty then it will take the user to a new page(this page does exist) I have tried replacing 'button' with 'input', but still no hope
<div id='signupbox'>
<div class="formbox">
<h1>My first contact form</h1>
<p style="color:red;">Anything With a * is required</p>
<br>
<form name="app-form" onsubmit="return validateForm()" method="post">
<input name="Fname" id='Fname' type="text" class="feedback-input" placeholder="Fname" />
<input name="Email" id='Email' type="text" class="feedback-input" placeholder="Email" />
<select name="languages" id="lang" class="feedback-input">
<option value="javascript">Select a language</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</select>
<textarea name="Text" id='Text' class="feedback-input" placeholder="Comment"></textarea>
<button type='submit' onclick="return validateFormData(); Link();" >SUBMIT</button>
</form>
</div>
</div>
</body>
<script>
function validateForm() {
let x = document.forms["app-form"]["Fname"].value;
let y = document.forms["app-form"]["Email"].value;
if ((x == "") || (y=='')) {
alert("Required Fields Must be Filled Out.");
return false;}}
function Link(){
document.location.href = "SuccessPage.html";
}
</script>
Also oninvalid attribute does give an alert if the case is to warn the user by showing an alert:
<input
name="Fname"
id='Fname'
type="text"
class="feedback-input"
oninvalid="alert('Required Fields Must be Filled Out.!');" placeholder="Fname" />
<input
name="Email"
id='Email'
type="text"
class="feedback-input"
oninvalid="alert('Required Fields Must be Filled Out.!');" placeholder="Email" />
Check HTML oninvalid Event Attribute for detailed information.
Your onClick method is wrong. It should be this:
<button type='submit' onclick="validateFormData()" >SUBMIT</button>
In your validateFormData method you should check to make sure the form has data, if it does then you call your Link() method. If it doesn't, display an alert.
firstly, if you want a good form page, you have to prevent default behaves like page renewing thus you can have so good form validating process. I edited your code please use this.
<div id='signupbox'>
<div class="formbox">
<h1>My first contact form</h1>
<p style="color:red;">Anything With a * is required</p>
<br>
<form name="app-form" method="post">
<input name="Fname" id='Fname' type="text" class="feedback-input" placeholder="Fname" />
<input name="Email" id='Email' type="text" class="feedback-input" placeholder="Email" />
<select name="languages" id="lang" class="feedback-input">
<option value="javascript">Select a language</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
<option value="java">Java</option>
<option value="golang">Golang</option>
<option value="python">Python</option>
<option value="c#">C#</option>
<option value="C++">C++</option>
<option value="erlang">Erlang</option>
</select>
<textarea name="Text" id='Text' class="feedback-input" placeholder="Comment"></textarea>
<button type='submit' id="button" >SUBMIT</button>
</form>
</div>
</div>
</body>
<script>
document.getElementById("button").addEventListener("submit", function validateForm(e) {
e.preventDefault();
let x = document.getElementById("Fname").value;
let y = document.getElementById("Email").value;
if (!x || !y) {
alert("Please fill required areas.")
return
} else {
window.location.href="/SuccessPage.html"
}}
)
</script>

getelementbyid Multiple ID display [duplicate]

This question already has answers here:
How to select next sibling of a certain type with JS?
(3 answers)
Closed 4 years ago.
I have a drop down where once a subject is clicked it opens selected fields on a list. Is it possible to display two or multiple div's from one click?
Here is my current code;
<script type="text/javascript">
function showfield(name){
if(name=='Hijacking')document.getElementById('div1').innerHTML='Registration:
<input type="text" name="reg" />' +
'Make: <input type="text" name="make" /> ' + 'Model: <input
type="text" name="model" />';
else document.getElementById('div1').innerHTML='';
if document.getElementById('div2').innerHTML='Name: <input type="text
="name" />';
else document.getElementById('div2').innerHTML='';
}
</script>
<select name="travel_arriveVia" id="travel_arriveVia" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="Hijacking">Hijacking</option>
<option value="Theft">Theft</option>
<option value="Overdue Rental">Overdue Rental</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>
<div id="div2"></div>
So I have tried this;
if(name=='Hijacking')document.getElementById('div1' 'div2').innerHTML='Registration: <input type="text" name="reg" />' +
'Make: <input type="text" name="make" /> ' + 'Model: <input type="text" name="model" />';
else document.getElementById('div1').innerHTML='';
What my aim is is to have div1 and div2 show when lets say hijacking is selected, the reason is that lets say div 2 has common fields in other selections in my dropdown
Second Attempt:
<script type="text/javascript">
$('select[name="travel_arriveVia"]').change(function(){
if ($(this).val() == "Hijacking"){
$("#div1, #div2).show();
}
});​
</script>
<select name="travel_arriveVia" id="travel_arriveVia" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="Hijacking">Hijacking</option>
<option value="Theft">Theft</option>
<option value="Overdue Rental">Overdue Rental</option>
<option value="Other">Other</option>
</select>
<div class="Hijacking" id="div1" style="display:none;">
Registration: <input type="text" name="reg" /> Make: <input type="text" name="make" /> Model: <input type="text" name="model" />
</div>
<div class="Hijacking" id="div2" style="display:none;">
More html
</div>
Using jQuery
As a reference: https://jquery.com/
You could change your code using jQuery.
Here is a working example: https://jsfiddle.net/8a20rkwt/
In your head section include jquery like so:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
Then use it like so to show multiple elements by id with one click:
<script>
$(function() {
$('#travel_arriveVia').change(function(){
$(".Hijacking").hide();
if ($(this).val() == "Hijacking"){
$("#div1, #div2").show();
}
});
});
</script>
In your html:
<select name="travel_arriveVia" id="travel_arriveVia">
<option selected="selected">Please select ...</option>
<option value="Hijacking">Hijacking</option>
<option value="Theft">Theft</option>
<option value="Overdue Rental">Overdue Rental</option>
<option value="Other">Other</option>
</select>
<div class="Hijacking" id="div1" style="display:none;">
Registration: <input type="text" name="reg" /> Make: <input type="text" name="make" /> Model: <input type="text" name="model" />
</div>
<div class="Hijacking" id="div2" style="display:none;">
More html
</div>
More details about the jQuery change event handler are here: https://api.jquery.com/change/

Multi page webform validation

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?

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/

How to validate a drop down menu in a form?

Hi I'm a relative beginner. I need each object in my form to be validated and basically I don't know how to validate a drop-down menu. Here is my HTML, thanks guys.
<div id="valAlert"></div>
<form name="review" onsubmit="return validateForm()">
<div id="valAlert"></div>
<fieldset>
Title: <input type="text" name="Title"><br/>
Email Address: <input type="text" name="Email"><br/>
Rating: <select name="Rating">
<option value="0"></option>
<option value="1">Excellent</option>
<option value="2">Good</option>
<option value="3">Bad</option>
<option value="4">Awful</option>
</select><br/>
<textarea name ="Comments" rows="8" colspan="40">Comments: </textarea>
</fieldset>
<fieldset>
<input class="button" type="submit" value="Submit"/>
</fieldset>
</form>
`else if (r=="0"){
document.getElementById("valAlert").innerHTML="We require a rating";
return false;
} `

Categories

Resources