Inserting a declared variable (var) in window.open.href - javascript

Hi guys I'm just studying about the javascript and asp.net.
I want to insert/append a declared var in window.location.href, I have this code and its working just as I wanted to.
<script type = "text/javascript">
function myFunction() {
//var siteURL = document.getElementByID("txtURL");
window.location.href = "http://www.google.com";
}
</script>
This function is called/triggered through an 'onclick' event. But When I change the code to:
<script type = "text/javascript">
function myFunction() {
var siteURL = document.getElementByID("txtURL");
window.location.href = siteURL;
}
</script>
Can someone help me make the second code given work just like the first one. Thanks in advance.

First of all there is no document.getElementByID function. It's document.getElementById (last char differs).
This function will return object so to get it's value you should use innerHTML (or value if it's input field) attribute like this var siteURL = document.getElementByID("txtURL").innerHTML; and then pass this variable to window.location.href.

Your problems lay with getElementByID. Firstly, you've made a typo, the last letter should be lower case getElementById, and secondly, this returns a Node, from which you probably want it's value
var siteURL = document.getElementById("txtURL").value;

First of all, JavaScript is case sensitive language, so the correct method name for selecting an element by ID is document.getElementById().
Next, if element with ID "txtURL" is a form field, e.g. <input> or <select> you should get its value with siteURL.value. Otherwise if it is any other text container, e.g. <div> or <span> with URL as its text, you may use siteURL.innerHTML.

var siteURL = document.getElementById("txtURL");
//siteURL is just a reference to the text field, not it's value
your variable siteURL is just a dom object at this stage, you need to call the .value property to grab it's value to use as a href. and JavaScript is case sensitive so it's .getElementById() not .getElementByID(). The code below should work just fine
<script type = "text/javascript">
function myFunction() {
var siteURL = document.getElementById("txtURL").value; //add .value here
window.location.href = siteURL;
}
</script>

document.getElementById() returns a DOM object, not a string.
If you have your url stored in a node which ID is "txtURL", you have to access the information itself, probably if stored as contents of the node: via .innerHTML or via .html() in jQuery

document.getElementByID("txtURL") returns a DOM Node. window.location.href is a String-like object. Giving it a DOM Node is silly.
If #txtURL is an input, you can do:
window.location.href = document.getElementById("txtURL").value;
If it's a TextNode you can do something like:
window.location.href = document.getElementById("txtURL").nodeValue;
but this is getting iffy.

Related

Having trouble injecting a style using JS

I would like to add a style to an element but dont have the full element name.
I have used document.querySelector to find the element and save its id to a variable named elID, this is what i have so far.
var elID = document.querySelector('[id^="slide-bg-"]').id;
console.log(elID);
document.getElementById(elID).setAttribute("style", "fill-opacity: 0;");
However it is not setting the attribute, instead i get the error "actionator::exeJavaScript - elID.setAttribute is not a function"
html of the page
Firstly, argument to querySelector should be a String "", not an Array [].
querySelector returns the first matched element not the ID. So elID will reference an Element not an ID String. Also, you're missing quotes around "style"
var elID = document.querySelector('[id^="slide-bg-"]')
elID.setAttribute("style", "fill-opacity: 0;");
also, instead of using elID.setAttribute("style", "fill-opacity: 0;"); go for:
elID.style.fillOpacity = 0;
var elID = document.querySelector('[id^="slide=bg-"]').getAttribute("id");
document.getElementById(elID).setAttribute("style", "fill-opacity: 0;");
This seems to do this trick, thank all for the help.

pass parameter to javascript function in asp.net Page

I want to pass a parameter to a JavaScript function to use in document.getElementByID() as follows:
function PrinGridView(GridViewname)
{
var TableRow= document.getElementByID("GridViewname").getElementsBytagName("tr");
var td= TableRow.item(0).getElementsBytagName("th");
if(td.length>0)
alert('done');
}
In my asp page, I have an image button event:
onClicke="PrinGridView("<%=MyGrideView.ClientID%>")";
but it does not work well.
How can I pass the GridView to a function?
Thanks.
Javascript is case sensitive; it's getElementById not getElementByID, getElementsByTagName not getElementsBytagName etc.
There are other typos; F12 in your browser and the Error/Console will display script errors.
You need to mix quotes as the below is not valid, aside from the typo its not a parseable string as the quotes are broken:
onClicke="PrinGridView("<%=MyGrideView.ClientID%>")";
Change to
onClick="PrinGridView('<%=MyGrideView.ClientID%>')";
Within the function you quote what should probably be the argument, change from
var TableRow = document.getElementByID("GridViewname")
to
var TableRow= document.getElementById(GridViewname)
You have a typo there, onClicke. This is wrong, should be onClick.
Try like this
onClick="PrinGridView(this)"
function PrinGridView(obj)
{
var gridName = obj.id;
var TableRow= document.getElementByID(gridName).getElementsBytagName("tr");
var td= TableRow.item(0).getElementsBytagName("th");
if(td.length>0)
alert('done');
}
this works perfectly for inline code
OnClientClick='<%#String.Format("buttonstatus(""{0}"",""{1}"",""{2}"",""{3}"");return false;", Eval("listingid"), "D", "Archived", Eval("EndDate"))%>'

