...

View Full Version : How to use onChange in this position



DataTalk
12-20-2010, 04:05 PM
This code works great for splitting value to textbox..

However; It quits working in example 2 when I move the select outside the form tags



<!-- EXAMPLE 1 WORKS-->
<script type="text/javascript">
function Split(sel,first)
{
if (sel.selectedIndex == 0 ) return;
var temp = sel.value.split(",");
sel.form["F"+first].value = temp[0];
sel.form["F"+(first+1)].value = temp[1];
sel.form["F"+(first+2)].value = temp[2];
}
</script>

<form method='post'>
<input type="text" name="F1" value="" >
<input type="text" name="F2" value="" >
<input type="text" name="F3" value="" >

<select onChange="Split(this,1)">
<option> ===Select Color ==== </option>
<option value='000,000,000'>black</option>
<option value='169,169,169'>grey</option>
<option value='000,000,255'>blue</option>
<option value='153 102,255'>aqua</option>
</select>
</form>



Help with the onChange to work outside the form tags.



<!-- EXAMPLE 2 NEED HELP-->
<script type="text/javascript">
function Split(sel,first)
{
if (sel.selectedIndex == 0 ) return;
var temp = sel.value.split(",");
sel.form1["F"+first].value = temp[0];
sel.form1["F"+(first+1)].value = temp[1];
sel.form1["F"+(first+2)].value = temp[2];
}
</script>

<form method='post' name="form1">
<input type="text" name="F1" value="" >
<input type="text" name="F2" value="" >
<input type="text" name="F3" value="" >
</form>


<!-- NEED TO MODIFY THE ONCHANGE TO WORK IN THIS POSITON?? -->
<select onChange="Split(this.form1.value,1)">
<option> ===Select Color ==== </option>
<option value='000,000,000'>black</option>
<option value='169,169,169'>grey</option>
<option value='000,000,255'>blue</option>
<option value='153 102,255'>aqua</option>
</select>

DataTalk
12-20-2010, 04:44 PM
I tried putting the select in a seperate form called selform.

For the onChange I have tried



<select onChange="Split(this.document.form1.value=this,1)">
<select onChange="Split(this.form1.value=this,1)">
<select onChange="Split(this.document.form1.value=this.selform,1)">





<form method="post" name="selform">
<select onChange="Split(this.document.form1.value=this.selform,1)">
<option> ===Select Color ==== </option>
<option value='000,000,000'>black</option>
<option value='169,169,169'>grey</option>
<option value='000,000,255'>blue</option>
<option value='153 102,255'>aqua</option>
</select>
<form>

Philip M
12-20-2010, 05:13 PM
Can I ask why you wish to place the select list outside the form tags?

If it is not within the form you must give it an id and refer to it as such.
e.g:-

var val = document.getElementById("mySelectBoxid").value;

"During her imprisonment she gave birth to two girls aged 11 and 15". - BBC Radio 4

DataTalk
12-20-2010, 05:14 PM
The submit values are in a query, and when I run the query i do not want to duplicate the form many times.
So if i place the form above the query, onclick I can pass the value from the query result to the proper form for posting

DataTalk
12-20-2010, 05:23 PM
I thought there was a way to do this by using: onclick="this.form.name.value=this.form.value;"

Have have not been able to get it to work. I need help to include the document.getElementById in this script

DataTalk
12-20-2010, 05:31 PM
I was trying to use a simple example to work this out.. What I am really trying to do is this...Select 3 different sets of values to post to seperate forms from the query



<script type="text/javascript">
function Split(sel,first)
{
if (sel.selectedIndex == 0 ) return;
var temp = sel.id.split(",");
sel.form1["F"+first].value = temp[0];
sel.form1["F"+(first+1)].value = temp[1];
sel.form1["F"+(first+2)].value = temp[2];
}
</script>
<script type="text/javascript">
function Split(sel,first)
{
if (sel.selectedIndex == 0 ) return;
var temp = sel.id.split(",");
sel.form2["F"+first].value = temp[0];
sel.form2["F"+(first+1)].value = temp[1];
sel.form2["F"+(first+2)].value = temp[2];
sel.form2["F"+(first+3)].value = temp[3];
}
</script>
<script type="text/javascript">
function Split(sel,first)
{
if (sel.selectedIndex == 0 ) return;
var temp = sel.id.split(",");
sel.form3["F"+first].value = temp[0];
sel.form3["F"+(first+1)].value = temp[1];
sel.form3["F"+(first+2)].value = temp[2];
}
</script>
<?php
include "includes/start_admin.php";
// You Are Now Connected - Session Started
?>
<table border='1' width='700' bgcolor='#FBF9FB'>
<form method='post' name='form1' action='sql_field_new.php'>
<input type='hidden' id='F101' name='F101' value='' >
<input type='hidden' id='F102' name='F102' value='' >
</form>

<form method='post' name='form2' action='sql_field_edit.php'>
<input type='hidden' id='F201' name='F201' value='' >
<input type='hidden' id='F202' name='F202' value='' >
<input type='hidden' id='F203' name='F203' value='' >
</form>

