This question already has answers here:
jQuery Data vs Attr?
(3 answers)
Closed 6 years ago.
<p id="getMessage" data-sid="158">
<strong>Name</strong> : Rahul Kumar<br>
<strong>Total </strong> : 25<br>
</p>
This is my dynamically generated HTML using jQuery
Now this is stable and fix
I executed several commands in Consol and found these results
$('#getMessage').attr('data-sid');
"158"
This is as expected.
But when I execute this
$('#getMessage').data('sid');
160
It shows 160, it should be 158 right ?
I used $('#getMessage').attr('data-sid', result.studentDetails.SID); to set it.
.attr will read the actual attribute.
.data will read the current value of that data item. If you have code which has changed the value (ie, $('#getMessage').data('sid',160)) that will be the current value.
The data() function stores data to a specific element
Store arbitrary data associated with the specified element and/or return the value that was set.
jQuery.data($('#element'), data);
On the other hand, attr() gets or sets attributes form the element.
$('div').attr('data-test', 'test');
<div data-test="test"></div>
as requested a working example..., notice that i can change the value of the data attribute without changing the actual attribute
console.log($('#getMessage').attr('data-sid'));
console.log($('#getMessage').data('sid'));
$('#getMessage').data('sid', 160);
console.log($('#getMessage').attr('data-sid'));
console.log($('#getMessage').data('sid'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="getMessage" data-sid="158">
<strong>Name</strong> : Rahul Kumar
<br>
<strong>Total </strong> : 25
<br>
</p>
Related
This question already has answers here:
Javascript Line Break Textarea
(6 answers)
Closed 4 years ago.
I am writing a little JS script which produces an output on multiple lines, and I want to display this output in a textarea with id message. I know that a textarea does not interpret html. Since the textarea is a form tag, I tried the following to display my result:
$("#message").val("test\\ntest"); writes test\ntest in the textarea
$("#message").val("test
test"); writes test
test in the textarea
But since it is also an open-close tag, I assumed that the .html() attribute was valid on it, and it seems to be, but when I do the following:
$("#message").html("test\\ntest");
$("#message").html("test
test");
it does not update anything visible in the textarea, but when I look into the console and inspect the element, I see the well formated text between the two tags.
The only way I was able to do it is the write directly the text in the textarea, like so:
<textarea id="message>test
test</textarea>
which produces a well formated output, but since I want my JS script to update it it is not relevant.
I read a lot of topics and suggestions, but none seems to answer to my specific question: Is there any way I can modify in Javascript the value of a textarea displaying text on multiple lines?
tl;dr
I tried the following (fill all the textareas before testing):
$("#button").click( function() {
$("#ta1").val("test\\ntest");
$("#ta2").val("test
test");
$("#ta3").html("test\\ntest");
$("#ta4").html("test
test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Fill all the textareas before testing</p>
<button id="button">Test</button>
<p>Test 1 : </p>
<textarea id="ta1"></textarea></br>
<p>Test 2 : </p>
<textarea id="ta2"></textarea></br>
<p>Test 3 : </p>
<textarea id="ta3"></textarea></br>
<p>Test 4 : </p>
<textarea id="ta4"></textarea></br>
<p>Test 5 : </p>
<textarea id="ta5">test
test</textarea>
and none of thoses tests are allowing me to replace the textarea value with multiline text.
Do you have a solution ?
As JJJ correctly states in comments, just include \n in the value:
$("#button").click( function() {
$("#ta1").val("test\ntest");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Test</button>
<p>Test:</p>
<textarea id="ta1"></textarea>
Your attempts fail because:
"\\" is interpreted as a backslash in a string, then n is just a "n". There is no newline.
val will not interpret HTML.
same as the first case
This actually works - for the initial value. When <textarea> is initialised, its value is its content. After it is first edited, it's the value property that matters, and the content is not relevant any more. Which is why it works if you haven't edited the <textarea>, but not if you did.
The first case was closest to working, you just went overboard with backslashes.
This question already has answers here:
Why this JSFiddle does not work [duplicate]
(1 answer)
jsFiddle: no connection between html and js? Can't call simple function from button? [duplicate]
(1 answer)
Closed 5 years ago.
ive used a basic example from w3schools.com to get here:
https://jsfiddle.net/02wu0v49/
function myFunction() {
var x = document.getElementById("fname").value;
document.getElementById("demo").innerHTML = "aaaaaa";
document.getElementById("fname").value = "bbbbb";
alert("lala3");
}
<body>
<p>A function is triggered when the user releases a key in the input field. The function outputs the actual key/letter that was released inside the text field.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
<p>My name is: <span id="demo"></span></p>
</body>
somehow the w3schools version works but it wont do anything on jsfiddle?
and it would be really nice to use [code][/code] or something to format code on stackoverflow...all those indents are terrible.
Change load type to No wrap in - <body>
Here is updated fiddle
Here is Docs
If you open the browser console in JS fiddle it lists the error. The HTML can't find the JS.
This question already has answers here:
getAttribute() versus Element object properties?
(7 answers)
Closed 5 years ago.
I have a simple web-application with an input text field in it looking like this:
<input id="txtip" type="text" value="10.1.1.50" />
The address 10.1.1.50 is a default value for an ip address. And from javascript I would read it like this:
txtip.getAttribute("value")
Now let's suppose to change it to 10.1.1.49. In google chrome the above javascript code will still return 10.1.1.50, while the expression
txtip.value
returns 10.1.1.49.
What is the difference? What is the "right way"?
var el = document.getElementById('testBox');
$(document).focusout(function () {
alert('el.value = ' + el.value);
alert('el.getAttribute("value") = ' + el.getAttribute('value'));
e.preventDefault();
});
<h2>Change value in the text box</h2>
<input id="testBox" type="text" value="original value" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Found this on web might help you try following code type something and focusout
The difference is that element.value is real time and if a user changes let's say, a textbox input, it will reflect that, and show you the new value.
While getAttribute('value') will still show the original value="whateverWasHere" value.
i have this control
<input id="btnBackMP" type="button" value="<" onclick="BackGroup('MP') ;"
disabled="disabled" style="background-color: #BF0000; width: 28px;" />
inside backGroup Function i used this Code Line :
document.getElementById('btnback' + Key).disabled = true;
this line works fine on Web Dev but when i published my site on server (iis 7)
this line stop working till i changed it to the following :
document.getElementById('btnBackMP'+ Key).disabled = true;
any one have idea ?
thanks
Have you changed in calling function argument too since before your are passing 'MP' as argument and using as key
<input id="btnBackMP" type="button" value="<" onclick="BackGroup() ;"
disabled="disabled" style="background-color: #BF0000; width: 28px;" />
and why do not you directly change to this line only :-
document.getElementById('btnBackMP').disabled = true;
Element id is case sensitive. The id must be unique but in theory you could use id="elementa" and id="elementA" in the same document to refer on two different nodes.
This is not recommended
Further details on
https://developer.mozilla.org/en-US/docs/DOM/element.id
The id attribute values are case-sensitive by HTML specifications; see e.g. HTML 4.01 on id. They are thus case-sensitive when used in JavaScript too. Note that the document.getElementById method queries the DOM, which must follow HTML conventions here.
So btnbackMP and btnBackMP are distinct id values. Your code seems to have another error too, as pointed out, but this might be just an issue in formulating the question. (I suppose the last code line was meant to have btnBack not btnBackMP.)
This question already has an answer here:
How to set file input value when dropping file on page? [duplicate]
(1 answer)
Closed 5 years ago.
Note:
The answers & comments below reflect the state of legacy browsers in 2009. Now you can actually set the value of the file input element dynamically/programatically using JavaScript in 2017.
See the answer in this question for details as well as a demo:How to set file input value programatically (i.e.: when drag-dropping files)?
Hello everyone is there any way to set input type file's value from my url ? When I add my image file destination to value it can't be displayed
Here is my view:
<div class="editor-label">
<input type="file" name="file" id="file" value="../../banner_image/test.jpg" required="required" />
</div>
Generally - NO WAY! This filed is protected and in some cases you can get the filename (not the whole path) but ... in some browsers. Not possile to set it via html value attribute or using JS.