Solved

java script validation for dynamically created drop down menus

Posted on 2013-01-29
22
524 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

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.
This is about my first experience with programming Arduino.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

821 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