EllisLab text mark
Advanced Search
     
JavaScript INVERT Select form
Posted: 05 November 2008 10:28 PM   [ Ignore ]
Joined: 2008-11-05
3 posts

Hi, I have a script that I want to submit but the unselected values. But there is a Bug. How can that be corrected then? Here is the code:

function loopSelected(frm)
{
  
var txtSelectedValuesObj document.getElementById('txtSelectedValues');
  var 
selectedArray = new Array();
  var 
selObj document.getElementById('selSeaShells');
  var 
i;
  var 
count 0;
  for (
i=0i<selObj.options.lengthi++) {
    
if (selObj.options[i].selected==false{
      selectedArray[count] 
selObj.options[i].value;
      
count++;
    
}
  }
  txtSelectedValuesObj
.value selectedArray;
  
frm.submit(txtSelectedValuesObj.value);

This has to run like a normal submit of a form but sending the unselected values.

<form action="tutorial004_nw.html" method="get">
  <
table border="1" cellpadding="10" cellspacing="0">
  <
tr>
    <
td valign="top">
      <
input type="button" value="Submit">
      <
input type="button" value="Loop Selected">
      <
br />
      <
select name="selSea" id="selSeaShells" size="15" multiple="multiple">
        <
option value="val0" selected>sea zero</option>
        <
option value="val1">sea one</option>
        <
option value="val2">sea two</option>
        <
option value="val3">sea three</option>
        <
option value="val4">sea four</option>
        <
option value="val5">adsea one</option>
        <
option value="val6">dasea two</option>
        <
option value="val7">dasea three</option>
        <
option value="val8">dasea four</option>
      </
select>
    </
td>
    <
td valign="top">
      <
input type="text" id="txtSelectedValues" />
      
selected array
    </
td>
  </
tr>
  </
table>
</
form

Has anyone got an Idea on that?
Mitus

 
Posted: 06 November 2008 12:03 AM   [ Ignore ]   [ # 1 ]   [ Rating: 0 ]
Avatar
Joined: 2006-09-11
374 posts

Form elements won’t be submitted if they lack a name property. Adding a name to the input with the id of txtSelectedValues should do the trick. Remember that in strict XHTML, name properties and id properties share the same namespace.

 Signature 

August 2011: I’m not an active codeigniter developer right now. Feel free to contact me, but I may not be able to solve your problem for you.

flickr | twitter | rockets

 
Posted: 06 November 2008 04:36 AM   [ Ignore ]   [ # 2 ]   [ Rating: 0 ]
Joined: 2008-11-05
3 posts

Thanks for the Tip. I do not know how that can then be inserted to the code since it already has a name in the form. Thanks again but I am not a JS freak to figure that out. HELP!

 
Posted: 06 November 2008 06:43 AM   [ Ignore ]   [ # 3 ]   [ Rating: 0 ]
Avatar
Joined: 2008-01-07
2482 posts

It doesn’t have a name in the code you posted.

<input type="text" id="txtSelectedValues" /> 
 Signature 
 
Posted: 06 November 2008 07:40 AM   [ Ignore ]   [ # 4 ]   [ Rating: 0 ]
Joined: 2008-11-05
3 posts

Not still working. So where is the error? The Values not Selected have to be sent.

<html lang="en" xml:lang="en" >
  <
head>
    <
META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <
title>gr7xsl_db.xsl</title>
    
[removed]
      
<!--
      function 
delSelected(frm)
      
{
        
var wertObj document.getElementById('submit.Delete');
        var 
selectedArray = new Array();
        var 
selObj document.getElementById('wertValues');
        var 
i;
        var 
count 0;
        for (
i=0i<selObj.options.lengthi++) {
          
if (selObj.options[i].selected==false{
            selectedArray[count] 
selObj.options[i].value;
            
count++;
          
}
        }
        wertObj
.value selectedArray;
        
frm.submit(wertObj.value);
      

      
// -->
  
    
[removed]
  
</head>
  <
body>
    <
form name="index" id="index" action="Index" method="get" accept-charset="UTF-8">
      <
input type="hidden" name="current.Model" value=""><input type="hidden" name="current.Table" value=""><input type="hidden" name="XSL" value="gr7xsl_db.xsl"><input type="hidden" name="RowsPerPage" value="999999">
      <
div class="contentbox">
        <
table class="inhalt">
          <
tbody>
            <
tr>
              <
td valign="top">ZNr<br>Abw.-Kennung Variante<br>Kommentar<br>Start-/Endbetriebsstelle<br>
                
              </
td><td>
                <
table>
                  <
tr>
                    <
td><td>101042<br>22<br>
                        
                        <
br>XSB RB<br>
                      <
select id="wertValues" size="30" multiple name="T_GUELTIGKEITEN_GR7_ST.A_ID"><option value="4494">05.04.2009</option><option value="4493">06.04.2009</option<option value="4389">19.07.2009</option> <option value="7246">25.10.2009</option></select></td></td>
                    
                  </
tr>
                </
table>
              </
td>
              <
tr>
                <
td></td><td>
                  <
input type="hidden" name="submit.Update" id="submit.Update" disabled>
                    <
button type="reset">Zur&uuml;cksetzen
                  
</button>
                  <
input type="hidden" name="submit.Update" id="submit.Delete" disabled>
                    <
button type="submit" name="frm">Submit
                
</button></td>
              </
tr>
            </
tr>
          </
tbody>
        </
table>
      </
div>
    </
form>
  </
body>
</
html

Take a look. Thanks

 
Posted: 06 November 2008 09:49 AM   [ Ignore ]   [ # 5 ]   [ Rating: 0 ]
Joined: 2007-03-12
221 posts

the $_POST array will only contain selected items so you have three choices.

1)  you should know (or be able to calculate) the values shown in the selection list, so by definition, you know that the ones not returned in the $_POST were not selected.

2)  add hidden fields to the form, one for each element in the selection list and use a javascript event onClick() to change the value of the hidden element.

3) a combination of the two.  Create hidden elements for each of the selections available and that will be returned as part of the $_POST array.  Intersect that with the selected values and you will be left with the unselected values.

the first is probably the easiest to code as a one off, but the last one would provide a generic pattern that could be used across multiple forms;  The array you use to build the selection list is also used to build the hidden form elements.

obiron

 Signature 

There are 10 kind of people in this world, those who understand binary and those who don’t

 
Posted: 06 November 2008 03:04 PM   [ Ignore ]   [ # 6 ]   [ Rating: 0 ]
Avatar
Joined: 2006-09-11
374 posts

The specific issue in your code above is that the javascript is never being executed. You should be listening for a submit event on the parent form that will call your javascript function.

Note that obiron‘s suggestion is a better one: you know what’s being displayed, and you know what’s being returned. On the server side you can subtract what’s being returned from what’s being displayed.

 Signature 

August 2011: I’m not an active codeigniter developer right now. Feel free to contact me, but I may not be able to solve your problem for you.

flickr | twitter | rockets