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>
Related
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>
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>
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);
First example:
var dbSelected = "File selected: ";
var filenamePanel = document.getElementById('filenamePanel');
filenamePanel.textContent = dbSelected + files[0].name;
var postLink = files[0].link;
document.getElementById('postLink').value = postLink;
var postName = files[0].name;
document.getElementById('postName').value = postName;
If I use <input type="hidden" name="postName" id="postName"> to send the value to another page via POST with PHP, it works.
Second example:
function onSuccessCallback(Blob){
document.getElementById('postName').textContent = Blob.filename;
document.getElementById('postLink').textContent = Blob.url;
document.getElementById('results').textContent = JSON.stringify(Blob);
};
Now, If I use <input type="hidden" name="postName" id="postName"> on the second example to send the 'postName' id value to another page, the value is empty.
What changes are necessary, on the second example, so that I can send the 'postName' id value to another page using a hidden <input> field?
Use .value instead of .textContent to store the data in the hidden input field:
document.getElementById('postName').value= Blob.filename;
I have a file called bpSearch. Inside bpSearch, I have a MODAL window, called addNewModal. Within addNewModal, I have 2 INPUT fields called partnerName and partnerCode. I have a button that once clicked, opens into another MODAL window, called searchPartnerModal.
Here is the a portion of the FORM inside addNewModal:
<form action="bpSearch.php" method="get">
<input type="text" readonly id="partnerName" name="partnerName" />
<input type="text" readonly id="partnerCode" name="partnerCode" />
Go
</form>
When the user clicks GO, it opens searchPartnerModal.
searchPartnerModal is where the user will enter either a code or a name (doesn't have to be both). But upon hitting SEARCH, I use an AJAX call that returns JSON that I parse and eventually return in a UL field called pNames. We're still inside searchPartnerModal.
Here is the FORM inside searchPartnerModal:
<form action="bpSearch.php" method="get">
<input type="text" id="pNameSearch" name="pNameSearch" />
<input type="text" id="pCodeSearch" name="pCodeSearch" />
<input type="button" class="btn" id="pSearch" name="pSearch" value="search" />
</form>
When the user enters a name, I use jquery to send it over to a PHP script that will then return the data in a UL tag.
Here is the jquery that will search if the user enters a name:
$('#pSearch').on('click', function()
{
var partnername = $('#pNameSearch').val();
if($.trim(partnername) != '')
{
$.post('api/pNameSearch.php', {partnername: partnername}, function(data)
{
var obj = JSON.parse(data);
$('#pNames').empty();
var htmlToInsert = obj.map(function (item)
{
return '<li><a id="getPInfo" href="javascript:;"
onclick="getPInfo()" data-selname="'+item.FULL_NAME+'"
data-selcode="'+item.PARTNER_CODE+'">'
+ item.FULL_NAME + ' - '
+ item.PARTNER_CODE + '</a></li>';
}).join('');
$('#pNames').html(htmlToInsert);
});
};
});
With this code, I am able to send the name to search the database table for a valid name. The data is returned via JSON and is parsed and displayed inside the UL tag (called pNames) as LI tags, each with an A tag with their own data-attributes, called data-selname and data-selcode.
Now what I need to do is once the user clicks on one of the returned data links inside pNames, I need to send it back to the previous modal window, addNewModal.
This is where I'm stuck.
If you look inside the Jquery above, after I parsed the JSON, you will see that I created another Javascript function inside the A tag of each returned piece of data, called getPInfo().
Here is what I got so far for the function getPInfo() :
function getPInfo()
{
var selname = ($('#getPInfo').attr('data-selname'));
var selcode = ($('#getPInfo').attr('data-selcode'));
}
At this point, I can alert both variables (selname and selcode) and get them to display in an alert window.
What I want to do is send both of those variables back to addNewModal in the respective INPUT fields, called partnerName and partnerCode.
So selname will go to partnerName and selcode will go to partnerCode.
I didn't display the PHP script that returned the data.
Change the anchor id=getPInfo to class=getPInfo since you have multiple anchors. Next, handle the click event of the anchor and extract the data attributes and set the corresponding form elements in the addNewModal form. Following should work based on the markup i see so far.
$(function(){
$('body').on('click', 'a.getPInfo', function (e) {
var $a = $(e.srcElement || e.target);
$('#partnerName').val($a.attr('data-selname'));
$('#partnerCode').val($a.attr('data-selcode'));
$('#searchPartnerModal').modal('hide'); //assuming bootstrap modal
});
});