Javascript form validation and show the input/selected result below the submit button

**itmehedi** · 07-09-2015, 09:55 AM

Need to do:

1) If user forget/miss one or more field then should show errors when click submit button.<br>
2) Show those input/selected the result below the submit button.
<br>

What I did:

1) In the first and last name field I used html5 tag "required" to show error.<br>
2) I added javascript code for next 4 field. Actually, it works but it works for first radio field only. But if i delete for that specific radio field code then it will works next field select option code only...Similarly is happen next two field.
Don't understanding why not showing all errors at same time?
<br>
3) For showing result, I coded for first name, last name and gender but it is not working. And I don't understanding how to code for selected option value and checked box for showing result.

Any help?

Code:

<!-- begin snippet: js hide: false -->

<!-- language: lang-js -->

    function showInput() {

    // No:1 For radio button code
    	var elem = document.forms["formSurvey"].elements['sex'];
    	len = elem.length-1;
    	chkvalue = "";
    	for(i=0; i<=len; i++) {
    		if(elem[i].checked)chkvalue = elem[i].value;
    	}
    		if(chkvalue=="") {
    			document.getElementById("errorg1").innerHTML = "NO button Checked";
    			return false;
    		} else {
    			var gendershow = document.getElementById("gendershow1").value;
    			document.getElementById("gendershow1").innerHTML = gendershow;
    			return true;
    		}

    // No:2 For select option button code
    		
    	if(document.getElementById("choose").value=="") {
    		document.getElementById("errorChoose").innerHTML = "Please select session!";
    		return false;
    	} else { 
    		var sessionShow1 = document.getElementById("selectSession").value;
    		document.getElementById("selectSession").innerHTML = sessionShow1;
    		return true;
    	} 
    	
    // No:3 For Check button code
    	var allchecked = 0;
    	if(document.getElementById("int").checked)allchecked = 1;
    	if(document.getElementById("sch").checked)allchecked = 1;
    	if(document.getElementById("cur").checked)allchecked = 1;
    	if(allchecked == 0) {

    		document.getElementById("errorg2").innerHTML = "Please check the value";
    		return false;
    	} else {
    		var checkIt = document.getElementById("checkButton").value; 
    		document.getElementById("checkButton").innerHTML = checkIt;
    		return true;
    	}	
      
    // No:4 Show the input/selected result  
    	
    	var first_name = document.getElementById("fname").value;
    			document.getElementById("display_fname").innerHTML = first_name;
    			
    			var last_name = document.getElementById("lname").value;
    			document.getElementById("display_lname").innerHTML = last_name;
    			var tellGender = document.getElementByName("sex").value;	
    			document.getElementById("gendershow1").innerHTML = tellGender;
    }

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <head>
    	<title>CSE </title>
    	
    </head>
    <body>
    	
    	

    	<div class="content">
    		
    		
    		<!-- Enter information about CSE Center -->
    <p>
    		<form name="formSurvey" onsubmit="return showInput()" action="index.html" method="post">
    				
    	<p>First name: <input type="text" name="fname" id="fname" required> </p>
        <p>Last name: <input type="text" name="lname" id="lname" required></p>
      <br>
      
      
     <h4> Gender:</h4>
     

      <p><input type="radio" name="sex" value="Male" id="gender1"> Male</p>
      <p><input type="radio" name="sex" value="Female" id="gender2" > Female</p>
      <p><input type="radio" name="sex" value="Prefer" id="gender3" > Prefer not to include</p>
      <p><span style="color:red;" id="errorg1"></span></p>
      <br>

      
     <h4> Which semester do you plan on attending?</h4>
      
      <select id="choose"> 
      
      <option value="">Choose a session</option>
      <option value="summer">Summer 2015</option>
      <option value="fall">Fall 2015</option>
      <option value="spring">Spring 2016</option>
      
      </select>
      <p><span style="color:red;" id="errorChoose"></span></p>
      <br>
      
      
      <h4>How did you hear about PSU?</h4>
       <p><span style="color:red;" id="errorg2"></span></p>
       
       <p><input type="checkbox" name="pt" value="Internet" id="int"> Internet Site</p>
      <p><input type="checkbox" name="pt" value="School Fair" id="sch" > While attending school fair.</p> 
      <p><input type="checkbox" name="pt" value="Current Student" id="cur"> Current Student of PSU</p><br>  
      
      
      <input type="submit" value="Submit">
    	<br>
    		
    	
    	</form>

    	<p><span id="display_fname"></span></p>
    	<p><span id="display_lname"></span></p>
    	
    	<p><span id="gendershow1"></span></p>
    	<p><span id="selectSession"></span></p>	
    	<p><span id="checkButton"></span></p> 
    	


    </p>
    			
    			

    	</div>
    	
    	
    	<script src="script.js"></script>
    </body>
    </html>

