0

Im creating a form that every time you select a drop down menu option it will write the value to a text box
I have the writing part working. The problem is that is writting to both text boxes when I select on dropdown and it it suppose to be writing to one text box when you select one drop down and so fort

here is the link to the code

http://jsfiddle.net/jencinas69/ytXnC/

4
Contributors
47
Replies
122
Views
4 Years
Discussion Span
Last Post by yankeefan24
Featured Replies
  • 1
    diafol 3,720   4 Years Ago

    If your indexes match up for the dropdowns and the textboxes: $("select").change(function(){ ind = $('select').index(this); selVal = $(this).children("option").filter(":selected").text(); $('input:text:eq(' + ind + ')').val(selVal); }); I tried to avoid using ids and classes, so this should work if there aren't any dropdowns or textboxes before the relevant ones. Also if there … Read More

0

I had tried that before is there any way of achiving what I want using something like this?

$("#data, #data2").change(function(){

var item = $(this).val();        
$("#dataval, #dataval2").val(item);


});
0

The problem is that I have like 30 drop downs that is why I wanted to use only one function with multiple IDs

<script>
$("#data, #data2").click(function(){

var item = $(this).val();        
$("#dataval, #dataval2").val(item);


});

</script>

<select id="data">
    <option value="">Please Select...</option>
    <option value="1">Fully Successfuly
    <option value="2">Exceptional
        <option value="3">Needs Improvement</option>
</select>
<input type="text" id="dataval" /><br>
<br>
<select id="data2">
    <option value="">Please Select...
    <option value="1">Fully Successfuly
    <option value="2">Exceptional
        <option value="3">Needs Improvement</option>
</select>





    <input type="text" id="dataval2" />
1

If your indexes match up for the dropdowns and the textboxes:

$("select").change(function(){
  ind = $('select').index(this);
  selVal = $(this).children("option").filter(":selected").text();  
    $('input:text:eq(' + ind + ')').val(selVal);  
});

I tried to avoid using ids and classes, so this should work if there aren't any dropdowns or textboxes before the relevant ones. Also if there are any other dropdowns, it'll run the function. You can always class-ify them though.

Votes + Comments
clever
0

diafol I have like 30 drowdown Im using in my form and all of theme have to return a value

0

Very nice diafol, like I said the only bug is if he selects the first one...

So using a click event might be more reliable?

0

@diafol Sorry to hijack this but with such a glaring bug using .change seems inferior to .click.

(i.e If user first time selects option one nothing gets dumped in the text box)

Am I missing something?

Edited by iamthwee

0

What the number value? Darn, that's even easier:

http://jsfiddle.net/bSC5T/3/

Also as iamthwee points out, a click makes more sense if there is no initial value in the textbox.

$("select").click(function(){
  ind = $('select').index(this);
  selVal = $(this).val();  
    $('input:text:eq(' + ind + ')').val(selVal);  
});

You could place an initial value of '1' into each textbox and keep it as change()

Edited by diafol

0

Ah, so you did want the text. Cool.

Solved?

0

Lets say I wanted to write the Value to a td instead of an input area, is it possible

0

yep, however, it depends on the table structure whether you could use the same type of code. You may find it easier to use the DOM traversing functions, like next()

0

http://jsfiddle.net/bSC5T/10/

$("select").change(function(){
  selVal = $(this).children("option").filter(":selected").text();
    $(this).parent().next('td').html(selVal);  
});


//no need for the index as posted in the fiddle

Edited by diafol

0

I need to present the value result in a table like this

<table border="1"> 
<tr><th>Fully Successfull</th><th>Exceptional</th><th>Needs Improvement</th></tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>



</table>

Next TD is not working
0

SOmething like this?

<select id="data">
    <option selected="selected"></option>
    <option value="1">Fully Successfuly</option>
    <option value="2">Exceptional</option>
    <option value="3">Needs Improvement</option>
</select>

<br>
<br />
<select id="data2">
    <option selected="selected"></option>
    <option value="1">Fully Successfuly</option>
    <option value="2">Exceptional</option>
    <option value="3">Needs Improvement</option>
</select>

<br />
<select id="data3">
    <option selected="selected"></option>
    <option value="1">Fully Successfuly</option>
    <option value="2">Exceptional</option>
    <option value="3">Needs Improvement</option>
</select>

<br />
<select id="data4">
    <option selected="selected"></option>
    <option value="1">Fully Successfuly</option>
    <option value="2">Exceptional</option>
    <option value="3">Needs Improvement</option>
</select>

<br />
<select id="data5">
    <option selected="selected"></option>
    <option value="1">Fully Successfuly</option>
    <option value="2">Exceptional</option>
    <option value="3">Needs Improvement</option>
</select>

    <table border="1"> 
<tr><th>Fully Successfull</th><th>Exceptional</th><th>Needs Improvement</th></tr>
<tr>
<td>
<span id="dataval"></span>
</td>
<td>
<span id="dataval2"></span>
</td>
<td>
<span id="dataval3"></span>
</td>
</tr>
<tr>
<td>
<span id="dataval4"></span>
</td>
<td>
<span id="dataval5"></span>
</td>

</tr>


</table>
0

Here's an alternative, using a grid referencer (row from select index and column from option index):

http://jsfiddle.net/bSC5T/12/ 

I've used bullets to identify the answer, but you can easily add css to change backgrounds etc. With this, you don't need the full text if that's in the heading already. You could change the bullet to a tickmark, whatever - may look better.

$("select").change(function(){
    col = $(this).val();
    row = $('select').index(this);
    $("tr:eq(" + (row + 1) + ") > td").html(''); //must be a better way than this
    $("tr:eq(" + (row + 1) + ") > td:eq("+ (col) + ")").html('&bull;');
});


<table border="1"> 
        <tr><th>Unanswered</th><th>Fully Successfull</th><th>Exceptional</th><th>Needs Improvement</th></tr>
        <tr><td>&bull;</td><td></td><td></td><td></td></tr>
        <tr><td>&bull;</td><td></td><td></td><td></td></tr>
        <tr><td>&bull;</td><td></td><td></td><td></td></tr>
        <tr><td>&bull;</td><td></td><td></td><td></td></tr>
        <tr><td>&bull;</td><td></td><td></td><td></td></tr>
</table>

If this is the only table in the page, it should work. Also notice the lack of spans.

//EDIT

Something like this:

http://jsfiddle.net/bSC5T/14/

If you are going down this route, then it may be better to just do a checkbox type thingy - where you can just click on a td cell to select.

Edited by diafol

0

Is working fine in fiddle but Whe I transfer to my select statems inside grid 960. The position of the checkmarks is out of order

0

Files in the editor toolbar? Otherwise, can you uplaod a pic somewhere and link to it? I'm afraid I don't give out my email.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.