Get value for CSS declaration inside HTML attribute - javascript

I am a newbie to CSS selectors and I am trying to get the value for a CSS declaration item assigned to the value attribute:
<input id="textUsername_ClientState" name="textUsername_ClientState" type="hidden" autocomplete="off" value="{"enabled":true,"emptyMessage":"","validationText":"Tom","valueAsString":"Tom","lastSetTextBoxValue":"Tom"}">
Basically I am trying to pull back one of the "Tom" values. I tried document.getElementById("textUsername_ClientState").value.style.getPropertyValue("valueAsString") but it didn't work.
Any help would be greatly appreciated.

As a newbie you have to learn a lot. You should be correct in declaring tag and its attribute
value=" { "enabled":true, "emptyMessage":"", "validationText":"Tom", "valueAsString":"Tom", "lastSetTextBoxValue":"Tom"} "
This line has some syntax error
correct form is
value='{ "enabled":"true", "emptyMessage":"", "validationText":"Tom", "valueAsString":"Tom", "lastSetTextBoxValue":"Tom"}'
Learn the difference between ' and ".
This is the format of JSON string. In this question you have to tried to access the value of valueAsString
before trying to get the value,you need to convert the json string to a javascript array by using JSON.parse() method. After parsing you can access the values individually.
I hope this helps.
Html:
<body>
<input id="textUsername_ClientState" name="textUsername_ClientState" type="hidden" autocomplete="off" value='{"enabled":"true","emptyMessage":"","validationText":"Tom","valueAsString":"Tom","lastSetTextBoxValue":"Tom"}'>
<button onclick="cool()">Cool</button>
<script>
function cool()
{
a=document.getElementById("textUsername_ClientState").value;
b=JSON.parse(a);
alert(b.valueAsString);
}
</script>
</body>

Related

How to get attr value in jquery

I am trying to get value of attr " _last_val " from my input but unable to produce it.
Below is ? i have tried demo
//below is HTML
<form method="post" action="" id="feedback_form">
<input type="text" value="2014-08-11" class="date" name="add_by_datetime" _last_val="2014-08-14" >
<input type="button" name="submit_now" value="Submit" />
</form>
// below is script
jQuery(function($) {
$("form#feedback_form input[name='submit_now']").on("click",function() {
var actualadddate = $("form#feedback_form input[name='add_by_datetime']").attr('_last_val');
alert(+actualadddate+'aaaaaaaaa');
});
});
please let me know where i am wrong.
Thanks
Remove the preceded + from alert and try,
alert(actualadddate + 'aaaaaaaaa');
Live working demo
Note that, in your example you are using .date class to access the attribute if your page has more than 1 element having same class then it will not give you the accurate date. So, be carefull in that case or use unique id to get the attribute.
Remove + operator from beginning. Use:
alert(actualadddate+"aaaaaaaaa");
Demo
because of the + before actualadddate its converted to a number, that results in NaN (Not a Number)
so, remove it
alert(actualadddate+'aaaaaaaaa');
http://jsfiddle.net/59o60g7e/10/
Since, actualadddate is not a number, it thows NaN i.e. not a number. Remove + from the alert which you used to typecast.
Use this instead,
alert(actualadddate+"aaaaaaaaa");
Also, instead of using user defined attributes. Use data attribute to store your custom values.
The only thing wrong in your code is the alert call. http://jsfiddle.net/rcnw1op0/

prepend and append string to input value

I'm trying to prepend and append to an input value some string, like this.
<input type="text" name="protezione" value="" onSubmit="http://www.amministrazioni-zucchetti.it/protezione/CM_<?php echo (this.value) ?>.php">
if I put for example mountains into the input field, the final value send to a form should be:
http://www.amministrazioni-zucchetti.it/protezione/CM_mountains.php
thanks
this.value looks like a Javascript declaration. In PHP, all variables start with $. The next problem is that $this is only used inside a PHP class. Something tells me you aren't doing this inside a class. And then, you refer to object properties using $this->value
For example:
<input type="text" name="protezione" onclick="alert('http://yoururl.com/' + this.value);">
And in your case:
<input type="text" name="protezione" onSubmit="http://www.amministrazioni-zucchetti.it/protezione/CM_' + this.value + '.php">
You're tried something with <?php, but this is the start tag for server-sided php syntax, which can't be executed or interpreted from the client - only from the server. So in this case php doesn't help. You might want to use PHP in your .php file you're sending the request to progrocess the data.

Uncaught TypeError: Cannot set property 'value' of null

