Solved

java script validation for dynamically created drop down menus

Posted on 2013-01-29
22
514 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
ID: 38834682
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
ID: 38837648
Sar1973, can you please give me an example as to how I can do this.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38849996
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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 51

Expert Comment

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

Expert Comment

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

Expert Comment

by:ahoffmann
ID: 38857073
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
ID: 38858079
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
ID: 38858198
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
ID: 38858217
Thank you, I  appreciate it.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 38858443
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
 

Author Comment

by:aej1973
ID: 38860154
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
ID: 38860178
I didn't know that the if statement works without any {  } brackets.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38860208
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
ID: 38860242
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
ID: 38860607
Sar1973, I did not get you...
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38860760
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
ID: 38860772
got you, thanks.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38860789
You have invalid html.
Move the form tags OUTSIDE the table:

DEMO

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

Author Comment

by:aej1973
ID: 38860870
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
ID: 38860877
Excellent, thank you.
0

Featured Post

Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Whether you've completed a degree in computer sciences or you're a self-taught programmer, writing your first lines of code in the real world is always a challenge. Here are some of the most common pitfalls for new programmers.
Whether you’re a college noob or a soon-to-be pro, these tips are sure to help you in your journey to becoming a programming ninja and stand out from the crowd.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
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…

809 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