Retrieve textarea value within a div element in JQUERY - javascript

I have a few div elements where within each div tag, I have other form elements. For eg:
<div id="div1"><input type="text" name="answer" id="answer"></div>
<div id="div2"><textarea name="answer" id="answer">Some Value</textarea></div>
<div id="div3"><textarea name="answer" id="answer">Some Value</textarea></div>
How can I retrieve the textarea for div3 only. Here is what I have, but I am always only getting back the text area of div2
var divElement = dojo.byId('div3');
if ($('textarea', divElement).length > 0){
var text = $('textarea#answer').val();
}
Help!

var firstTextarea = $('#div3').find('textarea :first').val();

Try the following selector
var value = $('#div3 textarea').val();
alert(value);
Note: Your solution is using duplicate id values for the textarea and input tags. It's not legal to have multiple id`s and will lead you to pain down the road. It would be best to change your tags to have unique id's and then query that directly. For example
HTML:
<div id="div1"><input type="text" name="answer" id="answer1"></div>
<div id="div2"><textarea name="answer" id="answer2">Some Value</textarea></div>
<div id="div3"><textarea name="answer" id="answer3">Some Value</textarea></div>
Javascript
var value = $('#answer3').val();
alert(value);

well, you have assigned same ids to 3 elements, that is not a good practice. Every element should have unique id. In case you have assigned same id, you will always retrieve first element from your code.
If you want to retrieve div 3 textarea, use following selector :
$('#div3 textarea).val()

Related

Dynamically replace checkboxlist display text

Could someone help me if there is any way to dynamically change the text of a checkboxlist control
display text without removing the checkbox icon.
I got the following HTML code:
<div class="classname1">
<div class="row checkbox-list list-container">
<label for="Example_Id">
<input type="checkbox" name="Example.Id" id="Example_Id" value="3"> Replace this text.
</label>
</div>
</div>
Is there any way to change this entire text. Appreciate your help!!!
You can do this:
Wrap the text inside a span
Search for the label of the input using input.labels array
Then, use label.querySelector('span') to get the span element
Update the span text using span.textContent = ...
const span = window.Example_Id.labels[0].querySelector("span");
span.textContent = value;
Codesandbox: https://codesandbox.io/s/focused-brown-w6so1r?file=/src/index.js:94-186

How to find the elements with data attribute and ID?

Is it possible to find out an element ID in the same sentence?
<div class="test">
<input id="999" type="text" data-test="2">
</div>
Example
$('.test').find('[data-test="2"] #999)
I tried to find a specific input in my html code, but this input exists many times with the same id value, the only difference is the attr "data-test" (the number is incremental)
Any help for this?
So here is an example, problem is 999 is not valid for an ID, and will not work in a query selector.
Remember an id should be unique also, so I am not sure why you need to combine?
const parent = document.querySelector('.test');
const child1 = parent.querySelector('[data-test="2"]');
const child2 = parent.querySelector('[data-test="3"]');
console.log(child1.value);
console.log(child2.value);
<div class="test">
<input class="demo1" type="text" data-test="2" value="input1">
<input class="demo1" type="text" data-test="3" value="input2">
</div>
If your markup is valid, ids need to be unique for the entire page. So you can skip the data part of the selector.
$('#999')
Will do the trick in a valid document. However if you use incremental numbers for various elements your ids are likely not unique. It would be better to use classes in this case.

jQuery print variables in SPAN or P tags

I am trying to append a variable to an HTML SPAN tag or a P tag. I can show the variable in an INPUT tag with no problem. I am not sure why I am having an issue showing the variable in any other tags.
<script>
$(function()
{
$('.forecastedit'.click(function(e)
{
e.preventDefault();
$uid = $(this).attr('data-uid');
$service = $(this).attr('data-service');
$pol = $(this).attr('data-pol');
$('#uid').val($uid); // also tried $('.uid').val($uid);
$('#fcservice').val($service); // also tried $('#fcservice span').val($fcservice);
$('#fcpol').val($pol);
$('#forecastmodal').modal('show');
});
});
Here is the HTML that needs to be appended:
<div class="modal fade" id="forecastmodal">
<div class="modal-content">
// I have no problem getting the variables to print in the INPUT tags
<input type="text" class="form-control uid" id="uid" />
<input type="text" class="form-control fcservice" id="fcservice" />
<input type="text" class="form-control fcpol" id="fcpol" />
// These are the tags I would like to get the variable to print
<span class="uid" id="uid"></span>
<p class="service" id="service"></p> // P tag just for example
<span class="fcpol" id="fcpol"></span>
</div>
</div>
To reiterate, I want to be able to print out the JavaScript variables into SPAN tags or P tags rather than INPUT tags.
input, textarea etc. have the value attribute. Other tags like span, div etc. don't have that. You can use .text("my text") to insert the text into these elements
For more information:
jQuery add text to span within a div
There are several errors with your script
1) the click listener is wrongly applied
2) you should not use more than one #id per page
3) val() is meant to be used with form elements
Hope this fiddle helps you http://jsfiddle.net/nyum4pLa/