<form method='post' name='form3' action='sql_field_delete.php'>
<input type='hidden' id='F301' name='F301' value='' >
<input type='hidden' id='F302' name='F302' value='' >
</form>


<tr><td>
<div align='left'>

<table border='1' bordercolor='#c0c0c0' width='700' cellpadding='0' style='border-collapse: collapse; font-size: 8pt; font-family: Arial;' >
<tr>
<td align='left' width='55' style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Field</td>
<td align='left' width='55' style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Type</td>
<td align='left' width='55' style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Null</td>
<td align='left' width='55' style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Key</td>
<td align='left' width='55' style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Default</td>
<td align='left' width='55' style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Extra</td>
<td align='center' width='75' style='color: #FFFF00' bgcolor='#4C0902'><p style='margin: 0 2px'>Add&nbsp;&nbsp;Edit&nbsp;&nbsp;Del</td>
</tr>
<?php
// get the selected table from database
$q= $_GET["q"];
$mytable = $_GET['q'] ;

// Define alternating row colors
$color1 = "#FFFFFF"; // white
$color2 = "#ECF1F2"; // blue
$row_count = 0;

// Execute requested query
$query = "SHOW COLUMNS FROM $mytable";
$result = mysql_query($query);
while($columns = mysql_fetch_assoc($result)) {
$row_color = ($row_count % 2) ? $color1 : $color2;
echo "<tr>
<td bgcolor='$row_color'><p style='margin-left: 10px; margin-top: 0; margin-bottom: 0'>($row_count) $columns[Field]</td>
<td bgcolor='$row_color'><p style='margin-left: 10px; margin-top: 0; margin-bottom: 0'>$columns[Type]</td>
<td bgcolor='$row_color'><p style='margin-left: 5px; margin-top: 0; margin-bottom: 0'>$columns[Null]</td>
<td bgcolor='$row_color'><p style='margin-left: 5px; margin-top: 0; margin-bottom: 0'>$columns[Key]</td>
<td bgcolor='$row_color'><p style='margin-left: 5px; margin-top: 0; margin-bottom: 0'>$columns[Default]</td>
<td bgcolor='$row_color'><p style='margin-left: 5px; margin-top: 0; margin-bottom: 0'>$columns[Extra]</td>
<td align='center' bgcolor='$row_color'><p style='margin-left: 5px; margin-top: 0; margin-bottom: 0'>

<button type='submit' id='$mytable,$columns[Field]' onClick='Split(this.form1,101)' style='margin:0; border:0px solid #FFFFFF; padding: 0; width: 12px; height: 12px'>
<img src='static/icon25/add.jpg' style='border: 0px solid #E6E6FA word-spacing: 0; margin: 0; width: 12; height: 12;'></button>

<button type='submit' id='$mytable,$columns[Field],$columns[Field]' onClick='Split(this,201)' style='margin:0; border:0px solid #FFFFFF; padding: 0; width: 12px; height: 12px'>
<img src='static/icon25/edit.jpg' style='border: 0px solid #E6E6FA word-spacing: 0; margin: 0; width: 12; height: 12;'></button>

<button type='submit' id='$mytable,$columns[Field]' onClick='Split(this,301)' style='margin:0; border:0px solid #FFFFFF; padding: 0; width: 12px; height: 12px'>
<img src='static/icon25/delete.jpg' style='border: 0px solid #E6E6FA word-spacing: 0; margin: 0; width: 12; height: 12;'></button>
</td>
</tr>" ;
// count row colors
$row_count++;
}
?>
</table>
&nbsp;&nbsp;<font face="Arial" size="2" color="#0000FF">Table Name <b><?php echo $mytable; ?></b></font>
</form>
</div>
</tr>
</table>

Philip M
12-20-2010, 05:39 PM
Here you are:-


<script type="text/javascript">
function Split() {
var sel = document.getElementById("mySelect");
if (sel.selectedIndex == 0 ) return;
var temp = sel.value.split(",");
document.form1.F1.value = temp[0];
document.form1.F2.value = temp[1];
document.form1.F3.value = temp[2];
}
</script>

<form method='post' name="form1">
<input type="text" name="F1" value="" >
<input type="text" name="F2" value="" >
<input type="text" name="F3" value="" >
</form>

<select id = "mySelect" onchange="Split()">
<option> ===Select Color ==== </option>
<option value='000,000,000'>black</option>
<option value='169,169,169'>grey</option>
<option value='000,000,255'>blue</option>
<option value='153,102,255'>aqua</option>
</select>

DataTalk
12-20-2010, 07:10 PM
Here is the button I am using in the query
onClick it will pass the value of the first record, but does not respont to the other records following
Also: this will pass text but not submit the form1

query example

FirstName | LastName | MySelect
----------|----------|-----------
bob.........|Jones.......| Button
john........|doe..........| Button

onClick result is only Bob,Jones



<button type='submit' name='$FirstName' id='mySelect' value='$FirstName,$LastName' onclick='Split()' >
<img src='image/edit.jpg'></button>


I need to read each record in the query pass value and post form1 onclick



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum