Add text to value of textarea on blur without jquery - javascript

So, I have a textarea in a form that records comments. I am attempting to append the identity of the user entering the comment to the end of the comment when entered.
Here is the PHP that checks the user session and gets the name of the user:
<?php
//getting username - displays John Doe
$user = Mage::getSingleton('admin/session');
$firstname = $user->getUser()->getFirstname();
$lastname = $user->getUser()->getLastname();
$append = " [name](by ".$firstname." ".$lastname.")[/name]";
?>
The JavaScript that should be appending to the value on blur:
<script>
function addedcomment(){
var commentby = document.getElementById("#history_comment").value;
var commentby = commentby + '<?php echo $append; ?>';
document.getElementById('#history_comment').value = commentby;
}
</script>
The textarea that comments are entered into:
<textarea name="history[comment]" rows="3" cols="5" style="height:6em; width:99%;" id="history_comment" onBlur="addedcomment()"></textarea>
The code appears on the page exactly in the order and manner that it has been shown here, so the PHP sets the value of $append before the JavaScript appears. I am getting three errors in the dom console:
Uncaught TypeError: Cannot read property 'value' of null
addedcomment
onblur
The CMS I am using works with Prototype, so jQuery does not work all of the time (it seems it is selectively called in) even in noConflict mode.
Things I have tried:
Putting the JS below the textarea.
onblur vs onBlur
jQuery solution

This is because you are adding an un-needed "#" symbol. document.getElementById() requires only the name of the element's id (history_comment). The error is basically telling you that it can't get the property "value" of something that doesn't exist, i.e an element with the id of "#history_comment".You don't need a jQuery solution, what you have here is fine except for the typos.

Uncaught TypeError: Cannot read property 'value' of null
That is because there is no element with the ID "#history_comment". Only one with the ID "history_comment".
Also, changing a textarea's value works by changing its .innerHTML opposed to .value.
Same for reading the value from a textarea.
Why do you want to do this via Javascript?
Wouldn't it be better to do that after the post is submitted via PHP?
The way you are doing it right now, if I "blur" the textarea several times the text you add gets added several times.

Just to continuation to above Answers...
Native JavaScript api document.getElementById just takes id as is where Jquery require the shortcut notations like '#', '.' internally it will use same native api like document.getElementById.
And as text area is a input element, it would have value property, where for other document elements like div, span table would innerHTML property. Even input elements will have innerHTML property but will just return empty.

Related

Unable to read changes made in HTML attribute on client Side by Javascript to ASP.NET server side

I'm trying to read a class that is added by Javascript on a click event, in ASP.NET server side code but it still shows only those class which were add by server while initialization.
Here's the sreenshot of HTML element.
Here is what ASP.NET code is reading.
I'v even tried reading it like
string css = imgThumbnail.Attrinutes["class"].ToString();
but it still returns the same.
I want to read that 'border-10' class on code behind.
You have to use HiddenFileds or a hidden TextBox instead.
Yeah, like Mahdi said, you need to use hidden fields.
So make hidden field, Example:
<input type="hidden" id="Yourstylesheetinfo" asp-for="Yoursheetinfo" />
Then, set value to that field via JS:
var YourElement = document.getElementById(`YourElementsID`);
var style = window.getComputedStyle(YourElement);
//if you looking for border
var property = style.getPropertyValue('border');
//Lastly set value to hidden input
document.getElementById(`Yourstylesheetinfo`).value = property;
//maybe you'll need to use .toString() on property ? on line above this..
Something like this maybe.

Findelement in selenium and retain value in json page

I know there has been a several threads regarding the same question, but none of them worked for me. I have two questions.
Is there any other way to get the element other than using xpath, as I am using the below code to select the line number 9 in the json page, what if the line number changes in a new page. So I want to get the value by some other way.
WebElement ele = driver1.findElement(By.xpath("//[#id='aceEditor']/div[2]/div/div[3]/div[9]/div/span[2]"));
I am updating the double quoted string in line 9(Test_Password) , It is a password and I am changing it using Javascript using below code. Though the value is updated , after a page refresh the value is getting changed to the original value. It is a password and after setting when I go and login with the new password I am not able to do that. I want the values to remain same even after page refresh. Please help me with the code.
Javascript I use:
WebElement ele = driver1.findElement(By.xpath("//*[#id='aceEditor']/div[2]/div/div[3]/div[9]/div/span[2]"));
((JavascriptExecutor)driver1).executeScript("arguments[0].innerText = '"+ replace_text + "'", ele);
HTML Code:
<div class="ace_line" style="height:14px"> <span class="ace_variable">"value"</span>: <span class="ace_string">"Test_password"</span>,</div>
Is there any other way to get the element other than using xpath
Yes, there is other way instead of using xpath to get the same element. You should try using By.cssSelector() as below :-
WebElement ele = driver1.findElement(By.cssSelector("span.ace_string"));
Or
WebElement ele = driver1.findElement(By.cssSelector("#aceEditor span.ace_string"));
Or using By.className() it this element has unique class name as below :-
WebElement ele = driver1.findElement(By.className("ace_string"));
I want the values to remain same even after page refresh.
No, you can't achieve this. Actually it just happens at runtime. You're just temporary changing inner text of the element which wouldn't be effected to change the actual content forever unless you can perform some action to update password which to be store into DB or other place for the backup which will see effect later.