Variable before CodeMirror function?

I want to get Value from CodeMirror textarea whose name I have in Cookie. How can I do this?
I tried:
var formname = $.cookie("formname");
var formcode = formname.getValue();
Firebug says: formname.getValue is not a function
Thank you very much. I hope you understand me.
formname is a string. A string does not have such a method called getValue. Seeing the appearance of $.cookie("formname"), I assume that you're using JQUery.
Code:
var formname = $.cookie("formname");
var formcode = $('textarea[name="'+formname+'"]').val(); //JQuery method:
// Selects an input element whose name equals `formname` and gets the value of it.
//var formcode = document.getElementById(formname).value;
// Another method: Without use of JQuery, assuming that the textarea's id equals formname

String replacing in a div

I want to replace a particular string in #TextArea1. This happens when a button is clicked.
Trying it out with the below code, but unable to get it work:
$('#TextArea1').text().replace("wef","--");
What is the correct syntax to replace a word in a div?
Pass a function to the text()[docs] method that returns the value you want set:
$('#TextArea1').text(function( i, txt ) {
return txt.replace("wef","--");
});
The function parameters are as follows:
i is the index of the current element in the iteration
txt is the current text content of the current element
The value returned from the function will be set as the new value for the current element.
You are close, try this:
$('#TextArea1').text($('#TextArea1').text().replace(/wef/g,"--"));
Or an optimized one
var $textarea = $('#TextArea1');
$textarea.text($textarea.text().replace(/wef/g,"--"));
If it's a textarea element, you would do:
var $textarea = $('#TextArea1');
$textarea.val($textarea.val().replace(/wef/g,"--"));
You have set the text also:
var text = $('#TextArea1').text().replace("wef","--");
$('#TextArea1').text(text);
or, using a function:
$('#TextArea1').text(function(index, text) {
return text.replace("wef","--");
});
Note: if this is a <textarea>, use val() instead of text().
var text = $('#TextArea1').val().replace("wef","--");
$('#TextArea1').val(text);
replace() creates a new string and returns it, so it's getting returned into thin air. You need to grab the new string and send it back into the textbox. This jsfiddle shows how.
<textarea id="t">
hello
</textarea>
var text = $('#t').text();
text = text.replace('h', 'b');
$('#t').text(text);

How can I dynamically construct a document element string using a variable in Javascript?

This is driving me nuts, and I'm sure it's both possible and surely simple to do.
I have a page with a whole bunch of dynamically created forms on it. In one of my functions, I need to access one of those forms, so I pass the name of the form in a variable.
Then I need to access the name of that form using the document tree.
However, when I put in the variable, it assumes the name of the variable is the name of the form.
So this does not work:
function myAwesomeFunction(nameOfForm)
{
var selection = document.nameOfForm.nameOfInput.selectedIndex;
}
So I looked around the net and saw that I need to use bracket notation, but this doesn't work either:
function myAwesomeFunction(nameOfForm)
{
var selection = document[nameOfForm].nameOfInput.selectedIndex;
}
I also tried with some quotation action:
function myAwesomeFunction(nameOfForm)
{
var selection = document['nameOfForm'].nameOfInput.selectedIndex;
}
... but no joy.
So, where am I going wrong?
For bonus points... what if both the name of the form and the name of the particular input were both dynamic? Then what?
function myAwesomeFunction(nameOfForm, nameOfInput)
{
var selection = document[nameOfForm][nameOfInput].selectedIndex;
}
Look them up in the forms object - this won't work since it is an array and not an object.
use document.getElementsByName
function myAwesomeFunction(nameOfForm, nameOfInput)
{
var selection = document.getElementsByName(nameOfForm)[nameOfInput].selectedIndex;
}
or even better, set an id attribuite on the form and use document.getElementById to find the form
Try using document.getElementById(nameOfForm) (if you have the ID on the form as well)...
If you can include a jQuery reference to your page, you can easily do the following (again assuming you have the ID on the form):
function myAwesomeFunction(nameOfForm, nameOfInput)
{
var form = $("form#" + nameOfForm);
var input = $("#" + nameOfInput + ":input");
var selection = $(input).val();
}
function focusElement(formName, elemName) {
var elem = document.forms[formName].elements[elemName];
}
try this
formname is name of the form and elemname is input label name

Categories