HTML Text Input Value not changing in Backend JavaScript - javascript

I am new to web development . I have a question I am trying to build a website that takes input on the front end from the HTML page and actively changes the value on the backend javascript file . The functions I have on the backend rely on the front end input . The input never changes it just stays the default value "google.com". For Reference here is some code of what I am trying to accomplish .
HTML WebPage
<input type="text" id="input" value="google.com" placeholder="somewebsite.com">
Backend JavaScript File
var ajaxWebSiteValue = document.getElementById("input");
function getURL(){
var URL = "http://" + ajaxWebSiteValue.value ;
return URL;
}

It not clear what exactly you want to achieve here because heading, description and code snippet looks contradictory to each other.
1.If you are changing the input value on UI but not getting updated value in backend then use
function getURL(){
var ajaxWebSiteValue = document.getElementById("input");
var URL = "http://" + ajaxWebSiteValue.value ;
return URL;
}
2.If you want to change the value of input from backend.
function getURL(){
var ajaxWebSiteValue = document.getElementById("input");
ajaxWebSiteValue.value = "http://" + ajaxWebSiteValue.value ;
}
Also make sure that you are calling getURL() function from somewhere.

is that is what you want to achive??
var ajaxWebSiteValue;
function myFunction(){
ajaxWebSiteValue = document.getElementById('input').value;
document.getElementById("ajaxWebSiteValue").innerText = ajaxWebSiteValue;
document.getElementById("returnedURL").innerText = getURL();
}
function getURL(){
var URL = "http://" + ajaxWebSiteValue;
return URL;
}
<input type="text" id="input" value="google.com" placeholder="somewebsite.com" />
<p id="ajaxWebSiteValue"></p>
<p id="returnedURL"></p>
<button id="change" onclick="myFunction()">change</button>

Related

How to Add javascript variable inside html attribute

I have a form and I want to add javascript variable inside the value="". value="embedurl"
I am new to adding javascript variable inside html, so far, all of the solutions that i found on google is not working. How to do this? Thanks.
<form id="landing2" action="https://example.com/post10/" method="post">
<input type="hidden" name="name" value=" var embedurl ">
<input type="submit">
</form>
<script>
var embedurl ="https://" + document.location.host + "/embed" + window.location.pathname;
document.getElementById('landing2').submit();
</script>
Try this ,
var embedurl ="https://" + document.location.host + "/embed" + window.location.pathname;
document.getElementsByName("name")[0].value = embedurl; // here you need to set the input value
document.getElementById('landing2').submit();
If you want to add a javascript value, you must do it by javascript.
First, you need to get the dom input element, then set the value
var form = document.getElementById("landing2");
var input = form["name"];
input.value = embedurl;

How can I make a text field for a JavaScript function?

I THINK i have managed to write a script. I just can not make a textfield in HMTL to enter the missing data. It it supposed to receive the keyword from a text field on submit click and navigate to the URL.
I have tried multiple ways of forms and everything. Should have installed VB.net and this would have been done in 5 min.
function urlMaker(keyword) {
var base = "https://www.example.com/list.php?q=";
var ending = "&dhd=1&hdd=low&dtt=list";
var url;
url = base + keyword + ending;
window.location.assign(url);
}
In short words:
I need to know how to create a HTML page with a textfield and a submit button. When I submit it takes the text from the field and run the function and feeds it with the keyword from the textfield. When function has ran it redirects browser.
I'm guessing you have a form like this.
Just attach a submit event-listener to it:
document.querySelector("#search").addEventListener("submit", urlMaker)
function urlMaker(event) {
let keyword = document.querySelector("#keyword").value;
let base = "https://www.example.com/list.php?q=";
let ending = "&dhd=1&hdd=low&dtt=list";
let url;
event.preventDefault();
url = base + keyword + ending;
window.location.href = url;
}
<form id="search">
<input type="text" id="keyword" />
<button type="submit">Search</button>
</form>

JavaScript issue passing value across pages