Submit form and return result to same page with javascript

Im trying to write a small js script that will let a user input a string of text and then output it wrapped in some html to the page.
I know how to do this with php, but it seems a little bit of an overkill for such a simple action, plus im always keen to learn something new.
I was playing around using document.myform.submit(); but i wasnt sure how to submit the form value to a variable and then output that var to the screen using document.write();
Any ideas how i would do this ?
Ive created a jsfiddle of the problem here - http://jsfiddle.net/pudle/axcLz/
There are many ways to do it. Here is the code that shows one of them:
document.getElementById("myform").onsubmit = function (event) {
var link = document.getElementById("mylink");
var textField = document.getElementById("text");
link.href = textField.value;
textNode = document.createTextNode(textField.value);
if (link.hasChildNodes()) {
link.removeChild(link.lastChild);
}
link.appendChild(textNode);
event.preventDefault();
};
jsfiddle: http://jsfiddle.net/TMJGH/5/
I added an id attribute to the a element to make things easier.
First line says that we want to change the function that handles "onsubmit" event in our form and then we define that function. The "event" argument is used only to call .preventDefault() in the last line which basically means that we don't want the form to be actually submitted.
We need to get access to DOM elements in the javascript code, so I used document.getElementById. Then I set the href attribute to the value of the textField. To change the actual link text I created a new text node with the value of the textField (it is possible to use textNode.innerHTML but that won't escape HTML code if someone inserts it in the text field). Then I check if our a element already has some text in it - if yes, it has to be removed. Finally I append the text element as a new child to our a element.
If you want to append more HTML nodes inside a node you can easily create them with document.createElement('element name') and append them to link. I also have to mention that jQuery makes playing with DOM a lot easier.

Set the value for a hidden parameter from the URL using javascript

I'm trying to set the hidden field for 'item_number' from the Url QueryString for a paypal form.
So the URL will look like this "http://website.com/customize.aspx?item_number=FFFF"
and code:
<script language="javascript" type="text/javascript">
document.getElementById('item_number').Value = Request.QueryString('item_number');
</script>
<input type="hidden" name="item_number" value="">
But this doesnt work for me. Whats wrong here???? is there a better way?
getElementById only finds elements by their ID. Your hidden doesn't have the id of item_number; it has that name, however. If you add id="item_number" to your input, then the code should work. You also need to move your script to after the DOM element. Otherwise, it will run before the input exists in the document.
Update
Just noticed another mistake. You're setting a Value property, and Request.QueryString('item_number') is also invalid. It looks like you're confusing ASP.NET code with JavaScript. The correct property name for the hidden input is value (lowercase). There is no equivalent of Request.QueryString in JavaScript. Rather, to extract query string values, see this answer for a good way to do so.

IE 8 and getElementById() that is dynamic throws error

I have a function that is called whenever a select changes. If the select had an ID of "foo" there'd be a text field with an ID of "foo_other" after it that by default is styled "display:none".
If a value of "Other" is picked from the select, the function is supposed to display the text field, and set focus to it. If anything other than "Other" is chosen, it should hide the field and remove anything entered.
Works in FF, IE throws an error "Object required". I was trying to avoid doing an eval() around the dynamic variable... Any help is appreciated.
Code:
function checkOther(inObj){
var other_form_id = inObj.name + "_other";
if(inObj.value == 'Other')
{
document.getElementById(other_form_id).style.display = 'inline';
document.getElementById(other_form_id).focus();
}
else
{
document.getElementById(other_form_id).style.display = 'none';
document.getElementById(other_form_id).value = '';
}
}
My guess is you are having multiple IDs in one document (which is invalid), and IE is more picky about it than FF is. Could that be?
The stupid idiots from microsoft are getting the first id OR NAME.
I have a dynamically generated javascript and name and id of one html element (input) are different. But instead getting the element with specified ID, the idiots of IE8 are getting the first element with that NAME.
I believed they are idiots even i was working 15+ years as windows (visual studio) developer, but i didn't expect such a stupidness ...
Even later,
Hope this will help someone else, not the author of the post.
My solution was to add "id_" prefix for the id tag in order to be sure that the idiots are going to get exactly the normal one, nad not another with with the same name. In my case i'm using id tag for javascript things and the name tag for saving to the DB when the form is sent.

Categories

Resources