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/

Member Avatar for iamthwee

http://jsfiddle.net/ytXnC/1/

**Note there is a bug, if you choose option 1 for both FIRST time it doesn't display anything.

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);


});

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" />

I used that as an example but Im not getting anywhere

Member Avatar for diafol

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.

commented: clever +14

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

Member Avatar for diafol

Yeah, so should work then?

Member Avatar for iamthwee

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?

Member Avatar for diafol

http://jsfiddle.net/bSC5T/

I forked you

//edit @iamthwee

seems to work for me (with caveats already mentioned)

Great, but I need to return Value to the input box

Member Avatar for iamthwee

@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?

Member Avatar for diafol

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()

Member Avatar for diafol

Ah, so you did want the text. Cool.

Solved?

Solved

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

like td span etc

Member Avatar for diafol

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()

Member Avatar for diafol

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

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

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>
Member Avatar for diafol

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.

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

Member Avatar for diafol

Could you show a screenshot?

I cannot add a printscreen here. give me your email

Member Avatar for diafol

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.