I have this JavaScript code that processes and displays the value onto the same page; the value is entered using a textbox. I want to pass this value onto another page. this my code:
index.html:
<form action="display.html" method="post" id="name-form">
<p>
<label>Your full Name</label>:<br />
<input type="text" name="fullName">
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
<!-- <p id="result"></p>-->
<script>
var form = document.getElementById('name-form');
form.onsubmit = function (e) {
e.preventDefault();
var result = document.getElementById('result');
result.innerHTML = 'Hi ' + form.fullName.value;
console.log(form.fullName.value);
this.reset();
};
</script>
display.html
<p id="result"></p>
<script>
var form = document.getElementById('name-form');
form.onsubmit = function (e) {
e.preventDefault();
var result = document.getElementById('result');
result.innerHTML = 'Hi ' + form.fullName.value;
console.log(form.fullName.value);
this.reset();
};
</script>
my question is how do I get the value that is entered into the textbox to display onto another page?
If you have a static website, you should consider storing that value in localStorage. So that value will be available all across your web pages.
And if you have a dynamic website you can store that value in db and then request db for that value when you're on some other page.
Choose anyone of the approaches that fits in your case and application.
Read here about localStorage
Use cookies.
Save the name: document.cookie = "name=" + name
Load the name: name = document.cookie.replace(/(?:(?:^|.*;\s*)name\s*\=\s*([^;]*).*$)|^.*$/, "$1");
See here for a simpler way to load cookies

Using pure javascript to prefill a textbox with a url hash

I have a textbox on a web page. I would like to get the value of a URLs hash e.g. 12345 and place it as the value of the textbox upon loading the page (if there is a value), otherwise, I would like the textbox to remain blank.
I have tried using this code:
var hash = window.location.hash.substr(1);
function onoff(){
// pre-fill chat id textbox
if(hash){
var hash_value = window.location.hash.replace('#','');
document.getElementById("chat").value = hash_value;
} else {
document.getElementById("chat").value = '';
}
}
And in the html code(I am having trouble in calling the function).
<input type="text" id="chat" maxlength="5" required="">
If I were to change the value of the hash, would it be possible to have this fill the text box on load?
Sure thing! Just pass your function into window.onload:
var hash = window.location.hash.substr(1);
window.onload = function onoff(){
// pre-fill chat id textbox
if(hash){
var hash_value = window.location.hash.replace('#','');
document.getElementById("chat").value = hash_value;
} else {
document.getElementById("chat").value = '';
}
}
<input type="text" id="chat" maxlength="5" required="">
Hope this helps! :)
Execute your function on DOMContentLoaded. Note that this function can be limited to this:
function onoff(){
document.getElementById("chat").value = window.location.hash.substr(1);
}
document.addEventListener("DOMContentLoaded", onoff);
To also capture pure changes to the hash (in which case the page is not reloaded), also capture the corresponding hashchange event:
window.addEventListener("hashchange", onoff);

Transferring HTML element values, to other files

Let's say I have this piece of code from first.html
<input type="text" id="name">
Go to next page
How can I make it that when you go to second.html, javascript alerts the value of [name] from first.html OR the html adds an h1 tag with the value of [name] from first.html
You can use document.getElementById() function to get input and access it's value property to read what was entered there.
The onclick attribute on your anchor element will execute a custom function which will take the href property of the anchor and append the url-encoded value of the input field.
Then it will go to that new URL.
The return false ensures that built-in href event does not execute.
function link(anchor) {
var name = document.getElementById("name").value
var url = anchor.href + "?name=" + encodeURIComponent(name);
window.location.href = url;
}
<input type="text" id="name">
Go to next page
To read the passed in variable on the receiving page, use the technique described in this SO post:
How can I get query string values in JavaScript?
you could use onclick function on anchor tag.
<input type="text" id="name">
<a onclick="goToNextPage()">Go to next page</a>
<script>
function goToNextPage()
{
var value = document.getElementById('name').value;
window.location.href="second.html?name="+value;
}
</script>
Or you could use form.submit() to post the form values to request.
As HTML is only markup language, not programming language. So, you would need either php/ javascript to fetch that value on second page.
function qs(search_for) {
var query = window.location.search.substring(1);
var parms = query.split('&');
for (var i=0; i<parms.length; i++) {
var pos = parms[i].indexOf('=');
if (pos > 0 && search_for == parms[i].substring(0,pos)) {
return parms[i].substring(pos+1);;
}
}
return "";
}
and then call that function in your second page as.
<script type="text/javascript">
document.write(qs("name"));
</script>

Categories