Solved

java script validation for dynamically created drop down menus

Posted on 2013-01-29
22
542 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

In this post we will learn how to make Android Gesture Tutorial and give different functionality whenever a user Touch or Scroll android screen.
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Introduction to Processes

628 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