This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
I get URL parameters using Javascript but i can't use those variables in my html.
the JS code is this:
<script>
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("name");
console.log(c);
</script>
and my URL is localhost:8000/something?name=ABC.here i can get the value of name and show it in the browser console but when i try to set the value of an input tag in my HTML it doesn't do it and raises some errors.
my JS and html is like:
<script>
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("name");
document.getElementById("user").value =url.searchParams.get("name");
</script>
<input id="user" value"">
this should have changed the value of the input tag but doesn't.
if your #user input is call before the DOM content is loaded,
document.getElementById("user").value
javascript can't find it so he try to set "value" of an undefined element
try this :
<input id="user" value="">
<script>
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("name");
document.getElementById("user").value = c;
</script>
If you only have one URL parameter this will work. Just make sure that your input element is defined first.
A working copy JsFiddle static input
HTML
<input id="user" value="">
JS
var url = "localhost:8000/something?name=ABC" //replace with code to get url
var name = url.substring(url.indexOf("=") + 1);
document.getElementById("user").value = name;
If you need the input element to be defined after you get the URL parameter:
A working copy JsFiddle dynamic input
HTML
<div id="myDiv"> </div>
JS
var url = "localhost:8000/something?name=ABC" //replace with code to get url
var name = url.substring(url.indexOf("=") + 1);
var parent = document.getElementById("myDiv");
var input = document.createElement("input");
input.value = name;
parent.appendChild(input)
Related
This is how the raw HTML of my form (email) field:
<input type="text" id="FormField_EmailAddress" name="email" value="" size="40">
Now I want to prefill this field based on the URL parameter email like for example mydomain.com/page/?email=my#email.com should prefill my#email.com.
By just using a script in the header or footer of that page.
Is that possible and can anybody share a way how to do it?
PS As a total beginner I tried:
<script>
var url_string = window.location.href;
var url = new URL(url_string);
var email = url.searchParams.get("email") ? url.searchParams.get("email") : '';
document.getElementsByName("email")[0].value = email;
</script>
but it won't work...
Finally, I made it, this is the code that made it work:
<script>
const url = window.location.search;
const urlParams = new URLSearchParams(url);
const email = urlParams.get('email');
document.getElementById('FormField_EmailAddress').value = email;
</script>
I need to change or create a div from an url parameters
<div class="myclass"></div>
www.example.com?change=newdiv
<div class="myclass" id="newdiv"></div>
Is it possible to do this with js?
yes you can do it like that :) :
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("change");
var element = document.getElementsByClassName("myclass");
element[0].setAttribute("id",c);
Basically you need to create new URL property using https, otherwise you will get a
TypeError: www.example.com is not a valid URL.
After that get the search parameter change and create a div where to set the id
const url = new URL('https://www.example.com?change=newdiv');
const changeParamValue = url.searchParams.get("change");
console.log("param value: " + changeParamValue)
let newDiv = document.createElement("div");
newDiv.setAttribute("id", changeParamValue);
console.log(newDiv)
I have some code from input, and I wanna to save it to some body element.
I can add it to the body, but it disappear when page is reloaded
function store(){
var nameOfbook = document.getElementById("nameOfbook");
var value = localStorage.setItem("nameOfbook", nameOfbook.value);
var storedValueBockName = localStorage.getItem("nameOfbook");
var par = document.createElement('P');
par.innerText = storedValueBockName;
document.body.appendChild(par);
}
<form action="\" class="form-login" method="post" />
<input name="text" type="text" id="nameOfbook" required="" placeholder="Book name" />
<button onclick="store()" type="button">StoreText</button>
</form>
This question is basically asking how to retrieve a stored value from localStorage.
So you're setting the value in localStorage, but when you reload the page, you need to have a script that checks to see if there's a value in localStorage and add that data to your page if it is found there.
I would suggest something like:
<script>
var setText = function(text) {
var par = document.createElement('P');
par.innerText = text;
document.body.appendChild(par);
}
var checkLocalStorage = function() {
var value = localStorage.getItem("nameOfbook")
if (value) {
setText(value)
}
}
checkLocalStorage()
function store(){
var nameOfbook = document.getElementById("nameOfbook");
var value = localStorage.setItem("nameOfbook", nameOfbook.value);
var storedValueBockName = localStorage.getItem("nameOfbook");
setText(storedValueBockName)
}
</script>
So I moved the code that appends the title to the page into its own function so that it can be used by both store() and checkLocalStorage(). checkLocalStorage looks to see if there's a value set for nameOfbook and, if there is, passes that value to setText.
Should do the trick.
I want to select the hidden box with jquery.
What i did.
In a web page number of forms exists. I want to select the individual form and its in b/w hidden box with jquery. my Javascript code is:
function replace_val(clickval)
{
var id = $(clickval).attr('id');
var valuer = $(clickval).attr('value');
var formid = $("statictext"+id).val();
$('input[type=hidden][name="packagesale"]').val(valuer);
$('input[type=hidden][name="pre_post"]').val('Postpaid');
alert(formid >'input[type=hidden][name="packagesale"]').val());
}
My HTML Code where this function call.
<input style="width:85px;" class="btn btn-danger" onClick="replace_val(this);" type="button" id="<?php echo $sno;?>" value="<?php echo $value;"/>
I think something is wrong in my alert box code....
Your selector is wrong inside the alert(). You should use:
function replace_val(clickval)
{
var id = $(clickval).attr('id'),
valuer = $(clickval).attr('value'),
formid = $("#statictext"+id);
$('input[type=hidden][name="packagesale"]').val(valuer);
$('input[type=hidden][name="pre_post"]').val('Postpaid');
alert(formid.children('input[type="hidden"][name="packagesale"]').val());
}
you also have error on line
var formid = $("statictext"+id).val();
will be
var formid = $("#statictext"+id).val();
//or
var formid = $(".statictext"+id).val();// if using class
Don't over use jQuery if possible try in pure javascript only
var id = clickval.id;
var valuer = clickval.value;
I have a url variable http://blah.com/blah/blah/blah and I have another url http://shop.blah.com/ I want to take the first url (blah.com) and add the ending blah/blah/blah to the second url http://shop.blah.com
So I end up with http://shop.blah.com/blah/blah/blah
Any idea of how I could do this?
var url1 = 'http://blah.com/blah/blah/blah';
var url2 = 'http://shop.blah.com/';
var newUrl = url2 + url1.replace(/^.+?\..+?\//, '');
It sounds like the jQuery-URL-Parser plugin might come in handy here:
var url = $.url(); //retrieves current url
You can also get specific parts of the URL like this:
var file = $.url.attr("file");
var path = $.url.attr("path");
var host = $.url.attr("host");
...
If you need to get Querystring parameters:
var parm = $.url.param("id");
If the intent is just to add shop to the front of the domain name:
var url2 = url1.replace('://', '://shop.');
<script>
$(document).ready(function(){
//this uses the browser to create an anchor
var blah = document.createElement("a");
//initialize the anchor (all parts of the href are now initialized)
blah.href = "http://blah.com/blah/blah/blah?moreBlah=helloWorld#hashMark";
var shop = document.createElement("a");
//initialize the anchor (all parts of the href are now initialized)
shop.href = "http://shop.blah.com/";
shop.pathname = blah.pathname; //the blahs
shop.search = blah.search; //the blah query
shop.hash = blah.hash; // the blah hashMark
alert("These are the droids you're looking for: "+shop.href);
});
</script>