Develop Reference

Get checkbox values and create window.location URL with them as search parameters

The code is supposed to be a youtube-like website where users can select a bunch of hashtags (via checkboxes) within a form and then click "search" and it's supposed to make a URL dynamically so that "window.location=dynamicURL" will be something like window.location="http://www.example.com/search.php?input1+input3+input4".
I've tried
var data = $('form').serialize();
to get started however when I type "data" in console, it says the variable isn't in use.
What I'm looking at doing is using some js to re-serialize the form each time a user clicks on a hashtag checkbox, so that each time a hashtag is clicked, a new array is made (clearing the old array) to be put to use in creating the URL.
I've tried several types of form serialize code and it doesn't seem to fill a variable that the console can see.
examples:
function ser()
{
$data = 'asd';
var data = 'add';
var serial = $("#divid").html($('#formid').serialize());
}
and
$('#button1').click(function () {
$("#divid").html($("#formid").find("select,textarea, input").serialize());});
both do naught. The var serial is not defined and button1.click doesn't input any html into #divid.
Here is my html:
<div id="divid">
<form action="" name="formid" id="formid" onsubmit="return false">
<button id="button1" onclick="$('.VideoTagsArraysUniqueId').prop('checked', !($('.VideoTagsArraysUniqueId').is(':checked')));ser();">
<label for="VideoTagsArraysUniqueId" class="VideoTagsArraysUniqueId_label">
<p>#VideoHashTag</p>
<input type="checkbox" class="VideoTagsArraysUniqueId" value="VideoHashTag"></input>
<span class="Checkmark">
</label>
</button>
<button id="button2" onclick="$('.VideoTagsArraysUniqueId').prop('checked', !($('.VideoTagsArraysUniqueId').is(':checked')));ser();">
<label for="VideoTagsArraysUniqueId" class="VideoTagsArraysUniqueId_label">
<p>#VideoHashTag</p>
<input type="checkbox" class="VideoTagsArraysUniqueId" value="VideoHashTag"></input>
<span class="Checkmark">
</label>
</button>
</form>
</div>
What I need to do is (when a user clicks on "search"), Get the values and build a js redirect using "window.location=URL" so that the values are separated by "+" so input2+input3+input4.
Are the form.serialize() vars I'm trying to declare supposed to output something when typed into the console?
Do I need to use ajax and a php script to build this redirecting button?
In my code, under "function ser()" I have "$data = 'asd';" and "var data = 'add';". I'm wondering why $data is populating however "data" is not. Are "$variables" treated differently than "variables"?
How to get the inputs and make the URL?
Thanks.

Link user input with login button

I would like to create a sort of login page. Which links to a href depending on the input of the user.
So i have a text input part and a login button.
Then it should go to the website depending on the text input.
Example: users fills in 1234 and clicks on the login button, then the website:
example.com/1234 opens up.
I tried but i cant get it worked.
<input type=text id='token' name="token"/>
<input type=button name=login value="login" onClick=changeQuery()/>
changeQuery(){
var input_query=document.getElementById('sq').value;
window.location="http://www.google.com/"+input_query+"myString";
}

