I have few fields and I want the values inside those fields to get copied to tbody td
. I have made an jsfiddle could someone please take a look at it.
I would like to have each tbody td looks like follow:
Copied value: (value that was typed inside the fields)
Any kind of help is appreciated
Thanks in advance!
Well here is a working version of your code . Now for the explanation.
Quick! What is wrong with this code.
<select id="SubjectTypeName" id="1">
It has two id
s which prevents us from selecting it by id
. Secondly, in your code you are trying to set the value of a textbox ( #1
) to the value of a td
( #S
).
$("#1").val($("#S").val());
So we need to change that code to.
$("#S").val($("#1").val());
Ah, but this code still won't work. This is because a cell doesn't have a value attribute, which is what val()
returns. Instead we are trying to set the innerHTML
; which has a jQuery alternative of html()
.
$("#S").html($("#1").val());
And, tada! It works! =D
EDIT: Getting the text of a selected option.
To do this we need to get the selected option. Which we can do via the :selected
selector.
$("#1 option:selected");
Now we just get the inner text of this using the text()
method.
$("#1 option:selected").text();
Put it all together and we get.
$("#S").html($("#1 option:selected").text());
change the jquery code to
$('#next-step').click(function() {
$('#S').html('Copied value: ('+$("#1").val()+')');
$('#C').html('Copied value: ('+$("#2").val()+')');
$('#T').html('Copied value: ('+$("#3").val()+')');
});
hope this helps
this is your html
<input type="text" value="" id ="three" />
<input type="text" value="" id="two" />
<select id="one">
<option value="">Select something</option>
<option value="2">test1</option>
<option value="3">test2</option>
<option value="4">test3</option>
</select>
<br>
<br>
<table class="box-style3" border="1">
<thead></thead>
<tbody>
<tr><td id="S">Copied value:</td></tr>
<tr><td id ="C">Copied value:</td></tr>
<tr><td id="T">Copied value:</td></tr>
</tbody>
</table>
<input type="button" id="next-step" value="save">
this is your js
$('#next-step').click(function() {
$('#S').html($('#one').val());
$('#C').html($('#two').val());
$('#T').html($('#three').val());
});
and its working
Most of the guys already gave answers, here's mine though.
Your HTML code:
<input type="text" value="" id ="3" />
<input type="text" value="" id="2" />
<select id="1">
<option value="">Select something</option>
<option value="2">test1</option>
<option value="3">test2</option>
<option value="4">test3</option>
</select>
<br>
<br>
<table class="box-style3" border="1">
<thead></thead>
<tbody>
<tr><td id="S">Copied value:</td></tr>
<tr><td id ="C">Copied value:</td></tr>
<tr><td id="T">Copied value:</td></tr>
</tbody>
</table>
<input type="button" id="next-step" value="save">
and here's the script
$('#next-step').click(function() {
$('#S').append($('#1 option:selected').text());
$('#C').append($('#2').val());
$('#T').append($('#3').val());
});
Simpy remove this id on the select tag, id="SubjectTypeName" and you're good to go.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.