Modify the text of my radio input button?

Your average radio button has a name and value, but also some text next to it, in this case "Change this text."
How can I change this in javascript? Or even alert it? AFAIK, it is NOT the .inner html.
HTML:
<input type="radio" name="radioOption1" value="Array 1"> Change this text
Javascript
var confirmIExist = document.getElementsByName("radioOption1");
alert(confirmIExist.innerHTML);
//alerts undefined
If it's not .innerHTML, what is it? if I grab the input object with either getElementByName or getElementById, what chunk after that represents the Alert text?
You could use alert(confirmIExist[0].nextSibling.textContent), but wouldn't it be better to place the text next to the radio button in a <label> and then get the inner html of that
<input type="radio" id="radioOption1" name="radioOption1" value="Array 1"><label for="radioOption1" id="r1option">Change this text</label>
...
var label = document.getElementById("r1option");
alert(label.innerHTML);
You cannot set inner html for a input element. instead wrap your text with a and give it a ID
<input type="radio" name="radioOption1" value="Array 1"> <label id="radioText">Change this text</label>
input is a self-closing element. It cannot have innerHTML
nextSibling will return the Node that follows the radio button.
document.getElementsByName('radioOption1')[0].nextSibling.nodeValue = 'Text changed';
jsFiddle Demo
confirmIExist[0].nextSibling.textContent="abc"

Cloning a div resets all selected items of the destination div

The problem I have :
I click "add"
I select 2nd option
I click "add"
Problem : my first select-list's selected option index = 0;
This should not happen, but I can't figure out why it does it anyway. Can anyone tell me what I did wrong?
<script type="text/javascript">
function add(){
var div =document.getElementById('ruletemplate').cloneNode(true);
document.getElementById('rules').innerHTML += div.innerHTML;
return false;
}
</script>
<div id="ruletemplate" style="display: none;">
<div >
<label for="rule">Rule</label>
<select name="rules[][option]">
<option>MAX PERS</option>
<option>MIN PERS</option>
</select>
<input name="rule[][amount]" type="text"/>
</div>
</div>
<form>
<div id="rules" >
</div>
<a id="addRule" href="" onclick="javascript: add(); return false;">add</a>
<input type="Submit" value="Save" />
</form>
The reason it is doing that is you are setting the innerHTML which means the entire thing is reparsed. You will need to append the element to container instead. Try this it should keep each select's position.
function add(){
var div =document.getElementById('ruletemplate').cloneNode(true);
div.style.display='block';
document.getElementById('rules').appendChild(div);
return false;
}
The option element maintains its current selected state with the selected javascript property (not to be confused with the selected attribute, which corresponds to default selected state).
This isnt cloned - so you would have to update the selection manually
Note - you cannot have duplicate ids on a single document - when you clone you element you are duplicating ids
In some browsers (Firefox, Chrome..) the DOM object is not updated (the text input with its value and the selected option with the "select" attribute), so when you call innerHTML you get the original structure without values.
You have to force the DOM update of the object, like this: http://dev-answers.blogspot.it/2007/08/firefox-does-not-reflect-input-form.html

Categories