Jump to content

INSTANT check for values in a form


gordonisnz
 Share

Recommended Posts

Hello. I have a table in W3CSS.

Ive got 4-5 lines / sections, and in each section I have one line of SELECT fields (along with other information).

i am wondering

 

I have 4-5 SELECT fields in a table line/row, and one TEXT field. 

Is there a way that if a person 

a) keeps all values blank (nothing selected) - no messages come up.
b) when they select one value in that row, or adds a number in the text field (I guess i'll use classes), a script checks all values in that row & gives a warning if any value is blank. 

Link to comment
Share on other sites

I'd do that client side with PHP.

Edited by niche
Link to comment
Share on other sites

Posted (edited)
8 hours ago, niche said:

I'd do that client side with PHP.

Client side ? Dont you mean server side ?  - HOW ? (javascript ?)

Edited by gordonisnz
Link to comment
Share on other sites

My mistake. Yes, php is server side.

Also, didn't notice your javascript keyword.

It would help if we saw your html.

Edited by niche
Link to comment
Share on other sites

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the button to return the number of tr elements in the table.</p>
<form id="myform" class="one-filled-all-required">
<table id="myTable">
  <tr>
    <td>
    <select name="select1_1">
    <option selected value="">default</option>
    <option value="1">option #1</option>
    <option value="2">option #2</option>
   </select>
    </td>
    <td>
    <select name="select1_2">
    <option selected value="">default</option>
    <option value="1">option #1</option>
    <option value="2">option #2</option>
   </select>
    </td>
    <td>
    <input name="input1_1" type="text" value="">
    </td>
  </tr>
    <tr>
    <td>
    <select name="select1_1">
    <option selected value="">default</option>
    <option value="1">option #1</option>
    <option value="2">option #2</option>
   </select>
    </td>
    <td>
    <select name="select1_2">
    <option selected value="">default</option>
    <option value="1">option #1</option>
    <option value="2">option #2</option>
   </select>
    </td>
    <td>
    <input name="input1_1" type="text" value="">
    </td>
  </tr>
  </table>
</form>
<br> 
<form id="myform" class="one-filled-all-required">
<table id="myTable">
  <tr>
    <td>
    <select name="select1_1">
    <option selected value="">default</option>
    <option value="1">option #1</option>
    <option value="2">option #2</option>
   </select>
    </td>
    <td>
    <select name="select1_2">
    <option selected value="">default</option>
    <option value="1">option #1</option>
    <option value="2">option #2</option>
   </select>
    </td>
    <td>
    <input name="input1_1" type="text" value="">
    </td>
  </tr>
    <tr>
    <td>
    <select name="select1_1">
    <option selected value="">default</option>
    <option value="1">option #1</option>
    <option value="2">option #2</option>
   </select>
    </td>
    <td>
    <select name="select1_2">
    <option selected value="">default</option>
    <option value="1">option #1</option>
    <option value="2">option #2</option>
   </select>
    </td>
    <td>
    <input name="input1_1" type="text" value="">
    </td>
  </tr>
  </table>
</form>
<br> 
<script>

var y = document.querySelectorAll('.one-filled-all-required');
  if(y.length){
  		var vOneAllFilledclassLength = y.length; 
  	
  		for(i=0;i<vOneAllFilledclassLength;i++){
  			console.log(y[i].querySelector('table').rows.length);
  			
  			var vTableRowsCount = y[i].querySelector('table').rows;
   			for(j=0;j<vTableRowsCount.length;j++){
  				//vTableRowsCount[j].id="row_"+[j];
  				console.log(vTableRowsCount[j].querySelectorAll('input, select').length+" xxxx")
  				var inputNumb = vTableRowsCount[j].querySelectorAll('input,select');
  				for(k=0;k<inputNumb.length;k++){
  				
  					if(inputNumb[k].type=="select-one"){
  					inputNumb[k].addEventListener("change", function(){
    				highlightEmpty(this);}, false);
  					}
  					if(inputNumb[k].nodeName.toLowerCase()=="input"){
  					inputNumb[k].addEventListener("blur", function(){
    highlightEmpty(this);}, false);
  					}
  				}//for
  
  
  			}//for
  			console.log(y[i].elements.length);
  		}//for
  
  
  console.log('required found');
  }else{
  console.log('required NOT found');
}


function highlightEmpty(elem){

var thisRow = elem.parentElement.parentElement;
  var inputNumb = thisRow.querySelectorAll('input,select');
  for(k=0;k<inputNumb.length;k++){
  inputNumb[k].removeAttribute('style');
  		if(inputNumb[k].value == "" ){
        
  			inputNumb[k].style.borderColor="red";
  			}
  	}
}

</script>

</body>
</html>

Is this similar to what you are trying to achieve?

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...