Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

java script validation for dynamically created drop down menus

Posted on 2013-01-29
22
Medium Priority
?
552 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
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 2000 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

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

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

In this post we will learn different types of Android Layout and some basics of an Android App.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Viewers will learn how to properly install Eclipse with the necessary JDK, and will take a look at an introductory Java program. Download Eclipse installation zip file: Extract files from zip file: Download and install JDK 8: Open Eclipse and …
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…

721 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