Solved

java script validation for dynamically created drop down menus

Posted on 2013-01-29
22
496 Views
Last Modified: 2013-02-06
Hi have a table that has rows that are dynamically created using php scripts. I have a js validation for the drop down menus that are created in these rows. The js validation script is as follows;

if(document.getElementById('menus').value=="0")
    {
    alert("Please choose an extension / extension group");
    document.getElementById('menus').focus();
    return false;


What happens here is that this script works only for the first row but the subsequent rows do not get validated. How can I overcome this issue. My drop down menu is as follows;

echo '<select name="ext-grp-vm['.$i.']" class="vmb" id="menus">';
                               echo'<option value="0"> --Select--</option>';
                               echo'<option value="extension"> Extension</option>';
                               echo'<option value="group"> Group </option>';
                               echo'<option value="vm"> Voicemail Box </option>';
                               echo'</select></span>


Thanks for the help.

A
0
Comment
Question by:aej1973
  • 9
  • 6
  • 3
  • +1
22 Comments
 
LVL 9

Expert Comment

by:Sar1973
Comment Utility
Usually combo boxes are called in javascript with:
myControl=document.getElementsByName("myCombo")[0];
to be identified and then with:
myControl.value or myControl.options[myControl.selectedIndex].text;
to pick thei value.
0
 

Author Comment

by:aej1973
Comment Utility
Sar1973, can you please give me an example as to how I can do this.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
You are not showing the form tag or the rest of the validation

If you have

echo '<select name="ext-grp-vm[]" class="vmb" id="menus'.$i.'">';

as you should have (php will create an array automatically from the [] without the number inside the []

then if you have

<form onsubmit="return validate(this)" ...>

then you can do

function validate(theForm) {
  var selects = theForm["ext-grp-vm[]"];
  if (selects.length==null) selects=[selects]; // only one
  for (var i=0;i<selects.length;i++) {
    if (selects[i].selectedIndex<1) {
      alert("Please choose an extension / extension group");
      selects[i].focus();
      return false;
    }
    return true;
}

Open in new window

0
 
LVL 51

Expert Comment

by:ahoffmann
Comment Utility
action events for select boxes are a pain, which browser do you expect to use?
0
 
LVL 9

Expert Comment

by:Sar1973
Comment Utility
Combos are read in the same way by every browser, they do not make syntax distinction.
0
 
LVL 51

Expert Comment

by:ahoffmann
Comment Utility
this is true for HTML, but the behaviour for onclick, onchange etc is totaly different, another trap is the object's selectedIndex attribute, that's what I have in mind ...
0
 

Author Comment

by:aej1973
Comment Utility
Thank you for getting back to me and I apologize for the delayed response, I have been out sick for  a few days.  Well, to answer your question mplungjan, I have coded my php  script a little differently.  Attached is the script for you ref.  What do I do? Thanks for the help

My db_autoattendant.php looks like this;

for ($i=1; $i<=$steps;$i++)
{
          $name =$ivr_name;
          $ivr_id=$ivr_num;
          $location = $_POST['ext-grp-vm'][$i];
....runs some mysql queries...
  }

<table width="60%" border="1" cellspacing="0" cellpadding="3" class="table">
           <form action="db_autoattendant.php" method="post" id="refresh" name="refresh" onSubmit="return validate(this);"> 
<?
if(isset($_POST['submit'])){
$n=$_POST['steps'];
for ($i=1; $i<=$n; $i++)
{
//This gets the groups information to popluate the drop down
$stmt = $db->query("SELECT `category`, `var_val` FROM `ast_queues` WHERE `var_name` = 'group_name'");
$vSelect = '<select siz^[OBe="1" name="groups['.$i.']"> \n';
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
$vSelect .= '<option value="'.$row['var_val'].'">'.$row['var_val'].'</option>' . "\n";
}//end while
$vSelect .= '</select>' . "\n";

//This gets the extension information to popluate the drop down
$stmt1 = $db->query("SELECT number from numbers where status = 1");
$vSelect1 = '<select size="1" name="number['.$i.']"> \n';
while($row1 = $stmt1->fetch(PDO::FETCH_ASSOC)){
$vSelect1 .= '<option value="'.$row1['number'].'">'.$row1['number'].'</option>' . "\n";
}//end while
$vSelect1 .= '</select>' . "\n";

//This gets the mailbox information to popluate the drop down
$stmt2 = $db->query("SELECT grpext_name, mailbox_no from mailbox");
$vSelect2 = '<select size="1" name="mail_box['.$i.']"> \n';
while($row2 = $stmt2->fetch(PDO::FETCH_ASSOC)){
$vSelect2 .= '<option value="'.$row2['mailbox_no'].'">'.$row2['grpext_name'].'</option>' . "\n";
}//end while
$vSelect2 .= '</select>' . "\n";

  echo '<tr class="trSelected" id="'.$i.'">';
                        echo '<td align="left">Press '.$i.'</td>';
                        echo '<td align="left"><span class="ast">';
                        echo '<select name="ext-grp-vm['.$i.']" class="vmb" id="menus'.$i.'">';
                               echo'<option value="0"> --Select--</option>';
                               echo'<option value="extension"> Extension</option>';
                               echo'<option value="group"> Group </option>';
                               echo'<option value="vm"> Voicemail Box </option>';
                               echo'</select></span></td>';
                        echo'<td align="left" colspan="2" ><div class="exts" >'.$vSelect1.'</div><div class="queues">'.$vSelect.'</div><div class="vm">'.$vSelect2.'</div></td>';
     echo'</tr>';
   }
 }
?>
             <tr><td colspan="5" align="center"> <div id="subbutton"> <input type="submit" name="submit" value="Create"><input type="hidden" name="Submit" value="refresh" ></div></td></tr>
            </form>
         </table>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Is the ['.$i.'] really necessary? How do you read the result of the selects in the receiving PHP ?
I ask because validating on name without the $i is much easier

Never mind, I'll validate them as they come. I will look in a few hours.
0
 

Author Comment

by:aej1973
Comment Utility
Thank you, I  appreciate it.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
Comment Utility
Do you only need validation for the ext-grp-vm select or for all of them?

Because the ext-grp-vm is the only one that can have nothing selected.

Assuming you only want validation for that, then try the following

DEMO

<script>
function validate(theForm) {
  var cnt=0,selects = theForm.getElementsByTagName("select");
  if (selects.length==null) selects=[selects]; // only one
  for (var i=0;i<selects.length;i++) {

    if (selects[i].name.indexOf("ext-grp-vm")==-1) continue; // not the droids you are looking for

    if (selects[i].selectedIndex<1) {
      alert("Please choose an extension / extension group for ext #"+cnt);
      selects[i].focus();
      return false;
    }
  }
  return true;
}
</script>

Open in new window

assuming a form like this
<form onsubmit="return validate(this)">
    <select size="1" name="mail_box[0]">
        <option value="mailbox1">Mailbox 1</option>
    </select>
    
    <select name="ext-grp-vm[0]">
      <option value="0"> --Select--</option>
      <option value="extension"> Extension</option>
      <option value="group"> Group </option>
      <option value="vm"> Voicemail Box </option>
    </select>
    <select size="1" name="mail_box[1]">
        <option value="mailbox1">Mailbox 1</option>
    </select>
    <select name="ext-grp-vm[1]">
      <option value="0"> --Select--</option>
      <option value="extension"> Extension</option>
      <option value="group"> Group </option>
      <option value="vm"> Voicemail Box </option>
    </select>
    <input type="submit" />
</form>

Open in new window

0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:aej1973
Comment Utility
mplungjan, I am so sorry I am not sure what I am doing wrong. The code I am trying to get to work is attached but it is just not working. Thank you for your help.

<?php

?>
<html>
<head>
<script>
function validate(theForm) {
  var cnt=0,selects = theForm.getElementsByTagName("select");
  if (selects.length==null) selects=[selects]; // only one
  for (var i=0;i<selects.length;i++) {
    if (selects[i].name.indexOf("ext-grp-vm")==-1) continue; // not the droids you are looking for
    if (selects[i].selectedIndex<1) {
      alert("Please choose an extension / extension group for ext #"+cnt);
      selects[i].focus();
      return false;
    }
  }
  return true;
}
</script>
   

</head>
	<body> 
       	   <table width="60%" border="1" cellspacing="0" cellpadding="3">
           <form action="" method="post" onsubmit="return validate(this);">     
    
<?	
$n=3;
for ($s=1; $s<=$n; $s++){
	
			echo '<tr class="trSelected" id="'.$s.'">';     			  
     			echo '<td align="left">Press '.$s.'</td>';
                        echo '<td align="left"><span class="ast">';
                        echo '<select name="ext-grp-vm['.$s.']" class="vmb">';
                               echo'<option value="0"> --Select--</option>';
                               echo'<option value="extension"> Extension</option>';
                               echo'<option value="group"> Group </option>';
                               echo'<option value="vm"> Voicemail Box </option>';
                               echo'</select></span></td>';        
                        
     echo'</tr>'; 	 
   }
 
?>	
             <tr><td colspan="5" align="center"><input type="submit" name="submit" value="Create"></td></tr>
			</form>
		</table>      

</body>
</html>

Open in new window

0
 
LVL 9

Expert Comment

by:Sar1973
Comment Utility
I didn't know that the if statement works without any {  } brackets.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Can you post the HTML as seen in view source? Pls remove or change any data that you do not want to show, like the action or other corporate data
0
 

Author Comment

by:aej1973
Comment Utility
View source is attached....
<html>
<head>
<script>
function validate(theForm) {
  var cnt=0,selects = theForm.getElementsByTagName("select");
  if (selects.length==null) selects=[selects]; // only one
  for (var i=0;i<selects.length;i++) {

    if (selects[i].name.indexOf("ext-grp-vm")==-1) continue; // not the droids you are looking for
    if (selects[i].selectedIndex<1) {
      alert("Please choose an extension / extension group for ext #"+cnt);
      selects[i].focus();
      return false;
    }
  }
  return true;
}
</script>
   

</head>
	<body> 
       	   <table width="60%" border="1" cellspacing="0" cellpadding="3">
           <form action="" method="post" onsubmit="return validate(this);">     
    
<tr class="trSelected" id="1"><td align="left">Press 1</td><td align="left"><span class="ast"><select name="ext-grp-vm[1]" class="vmb"><option value="0"> --Select--</option><option value="extension"> Extension</option><option value="group"> Group </option><option value="vm"> Voicemail Box </option></select></span></td></tr><tr class="trSelected" id="2"><td align="left">Press 2</td><td align="left"><span class="ast"><select name="ext-grp-vm[2]" class="vmb"><option value="0"> --Select--</option><option value="extension"> Extension</option><option value="group"> Group </option><option value="vm"> Voicemail Box </option></select></span></td></tr><tr class="trSelected" id="3"><td align="left">Press 3</td><td align="left"><span class="ast"><select name="ext-grp-vm[3]" class="vmb"><option value="0"> --Select--</option><option value="extension"> Extension</option><option value="group"> Group </option><option value="vm"> Voicemail Box </option></select></span></td></tr>	
             <tr><td colspan="5" align="center"><input type="submit" name="submit" value="Create"></td></tr>
			</form>
		</table>      

</body>
</html>

Open in new window

0
 

Author Comment

by:aej1973
Comment Utility
Sar1973, I did not get you...
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
He is referring to the line

if (selects.length==null) selects=[selects]; // only one

which is perfectly valid JS without brackets like this

if (selects.length==null) {
  selects=[selects]; // only one
}
0
 

Author Comment

by:aej1973
Comment Utility
got you, thanks.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
You have invalid html.
Move the form tags OUTSIDE the table:

DEMO

<form....>
<table>
.
.
.
</table>
</form>
0
 

Author Comment

by:aej1973
Comment Utility
mplungjan, that was it, I would never have guessed! Thanks a ton, really appreciate your help and kudos to EE.

A
0
 

Author Closing Comment

by:aej1973
Comment Utility
Excellent, thank you.
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

This is an explanation of a simple data model to help parse a JSON feed
If you’re thinking to yourself “That description sounds a lot like two people doing the work that one could accomplish,” you’re not alone.
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now