I'm trying to pass the entered text to the controller using an ajax request. But i'm getting athe error "Uncaught TypeError: Cannot set property 'value' of null " when I tried to execute JS file..
Here is the HTMLcode:
<form action="">
<input type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
<input type="button" class="searchbox_submit1" name="submit" value="text" onClick="javascript:getSearchText();">
</form>
Here is the JS code:
function getSearchText() {
var searchText = document.getElementByName("search").value;
h_url=document.getElementById("u").value;
var theURL = h_url+'search_all/' + deptid + '/' + searchText + '/1';
$.ajax({
url : theURL,
fail: function(){
},
success : function() {
},
error:function(){
}
});
}
Please help me to fix this.
You don't have an element with the id u.That's why the error occurs.
Note that you are trying to get the value of the input element with the name 'u' and it's not defined in your code.
The problem may where the code is being executed. If you are in the head of a document executing JavaScript, even when you have an element with id="u" in your web page, the code gets executed before the DOM is finished loading, and so none of the HTML really exists yet... You can fix this by moving your code to the end of the page just above the closing html tag. This is one good reason to use jQuery.
In case anyone landed on this page for a similar issue, I found that this error can happen if your JavaScript is running in the HEAD before your form is ready. Moving your JavaScript to the bottom of the page fixed it for my situation.
The problem is that you haven't got any element with the id u so that you are calling something that doesn't exist.
To fix that you have to add an id to the element.
<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
And I've seen too you have added a value for the input, so it means the input is not empty and it will contain text. As result placeholder won't be displayed.
Finally there is a warning that W3Validator will say because of the "/" in the end. :
For the current document, the validator interprets strings like according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the "/" character in such contexts. NB: If you expect <FOO /> to be interpreted as an XML-compatible "self-closing" tag, then you need to use XHTML or HTML5.
In conclusion it says you have to remove the slash. Simply write this:
<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item...">
I knew that i am too late for this answer, but i hope this will help to other who are facing and who will face.
As you have written h_url is global var like var = h_url; so you can use that variable anywhere in your file.
h_url=document.getElementById("u").value;
Here h_url contain value of your search box text value whatever user has typed.
document.getElementById("u");
This is the identifier of your form field with some specific ID.
Your Search Field without id
<input type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
Alter Search Field with id
<input id="u" type="text" class="searchbox1" name="search" placeholder="Search for Brand, Store or an Item..." value="text" />
When you click on submit that will try to fetch value from document.getElementById("u").value; which is syntactically right but you haven't define id so that will return null.
So, Just make sure while you use form fields first define that ID and do other task letter.
I hope this helps you and never get Cannot set property 'value' of null Error.
guys This error because of Element Id not Visible from js Try to inspect element from UI and paste it on javascript file:
before :
document.getElementById('form:salesoverviewform:ticketstatusid').value =topping;
After :
document.getElementById('form:salesoverviewform:j_idt190:ticketstatusid').value =topping;
Credits to Divya Akka .... :)
It seems to be this function
h_url=document.getElementById("u").value;
You can help yourself using some 'console.log' to see what object is Null.
h_url=document.getElementById("u") is null here
There is no element exist with id as u
Add defer to your script tag, if it's in header. It will allow your script to execute after the DOM is loaded.
<script src="script.js type="text/javascript"></script>
It should look like this:
<script src="script.js type="text/javascript" defer></script>

How to Select An Element By Id and Change The Value in javascript

I've got a html element of the form
<input type="hidden" id="someId" value="something">".
Which javascript command will overwrite value?
Thanks for the answer
document.getElementById('someId').value = 'somethingElse';
This is pretty basic, though... You could easily have found this elsewhere..

How can I escape a DOM name in javascript?

I have a form element that I want to address via javascript, but it doesn't like the syntax.
<form name="mycache">
<input type="hidden" name="cache[m][2]">
<!-- ... -->
</form>
I want to be able to say:
document.mycache.cache[m][2]
but obviously I need to indicate that cache[m][2] is the whole name, and not an array reference to cache. Can it be done?
UPDATE: Actually, I was wrong, you can use [ or ] characters as part of a form elements id and/or name attribute.
Here's some code that proves it:
<html>
<body>
<form id="form1">
<input type='test' id='field[m][2]' name='field[m][2]' value='Chris'/>
<input type='button' value='Test' onclick='showtest();'/>
<script type="text/javascript">
function showtest() {
var value = document.getElementById("field[m][2]").value;
alert(value);
}
</script>
</form>
</body>
</html>
Update: You can also use the following to get the value from the form element:
var value = document.forms.form1["field[m][2]"].value;
Use document.getElementsByName("input_name") instead. Cross platform too. Win.
Is it possible to add an id reference to the form element and use document.getElementById?
-- and in the old days (in HTML3.2/4.01 transitional/XHTML1.0 transitional DOM-binding) you could use:
form.elements["cache[m][2]"]
-- but the elements-stuff is, as Chris Pietschmann showed, not necessary as these binding-schemes also allow direct access (though I personally would prefer the extra readability !-)

Categories

Resources