How to validate a drop down menu in a form? - javascript

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;
} `

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>

Single form submission of data from multiple forms

I have the following (simplified) HTML code containing two forms:
<html>
<form name="form1" method="get">
Name: <select name="name" type="text">
<option selected>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</form>
<form name="form2" method="post" action="../cgi/test.pl">
City: <input name="city" type="text"/>
Country: <input name="country" type="text"/>
<input value="Click Me!" type="submit"/>
</form>
</html>
Thus when clicking the submission button the CGI script is executed and I would like the script to be able to ingest also the name selected in the dropdown of the first form. Any suggestion on how to achieve this? In older questions I just found similar things but not suitable for my problem (if I am not wrong...).
I've created a snippet which works as you want, I've done the explaining in the comments wherever necessary. See if this works for you.
<form name="form1" method="get">
Name:
<select name="name" type="text" onchange="document.querySelector('#any_id').value = this.value" style="width: 50%">
<!-- trigger onchange event and change the value of hidden field in the second form -->
<option selected>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</form>
<hr>
<form name="form2" method="post" action="../cgi/test.pl">
<!--<input type="hidden" name="any_name" id="any_id" value="Your-default-value"> -->
<!-- Make this field hidden↓↓, here only for demo purpose-->
Hidden Field: <input type="text" name="any_name" id="any_id" value="A"><br><br>
<!-- Give it a default value from your select element(which is A) -->
City: <input name="city" type="text" /><br><br> Country: <input name="country" type="text" /><br><br>
<input value="Click Me!" type="submit" />
</form>
Then get the value from the name of hidden field(here any_name).

remove the value set in input field's value attribute after submitting the form

I am using HTML, bootstrap, php, MySQL, and Ajax. I want that when I submit the form the value set in the input field's value attribute become null. I am badly stuck here. Can anyone please advice me that how can I solve this problem?? Thanks in advance guys. codes are given below :
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll" value="12"><br>
<label>Name : </label>
<input type="text" name="name" id="name" value="Sneha"><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="submit" class="btn-submit" name="submit" value="Submit">
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
$('.btn-submit').click(function() {
$.ajax({
url:"insert.php",
method:"POST",
data:$('#cForm').serialize(),
success:function(data)
{
document.getElementById("cForm").reset();
$("input[type='text']").val('');
}
});
});
});
</script>
First of all you should remove default values of input fields, because on submit the page refreshes and default values will popup. Next you should create an event listener "submit". Once it is present find the nodes with input and replace the value with empty string. The working sample is bellow:
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll" value=""><br>
<label>Name : </label>
<input type="text" name="name" id="name" value=""><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="submit" class="btn-submit" name="submit" value="Submit">
<input type="submit" class="btn-modify" name="modify" value="Modify">
</form>
<script>
const form = document.querySelector('#cForm');
let inputs = form.getElementsByTagName('input')
form.addEventListener('submit', function() {
console.log('Submit');
inputs.name.value = '';
inputs.roll.value = '';
inputs.age.value = '';
})
</script>
Don't forget to remove default value from input!!! Otherwise you will see them after submit.
Just use $("input[type='text']").val(''); to remove the values hardcoded in the input's value tag.
$("#cForm").on("submit", function(e) {
e.preventDefault();
$("input[type='text']").val('');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll" value="112"><br>
<label>Name : </label>
<input type="text" name="name" id="name" value="john"><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="submit" class="btn-submit" name="submit" value="Submit">
<input type="submit" class="btn-modify" name="modify" value="Modify">
</form>
EDIT
You are using ajax to submit the form so you should add the line $("input[type='text']").val(''); inside you ajax success callback function
$.ajax({
url:'/some-url/file.php',
success:function(data){
//your code to check if the save was success full
//and if yes then reset the form inputs
$("input[type='text']").val('');
}
});

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>

Copy select value data form one form to another without button in form1

Hi I have problems to figure out how to copy select value data from one form to another form. I need a copy javascript for this I guess.
Form1
<form id="form1" name="form1">
<input type="checkbox" name="email'.$emailCount++.'" value="'.email.'"/>
<input type="hidden" name="name'.$nameCount++.'" value="'.$id.'"/>
</form>
Form2
<form id="form2" method="POST" action="script/do-something.php" name="form2">
<label for="name">Add Selected</label>
<select name="list" id="list" class="form-text">
<option value="">Add To List</option>
<option value="All">All</option>
<option value="All">Blog</option>
<option value="All">Dj</option>
</select>
<input type="hidden" name="name'.$nameCount++.'" value="'.$id.'"/>
<input type="button" name="new_address" id="clicky3" value="Add Selected">
</form>

Categories

Resources