?
Solved

html form Java script help synchronize two SELECT elements

Posted on 2014-10-23
4
Medium Priority
?
460 Views
Last Modified: 2014-10-25
Hello Experts

I have a html form that uses a Java script. line 7 to13

Once a user selects Absent Teacher on line 75 it populates that selection on 8 other Absent Teachers input forms.
 I need the Java Script edited to also duplicate line 74 so the date is also populated on 8 other Date input forms.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Absent Teacher 1 Week.1 Monday</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../../styles.css" />
<script type="text/javascript">
function syncSelects(objSel) {
	for(var i=2; i<=9; ++i) {
		objSel.form.elements['sickteacher['+i+']'].selectedIndex = objSel.selectedIndex;
	}
}
</script> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>

  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

  <link rel="stylesheet" href="/resources/demos/style.css">

  <script>

  $(function() {

    $( "#datepicker" ).datepicker();

  });

  </script>


</head>
<?php 

    // First we execute our common code to connection to the database and start the session
     require("../../common.php"); 
     
    // At the top of the page we check to see whether the user is logged in or not
     if(empty($_SESSION['user'])) 
    { 
        // If they are not, we redirect them to the login page. 
        header("Location: ../../login.php"); 
         
        // Remember that this die statement is absolutely critical.  Without it,
         // people can view your members-only content without logging in. 
        die("Redirecting to ../../login.php"); 
    } 
     
    // Everything below this point in the file is secured by the login system 
     
    // We can display the user's username to them by reading it from the session array.  Remember that because
     // a username is user submitted content we must use htmlentities on it before displaying it to the user.  The
     // fact that we retrieved it from a database and not directly from the user does not matter.
 ?>
<body>
<div id="container">
<div id="header"> <img name="Logo" src="../../images/logo.png" width="233" height="76" alt=""></div>
<div id="content">
      <p><caption><h2>Absent Teacher 1 Week.1 Monday</h2></caption>
<form action="absent1.1.php" method="POST"> 
<?php include('../../php.php'); ?>


<?php



for($i=1;$i<=9; ++$i): ?>
<pre> 
<fieldset>
<legend>Absent Teacher 1 </legend>
Period: <input type="text" name="period[<?php echo $i; ?>]" size="1" readonly value="<?php echo $i; ?>" ><br>
Date: <input type="text" id="datepicker" name="datepicker[<?php echo $i ?>]"><br>
Absent Teacher: <select name="sickteacher[<?php echo $i ?>]"<?php echo ($i==1)?' onchange="syncSelects(this);"':''; ?>><?php echo $options ?></select><br>
Subject:  <select name="subject[<?php echo $i ?>]"><?php echo $subject_options ?></select><br>
Class:  <select name="class[<?php echo $i ?>]"><?php echo $class_options ?></select><br>
Room:  <select name="room[<?php echo $i ?>]"><?php echo $room_options ?></select><br>
Cover Teacher: <select name="coverteacher[<?php echo $i ?>]"><?php echo $options ?></select>
</fieldset>
</pre> 
<?php endfor; ?>

<input type="submit" value="Add Teacher 1 Cover"> 
<input type="reset" value="Reset"> 
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</form> 

</body>
</html></p>
      <p>
  </div>
  </div>
<div id="navigation">
    <p><strong>Navigation Here</strong></p>
    <ul>
<li><a href="http://localhost/w1/mon/w1mon.php">Week 1 Monday Picker</a></li>
<hr>
<li><a href="http://localhost/../../administrator.php">Administrator Page </a></li>
<hr>
      <li><a href="http://localhost/../../logout.php">Logout</a></li>
      <hr>
    </ul>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>

</body> 
  <div id="wrapper"></div>
  <div id="footer">
    <p>Absent Tables </p>
  </div>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:paddy086
[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
  • 2
  • 2
4 Comments
 
LVL 34

Accepted Solution

by:
Slick812 earned 2000 total points
ID: 40400137
from your description, I would guess that this may do what you want, however, I would think you need to place a "DATE" in the first datepicker as a default from the PHP database? ? It is blank (as NO TEXT) the way you have it now.

function syncSelects(objSel) {
// get the text from the first datepicker text element in variable  val1
var val1 = objSel.form.elements['datepicker[1]'].value;

	for(var i=2; i<=9; ++i) {
		objSel.form.elements['sickteacher['+i+']'].selectedIndex = objSel.selectedIndex;
// assign the val1 variable to the 8 other text elements  value
		objSel.form.elements['datepicker['+i+']'].value = val1;
	}
}

Open in new window


Also you have the datepicker with 9 duplicate ID, as a technical thing, you should never have duplicate ID (NEVER , EVER).
ask questions if you need more info
0
 

Author Comment

by:paddy086
ID: 40400385
Thanks Slick812 that worked....

Just got a question about??? the datepicker with 9 duplicate ID this is on line 74 of my code.
is there any way around this

thanks
0
 
LVL 34

Expert Comment

by:Slick812
ID: 40400989
???
OK, you already do this "numbering" time and time again with this PHP loop read -
     <?php echo $i ?>

so you can just change it to
Date: <input type="text" id="datepicker<?php echo $i ?>" name="datepicker[<?php echo $i ?>]"><br>

HOWEVER, with that change, your initialization of the Jquery "datepicker" widget will be different, currently you have this -

$(function() {
    $( "#datepicker" ).datepicker();
  });

this uses the Jquery ID selector as "#datepicker", but now you have 9 different text box ID's. so you might try a loop like this -
$(function() {
  for(var i=1; i<10; ++i) {
    $( "#datepicker"+i ).datepicker();
    }
  });

just my opinion here, the several many "pop-up" datepickers now available in JS-CSS, can be a time comsuming effort to go through many years and mounts and days to get a certain date, that can be typed easily in seconds. That's why I urge you to have a date already in that text. although you may have configured the datepicker to already have the current date in there?
0
 

Author Closing Comment

by:paddy086
ID: 40404097
Thank you Slick812 sorry it took so log getting back and accepting this question as answered.
Both suggestions worked great  thanks
0

Featured Post

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

Question has a verified solution.

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

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Suggested Courses

741 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