how to display values in html after we extract data from url
Question
I'm testing a requirement where data will be entered in test1.html and click submit. I get query parameters to another html called test2.html in an url. Now after reading the url data, i need to display values. I'm able to extract data but how to show in html body?
URL i'm getting in test2.html .
file:///D:/test/testing/test2.html?UserFirstName=aa&UserLastName=bb&bday=2020-01-21&Status=consultant&vendorFirstName=aaa&vendorLastName=ccc&employerFirstName=bbb&employerLastName=ddd
javascript and html code in test2.html - Tried this and its not displaying values. Any help?
<html>
<body>
<script>
urlp=[];
s=location.toString().split('?');
s=s[1].split('&');
for(i=0;i<s.length;i++)
{
u=s[i].split('=');
urlp[u[0]]=u[1];
};
var userfirstname=urlp['UserFirstName'];
var userlastname=urlp['UserlastName'];
var vendorfirstname=urlp['vendorFirstName'];
var vendorlastname=urlp['vendorLastName'];
</script>
<div class="tree">
<ul>
<li>
<a href="#">userfirstname</a>
<a href="#">userlastname</a>
<ul>
<li>
<a href="#">vendorfirstname</a>
<li>
<a href="#">vendorlastname</a>
</li>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
1 answers
solution1
1 2020-01-30 18:36:38
You're just assigning it to a variable, not actually placing it on the DOM . You need to do some DOM operations for it. First give an id to the elements where you want the value to go:
<div class="tree">
<ul>
<li>
<a id="userFirstName" href="#"></a>
<a id="userLastName" href="#"></a>
<ul>
<li>
<a id="vendorFirstName" href="#"></a>
<li>
<a id="vendorLastName" href="#"></a>
</li>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Then get those elements with the document object method getElementById :
const userFirstNameElement = document.getElementById('userFirstName');
const userLastNameElement = document.getElementById('userLastName');
const vendorFirstNameElement = document.getElementById('vendorFirstName');
const vendorFirstNameElement = document.getElementById('vendorLastName');
Then give them a value of what you desire:
var userfirstname=urlp['UserFirstName'];
var userlastname=urlp['UserlastName'];
var vendorfirstname=urlp['vendorFirstName'];
var vendorlastname=urlp['vendorLastName'];
userFirstNameElement.innerHTML = userfirstname;
userLastNameElement.innerHTML = userlastname;
vendorFirstNameElement.innerHTML = vendorfirstname;
vendorLastNameElement.innerHTML = vendorlastname;
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.