<!-- end snippet -->

**vwphillips** · 07-09-2015, 12:17 PM

Code:

function showInput() {

// No:1 For radio button code
var elem = document.forms["formSurvey"].elements['sex'],rtn=true;
len = elem.length-1;
chkvalue = "";
for(i=0; i<=len; i++) {
if(elem[i].checked)
chkvalue = elem[i].value;
}
if(chkvalue=="") {
document.getElementById("errorg1").innerHTML = "NO button Checked";
rtn=false;
} else {
var gendershow = document.getElementById("gendershow1").value;
document.getElementById("gendershow1").innerHTML = gendershow;
}

// No:2 For select option button code

if(document.getElementById("choose").value=="") {
document.getElementById("errorChoose").innerHTML = "Please select session!";
rtn=false;
} else {
var sessionShow1 = document.getElementById("selectSession").value;
document.getElementById("selectSession").innerHTML = sessionShow1;
}

// No:3 For Check button code
var allchecked = 0;
if(document.getElementById("int").checked)allchecked = 1;
if(document.getElementById("sch").checked)allchecked = 1;
if(document.getElementById("cur").checked)allchecked = 1;
if(allchecked == 0) {

document.getElementById("errorg2").innerHTML = "Please check the value";
rtn=false;
} else {
var checkIt = document.getElementById("checkButton").value;
document.getElementById("checkButton").innerHTML = checkIt;
}

// No:4 Show the input/selected result

var first_name = document.getElementById("fname").value;
document.getElementById("display_fname").innerHTML = first_name;

var last_name = document.getElementById("lname").value;
document.getElementById("display_lname").innerHTML = last_name;
//var tellGender = document.getElementByName("sex").value;
document.getElementById("gendershow1").innerHTML = chkvalue//tellGender;
return rtn;
}

**itmehedi** · 07-09-2015, 03:35 PM

Thank you for your help. Now showing all error but main problem is that when I click on submit button it shows nothing means all result become disappear below of the button.( I wanted to show all 6 input/selected result below of the button). I told in my post I don't know how code work for "Check button" result and "selected option" result. You may be also forget to do that.
I am facing problem because i don't know how will code work.

Thank you again

**vwphillips** · 07-10-2015, 01:33 PM

check box changes

Code:

function showInput() {

// No:1 For radio button code
var elem = document.forms["formSurvey"].elements['sex'],rtn=true;
len = elem.length-1;
chkvalue = "";
for(i=0; i<=len; i++) {
if(elem[i].checked)
chkvalue = elem[i].value;
}
if(chkvalue=="") {
document.getElementById("errorg1").innerHTML = "NO button Checked";
rtn=false;
} else {
var gendershow = document.getElementById("gendershow1").value;
document.getElementById("gendershow1").innerHTML = gendershow;
}

// No:2 For select option button code

if(document.getElementById("choose").value=="") {
document.getElementById("errorChoose").innerHTML = "Please select session!";
rtn=false;
} else {
var sessionShow1 = document.getElementById("choose").value;
document.getElementById("selectSession").innerHTML = sessionShow1;
}

// No:3 For Check button code
var allchecked = [];
if(document.getElementById("int").checked){
 allchecked.push( document.getElementById("int").value);
}
if(document.getElementById("sch").checked){
 allchecked.push(document.getElementById("sch").value);
}
if(document.getElementById("cur").checked){
 allchecked.push(document.getElementById("cur").value);
}
if(allchecked.length== 0) {
 document.getElementById("errorg2").innerHTML = "Please check the value";
 rtn=false;
} else {
 document.getElementById("checkButton").innerHTML = allchecked;
}

// No:4 Show the input/selected result

var first_name = document.getElementById("fname").value;
document.getElementById("display_fname").innerHTML = first_name;

var last_name = document.getElementById("lname").value;
document.getElementById("display_lname").innerHTML = last_name;
//var tellGender = document.getElementByName("sex").value;
document.getElementById("gendershow1").innerHTML = chkvalue//tellGender;
return rtn;
}

Thread: Javascript form validation and show the input/selected result below the submit button

Thread Tools

Search Thread

Javascript form validation and show the input/selected result below the submit button

Similar Threads

choose sold out from select list and submit form to show a javascript alert

the submit button doesn't give any result

Submit Any Form via Ajax and get result back on same page.

Javascript form validation sum of input boxes <= 10

2 form actions, 2 submit button, 1 input text field

Bookmarks

Bookmarks

Posting Permissions