There are many issues with your code...
HTML attribute should be in quotes (so change things like onclick=changeQuery() to onclick="changeQuery()")
Your function does not start with the keyword function
Your textbox control has an id of token... so in the example you have, there is no sq for the getElementById to find
And I'm not sure why you're adding "MyString" at the end of the URL, but that might be part of your intended code
The result should be something like this...
function changeQuery(){
var input_query = document.getElementById('token').value;
//window.location = "http://www.google.com/" + input_query + "myString";
console.log("http://www.google.com/" + input_query + "myString");
}
<input type="text" id="token" name="token"/>
<input type="button" name="login" value="login" onClick="changeQuery()"/>
(Please note, I've commented out the window.location and instead put a console.log so you can see what is produced without it actually navigating to another page)

function changeQuery() {
var input_query =
document.getElementById('token').value;
window.location = "https://www.google.com/search?
q=" + input_query;
}
Above is the correct code for what you want, but google doesn't allow some different origin to make search request.
Refused to display 'https://www.google.com/search?q=somequery' in a frame because it set 'X-Frame-Options' to 'sameorigin'.If you try to redirect some other origin it will work.

How to pass a variable to a specific html page in javascript and call that variable when needed on that page

I am new to html and javascript coding. So i have encountered a problem where i have to send a variable to a specific page and call that function out when needed.
function submit() {
firstname = document.getElementByName("firstname");
document.write(firstname);
}
<html>
<body>
<form>
<p>firstname: <input type="text" name="firstname" />
</p>
<input type="submit" onclick="submit()" />
</from>
</body>
</html>
now what should i do if i want to display the first name on a specific html page in javascript. For example, if i want to display the person name on third page then what should i do.

When you need to pass on an information from one page to another in the web, the general way you do is to use server side sessions. As I can see that there's no server side languages you are using, I believe you have only two options:
Using Query String Parameters (this works all the time).
Using Cookies (if the user has enabled it).
Using Local Storage (if your browser supports it).
For the first option, see How can I get query string values in JavaScript? For the second option, it's been answered a lot of times, so I'll leave the implementation with you: Set cookie and get cookie with JavaScript.
For the second one, you just need to use localStorage object this way:
function submit() {
var firstname = document.getElementByName("firstname");
document.getElementById("output").innerHTML = firstname;
if (!!window.localStorage) {
localStorage.setItem('firstname', firstname);
}
return false;
}
<form onsubmit="return submit();">
<p>firstname: <input type="text" name="firstname" /></p>
<input type="submit" onclick="return submit();" value="Save" />
</form>
<div id="output"></div>
I have also made some changes in your form submission method. And in your new page, you just need to use this code to get the item.
function getname() {
return localStorage.getItem('firstname');
}

There are multiple ways to resolve this issue but it is based upon your requirements. Are you going to third or any other page via a server navigation or is it client-side navigation. In any case you can use localstorage which is supported by almost all latest browser.
On first page you can do localStorage.setItem('firstName', 'Tom'); localstorage is globally available keyword.
On any other page then you can get the value by
var name = localStorage.getItem('firstName');
Other options you can look at cookies, querystring and session storage

when redirecting to next page, bind parameters in redirecting url like this,
window.location.href = "http://yoursite.com/page?data1=one&data2=two";
And fetch them from retreiving end like below,
var url_string = "http://yoursite.com/page?data1=one&data2=two";
var url = new URL(url_string);
var parameter_1 = url.searchParams.get("data1"); //returns "one"
var parameter_2 = url.searchParams.get("data2"); //returns "two"

Using an input to search a local webpage in HTML

I'm stuck on this problem for now a couple of days and I have no idea what to do. I want to navigate directly to another page from my own website only by writing the page name(without the ".html" or ".php" in the input.
Example: you write "index" in the textbox and once you click on the submit button it sends you to "http://www.website.com/index.html". Instead of doing that, it sends me to "http://www.website.com/?2016=index&.=html"
I got it totally wrong because it sends the input names and some symbols around them.
This is my HTML code:
<form id="newsearch" method="get" action="http://www.website.com/">
<p>Enter your confirmation number:</p>
<input type="text" id="searchvalue" class="textbox1" name="2016" size="50" maxlength="120"><input type="submit" class="button1" value=">">
<input type="hidden" id="hiddenvalue1" name="." value="html">
</form>

Your current code simply submits a form, so it is quite correctly adding the entered value as part of the query string ?2016=index&.=html".
To navigate to the location, add a submit handler to the form that cancels the default form navigation and instead sets window.location to the relevant value, perhaps something like this:
document.getElementById("newsearch").addEventListener("submit", function(e) {
e.preventDefault();
var searchText = document.getElementById("searchvalue").value;
var extension = document.getElementById("hiddenvalue1").value;
window.location = this.action + searchText + "." + extension;
// or if you don't want to use the form's action attribute to specify
// the domain you could hardcode it in the function:
// window.location = "http://www.website.com/" + searchText + "." + extension;
});
(Update: the above code would need to be in a script element that is after the form element, and/or in a DOMContentLoaded or window.onload handler.)

How to pass form input and music from one page to another using JavaScript?

So I've been stuck on this for a while now. I have the first page which includes this form:
<form id="user" name="user" method="GET" action="the-tell-tale-heart.html">
Name: <input type="text" name="name">
<br/>
<input type="radio" name="soundtrack" id="st1" value="oldMansion">Soundtrack 1
<br/>
<input type="radio" name="soundtrack" id="st2" value="champion">Soundtrack 2
<br/>
<input type="submit" value="Submit">
</form>
I want the user to have entered the name and chosen a soundtrack. The submit button would redirect them to a second page (the-tell-tale-heart.html) where their name would appear at the top saying "Hello, " and the soundtrack they chose would play.
I've been told to use parse URL to get this info on the second page. I only want to use javascript, no php or perl. This is what I have so far:
<script>
var name="";
var url=document.URL;
function findName(){
var re=/(name)\=(.*)?&/;
name=url.match(re);
name=name.substring(5);
alert(name);
}
findName();
var oldMansion = new Audio('music/stories-of-the-old-mansion.mp3');
var champion = new Audio('music/champion.mp3');
// play one or the other depending on which the user chooses IF STATEMENTS :D
if {
oldMansion.play();
}
else {
champion.play();
}
</script>
I'm not sure what the conditions for the music would be.
EDIT:
So the findName() function actually gets this part of the URL:
?name=izzy&soundtrack=champion
and cuts it down to this on the second page:
izzy&,name,izzy
I would just like to get "izzy" and put that on the top of the page.

Try this:
// ... your code
if(url.indexOf('soundtrack=oldMansion') != -1) oldMansion.play();
else champion.play();

If you're using javascript, you really should just initiate the music on the page you're already on. There's no point in submitting a form to another page - that's the whole point of javascript - making a more user-friendly, interactive design without breaking up the experience with new page loads.
Also, look into jQuery.