INSTANT check for values in a form

gordonisnz · June 5, 2021

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.

niche · June 5, 2021

I'd do that client side with PHP.

Edited June 5, 2021 by niche

gordonisnz · June 6, 2021

8 hours ago, niche said:

I'd do that client side with PHP.

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

Edited June 6, 2021 by gordonisnz

niche · June 6, 2021

My mistake. Yes, php is server side.

Also, didn't notice your javascript keyword.

It would help if we saw your html.

Edited June 6, 2021 by niche

dsonesuk · June 6, 2021

<!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 June 6, 2021 by dsonesuk

Sign In

INSTANT check for values in a form

Recommended Posts

gordonisnz

Link to comment

Share on other sites

niche

Link to comment

Share on other sites

gordonisnz

Link to comment

Share on other sites

niche

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity