Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Location
    Oregon
    Posts
    243
    Thanks
    23
    Thanked 10 Times in 10 Posts

    How to use onChange in this position

    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

    Code:
    <!-- 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.

    Code:
    <!-- 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>
    Last edited by DataTalk; 12-20-2010 at 05:04 PM.

  • #2
    Regular Coder
    Join Date
    Nov 2010
    Location
    Oregon
    Posts
    243
    Thanks
    23
    Thanked 10 Times in 10 Posts
    I tried putting the select in a seperate form called selform.

    For the onChange I have tried

    Code:
    <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)">

    Code:
    <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>

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,022
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    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

  • #4
    Regular Coder
    Join Date
    Nov 2010
    Location
    Oregon
    Posts
    243
    Thanks
    23
    Thanked 10 Times in 10 Posts
    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
    Last edited by DataTalk; 12-20-2010 at 05:17 PM.

  • #5
    Regular Coder
    Join Date
    Nov 2010
    Location
    Oregon
    Posts
    243
    Thanks
    23
    Thanked 10 Times in 10 Posts
    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

  • #6
    Regular Coder
    Join Date
    Nov 2010
    Location
    Oregon
    Posts
    243
    Thanks
    23
    Thanked 10 Times in 10 Posts
    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

    Code:
    <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>

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,022
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Here you are:-

    Code:
    <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>

  • #8
    Regular Coder
    Join Date
    Nov 2010
    Location
    Oregon
    Posts
    243
    Thanks
    23
    Thanked 10 Times in 10 Posts
    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

    Code:
    <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
    Last edited by DataTalk; 12-20-2010 at 07:16 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •