I have a textarea in each row of my table. I need to set this textarea to the value of a hidden field associated with it.
The names of the textarea and hidden field look like so:
Textarea name:
sc-(Account Name)c
Hidden fields name:
sc-(Account Name)h
An example would be:
Textarea:
sc-usernamec
Hidden field:
sc-usernameh
On submit or while they type the text, I need the hidden field to be updating with what is typed in the textarea. I'm fairly new to jQuery and Javascript, and I'm wondering how I can either a) go through each textarea field setting its content in the associated hidden field or b) set the hidden field to the textarea as they type.
I'm not sure which option I should use, nor how I would go about programming something of this nature.
If the textarea in question is a normal textarea then you can try
$(function() {
$(":hidden[name^='sc']").each(function() { // all hidden starting with sc
var id = this.id.substring(0,this.id.length-1)+"c";
var hid = $(this);
$("#"+id).on("keyup",function() {
hid.val($(this).val());
});
});
});
Live Demo
All bets are of course off if the textarea is converted to an editor - then you need to read
jQuery and TinyMCE: textarea value doesn't submit
which means
$(function() {
$("#myForm").on("submit",function() {
$('#sc_texth').val(tinyMCE.get('sc_textc').getContent());
});
});
or for more
$(function() {
$("#myForm").on("submit",function() {
$(":hidden[name^='sc']").each(function() { // hidden and starts with sc
var textareaID = this.id.substring(0,this.id.length-1)+"c";
$(this).val(tinyMCE.get(textareaID).getContent());
});
});
Live Demo
I think this may help you.
<p><textarea name="sc-username" id="sc-username" ></textarea></p>
<p><textarea name="sc-usernameh" id="sc-usernameh" style="display:none;"></textarea></p>
$(document).ready(function(){
$("textarea").on("keyup",function() {
var name = $("#"+$(this).attr('name')+"h");
if(name)
name.val($(this).val());
});
});
Related
I am trying to dynamically change a HTML input to a textarea field and convert it back to a text field. I can do that properly using the code given below but I am unable to copy over the events that happen on the text field. Is there a way I could copy over the events from the text field over to the textarea? If there is a better way to do this, kindly let me know.
JsFiddle
HTML:
<input id="textbox" type="text" name="fieldValue_0_3" onchange="alert('Hello WOrld');" value="this is a birthdate" tabindex="73">
Change
Change To TextField
Cheers.
Do it this way
var textbox = $("#textbox"); $("#change").click(function () {
$input = $("#textbox")
$textarea = $("<textarea id='textarea'></textarea>").attr({
id: $input.prop('id'),
name: $input.prop('name'),
value: $input.val(),
onchange: $input.attr('onchange'),
tabIndex: $input.prop('tabIndex')
});
$input.after($textarea).remove(); }); $("#changetext").click(function () {
$textarea = $("#textbox")
$input = $("<input></input>").attr({
id: $textarea.prop('id'),
name: $textarea.prop('name'),
value: $textarea.val(),
onchange: $textarea.attr('onchange'),
tabIndex: $textarea.prop('tabIndex')
});
$textarea.after($input).remove(); });
Fiddle: Demo
Note: Its always better to take two different controls
I have the below hidden field and I want to disable all the elements within a specific div based on the value of the hidden field.
Here is the hidden field.
<input type="hidden" id="addincidentval" name="addincidentval" value="Add Incident"/>
The div id is ehdiv and it contains select, input text and check and textarea fields.
Below is the jquery function
$(function(){
var addinc = $("#addincidentval").val();
if(addinc =="Add Incident"){
$("#ehdiv *").disable();
}
})
use this jquery code
$(function(){
var addinc = $("#addincidentval").val();
if(addinc =="Add Incident"){
$("#ehdiv *").prop("disabled",true);
}
})
$("#ehdiv").find('*').prop('disabled', true)
you can also try
$("#ehdiv :input").prop('disabled', true)
How to select ALL children (in any level) from a parent in jQuery?
How to get all child inputs of a div element (jQuery)
:input selects all input, textarea, select and button elements. more: http://api.jquery.com/input-selector/
$(function(){
var addinc = $("#addincidentval").val();
if(addinc =="Add Incident"){
$("#ehdiv :input").attr("disabled", true);
}
})
I have a table data which is generated dynamically via a loop. The td contains a hidden field. below is the code for the same:
<td class="gridtd" id = "r<%=RowNumber%>c<%=ColumnNumber%>">
<input id="hiddendata" type="hidden" value="<%: item.Key%>"/>
</td>
I need to extract the value of the hidden field based on the td selected using jQuery. Please help me get the correct jquery code.
Just select your input and take the value (val()):
$("#hiddendata").val();
If you want to take all hidden input values:
$("input[type='hidden']").each(function () {
console.log($(this).val());
});
Note that the element ids must be unique.
I need to extract the value of the hidden field based on the td selected using jQuery.
If by select you mean, click, you can simply pass this when getting the value:
$("td").on("click", function () {
console.log(
$("[type='hidden']", this).val()
);
});
For your general knowledge, if you do $("#hiddendata", this).val(); inside of the click handler, it will return the correct value (even having multiple ids with the same value).
But definitely, the ids must be unique.
Use this :
$('#hiddendata').val();
$('td').click(
function(event)
{
$(event.target).find('#hiddendata').val();
}
);
It ll give the hiddendata value based on td selection
This will give the value of the hidden field for the selected td.
$('.gridtd').click(function(){
console.log($(this).find('input').val());
});
$('.gridtd').click(function(){
console.log($(this).find('input[type=hidden]').val());
});
You can try this:
$('.gridtd').each(function(){
var currentId = $(this).attr('id');
var hiddenval = $('#'+currentId).find('input[type=hidden]').val();
alert(hiddenval);
})
I create a textarea and a button on a loop based on a certain condition:
while($row_c= mysqli_fetch_array($result_comments))
{
//some code goes here
<textarea type="text" id="pm_text" name="text"></textarea><br>
<button name="send_comment" id="post_comment" class="button" onClick="post_pm_comment()">Post</button>
}
Now in my function "post_pm_comment" I would like to access the text written in the textarea when the post button is clicked.
I tried this, but it only gives me the text of the first textarea and button created:
function post_pm_comment(thidid, pm_id, path, pm,getter)
{
var pm_text = document.getElementById("pm_text").value;
}
What should I do?
Thank you
Your code is outputting an invalid DOM structure, because id values must be unique on the page. You cannot have the same id on more than one element. Remove the id values entirely, you don't need them.
Having done that, the minimal-changes answer is to pass this into your handler:
onClick="post_pm_comment(this)"
...and then in your handler, do the navigation:
function post_pm_comment(postButton)
{
var pm_text;
var textarea = postButton.previousSibling;
while (textarea && textarea.nodeName.toUpperCase() !== "TEXTAREA") {
textarea = textarea.previousSibling;
}
if (textarea) {
pm_text = textarea.value; // Or you may want .innerHTML instead
// Do something with it
}
}
Live Example | Source
I have the following jQuery to modify a table cell when clicked -- it will enable a user to fill out a text input and on enter, return to the normal <td>.
HTML-
<td class="delivered">
{{ title.delivery_date|date:"Y-m-d" }}
</td>
JS -
$("td.delivered").click(function () {
if ($(this).find('#inp').length == 0) {
var before = $(this).text();
var title_id = $(this).parent().attr('id');
var status_type = 'delivery-date'
$(this).html($("<input/>", {
id: 'inp',
style: 'width:70px;',
placeholder: 'YYYY-MM-DD',
change: function () {
selectdone(this, title_id, status_type);
}
}));
$("#inp").focus();
$('#inp').val(before);
}
});
The above js works, but there is a quirk about it.
Even though the input element is 70px, it seems to scroll as if the text width were 200px or so. This makes it so that you are unable to see the placeholder after first clicking the td. How would I make it such that that the cursor is always flush left and the text input is 70px in every which way.
Update: This is what the input looks like after entering text and sending it via POST: u'status': [u'\t\t\t\t\t\t\t\t\t\t\t2012-01-01']. In other words, it seems to be starting with 11 tabs in the text input! Why does this occur and how would I get rid of this?
You could wrap your input box in a div with width:70px;overflow:hidden so you're sure that you won't see any scrollbars.