We Keep Coding

User input to build URL

I have a bit of experience with HTML but am very new to JavaScript. In essence, I would like for a user input to be part of a URL. For example, we could have something simple such as:
<script>
function get_cityname() {
var cityname = document.getElementById("cn").value;
alert(cityname);
}
</script>
<form>
Enter city name:
<input type = "text" size = "12" id = "cn">
<input type = "submit" onclick = "get_cityname();">
</form>
This will create a textbox where a user inputs their text (city name) and then click the 'submit' button next to it, and an alert should pop up based on the information they provided, just to make sure this works. However, this code only would seem to work (because of the 'onclick' command) to work for one user input. Therefore, I have 2 questions:
How could the above variable be included in a URL string? If it were something simple as:
URLstring = "https://sampleurl" + cityname + "moretext.html"
How could this be expanded if I want to include two or possibly even n number of inputs? For example, if I create more user prompt boxes and want to have the user also be able to input their zipcode, or state abbreviation, for example:
URLstring = "https://sampleurl" + cityname + "moretext" + zipcode + "moretext" + "stateabbreviation.html"

You could do something along these lines (it would be the same for one or more fields):
// Ensures the DOM (html) is loaded before trying to use the elements
window.addEventListener('DOMContentLoaded', function() {
var cnInput = document.getElementById("cn"),
zipInput = document.getElementById("zip"),
form = document.getElementById("myForm");
form.addEventListener('submit', getUrl); // On submit btn click, or pressing Enter
function getUrl(e) {
var cityname = cnInput.value,
zipcode = zipInput.value,
url = "https://sample.com/" + cityname + "/" + zipcode + ".html";
alert(url);
e.preventDefault(); // Prevent the form from redirecting?
}
});
<form id="myForm">
<label>Enter city name: <input type="text" size="12" id="cn"></label>
<label>Enter zip code: <input type="text" size="12" id="zip"></label>
<input type="submit">
</form>

First specify an action attribute for your form. This is where your form will be submitted. Then set your form's method attribute to GET. Finally, add as many fields as you like (I am assuming you are after a GET query such as https:url.com?key1=val1&key2=val2...):
<form method="GET" action="https://sampleurl">
Enter city name:
<input type="text" size="12" id="cn">
Enter zip code:
<input type="text" pattern="[0-9]{5}"
<input type="submit" ">
</form>

How to go to another html page with onsubmit without erasing data

My code will not work as I am trying to get my values to submit to another html page while keeping them. If I put a return false; it will go to the next HTML page without keeping the values; and if I don't have that it keeps the values without going to the next page. Please help if this is actually possible and if it is not please give me other suggestions.
document.getElementById('form').onsubmit = function(e) {
class matches {
constructor(name1, name2) {
this.name1 = name1;
this.name2 = name2;
}
}
const p1 = document.querySelector('#person1').value;
const p2 = document.querySelector('#person2').value;
const pair = new matches(p1, p2);
console.log(`${pair.name1} and ${pair.name2}`);
return false;
};
<div id="main-header">
<h1>Ship It! ❥</h1>
</div>
<div id="container">
<div id="title">
<h1>What is your magical Ship?</h1>
<form action="pages/lodaing.html" id="form"> <input type="text" placeholder="Your Firstname" id="person1" autocomplete="off">
<input type="text" placeholder="Their Firstname" id="person2" autocomplete="off"><br>
<button id="button" type="submit"><a href="/pages/lodaing.html"onclick="">&#9829</button>
</a>
</form>
</div>
</div>
If I need to add anything else please inform me. Sorry if I am not using the correct terms (I am new to the work).
Thank you!

Remove the code for onSubmit event listener
add name property to your input elements
HTML [Current page]
<form action="pages/lodaing.html" id="form">
<input type="text" placeholder="Your Firstname" name="person1"
autocomplete="off">
<input type="text" placeholder="Their Firstname" name="person2" autocomplete="off"><br>
<button id="button" type="submit">Submit</button>
</form>
You can write below code to get the input values of both inputs on next page
JS [Next page]
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
var person1 = getParameterByName('person1');
var person2 = getParameterByName('person2');
console.log(person1,person2);
Explanation
What's happening here is,
The form on current page [HTML] submits a get request on 'pages/lodaing.html'
When a form is submitted using the 'Get' method [which is default] the new page is loaded with form values as query parameters created from form inputs [?param1=value1&param2=value2]
So, we wrote some script to get exact param values from the url on next page
Inside Javascript function, We pass the param name for which we need to get the value submitted
The function parses the url string for the pattern & searches for the key we pass & return the value for same
Hope this was easy to understand for you!

Making your form send values through a GET method (which is the default) you can use the Javascript URLSearchParams object on the next page, this object has all you need to handle your passed data. With this object you can avoid using the Javascript code on your first page, unless you need specific data checks and/or manipulation of course.
Checkout URLSearchParams here.
NOTE:
In your code you have to specify attribute name for the input fields whose value you want to pass to the other HTML page, as written the form is going to send nothing.

How do I pass a dataset attribute dynamically using user input?

I have a text input box where a user inputs what data-* they want to look for in the DOM. I get this user input on a button click then do a little bit of parsing. How would I get the value of the entered text to be the final part of the HTMLElement.dataset selector?
//HTML for text input
<div class="form-group">
<label for="specificSelector">Specific Selector</label>
<input type="text" class="form-control" id="specificSelector" placeholder="Enter the specific selector here">
</div>
<p id="a"></p>
//JavaScript
var specificSelector = document.getElementById("specificSelector").value;
var a = document.getElementById("a"); // Test element
var parsedSelector = specificSelector.match(/data-(.*)/)[1];
console.log("Parsed selector: ", parsedSelector);
//I need to pass the value of the parsedSelector to the below line
var aData = a.dataset.parsedSelector;
console.log("aData: ", aData);
I have read this from MDN Developers but can't figure it out. It looks like you have to pass the data attribute in camel case but might not be able to do it via a variable?
Thanks in advance.

When you need to access an object property via a variable, you need to use array-bracket syntax.
In the example below, type "data-test" into the text box and then hit TAB.
// Get a reference to the input
var specificSelector = document.getElementById("specificSelector");
var a = document.getElementById("a"); // Test element
// Set up an event handler for when the data is changed and the
// input loses focus
specificSelector.addEventListener("change", function(){
// Extract the custom name portion of the data- attribute
var parsedSelector = specificSelector.value.match(/data-(.*)/)[1];
console.log("Parsed selector: ", parsedSelector);
// Pass the string (stored in the variable) into the dataset object
// of another element to look up the object key.
var aData = a.dataset[parsedSelector];
console.log("aData: ", aData);
});
<div class="form-group">
<label for="specificSelector">Specific Selector</label>
<input type="text" class="form-control" id="specificSelector" placeholder="Enter the specific selector here">
</div>
<div id="a" data-test="test2"></div>

How to Pass a value to input field through javascript

My Question : A value which is passed by an id is showing in the input box. but i can not see that value in the html source code section.
This is my input field In which i am passing a value through a cookie.
<input type="text" id="city" class="i-p-c" value="" autocomplete="off" placeholder="Select City">
What i am doing is: I have a drop down of cities. when i click on the city. i am setting a cookie with the name of scity.
$("#cuto li").click(function () {
autoValuenew = this.id; // console.log(autoValuenew);
document.cookie = "scity=" + this.id + ";path=/;domain=" + cookieondomain;
document.getElementById('city').value = this.id;
//Here is am pass a value to city
return false;
});
After that ..
I can access the value of city but i can not see that value in the html source code.
When i change my field type text to hidden type i can see the value in the htmlsource code.
I do not understand what is going here with these two types. or if i am doing something please tell where i am doing wrong. or if there is another way to do this.

Kindly look this code I hope it helps
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<input type="text" id="city" class="i-p-c" value="" autocomplete="off" placeholder="Select City"/>
<ul id="cuto">
<li type="button" id="cuto">test</li>
</ul>
here is your JQuery
$("#cuto li").click(function () {
debugger;
autoValuenew = this.id; // console.log(autoValuenew);
$.cookie("scity", "test value"); // Setting cookie value
//document.cookie = "scity=" + this.id + ";path=/;domain=" + cookieondomain;
document.getElementById('city').value = this.id;
//Here is am pass a value to city
return false;
});

element.setAttribute('value', myValue);
I think you should not just change the value change it in by changing attribute value.

Get value input form

I would like to retrieve the password value type for the display in the console.log .
I use a html form with ng-model="passwd" to retrieve the value.
And I then uses a controller with $scope.passwd=null; to retrieve the input field.
For now, $scope.passwd remains null in google chrome => Console
'use strict';
angular.module('djoro.controllers')
.controller('WifiSmartConfigCtrl', function($scope, $window, $ionicPlatform){
$scope.passwd = null;
$scope.startSmartconfig = function(passwd){
var onSuccess = function(success){
$scope.passwd = passwd;
};
var onFail = function(){};
$ionicPlatform.ready(function(){
$window.cordova.plugins.Smartconfig.startSmartconfig(onSuccess, onFail, $scope.passwd);
console.log('Password = ' + $scope.passwd);
});
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="wifi_form" class="simple-form">
<div class="list input-fields">
<label class="item item-input" show-hide-container>
<span class="input-label">Password : </span>
<input type="password" name="password" ng-model="passwd" id="passwd" show-hide-input>
</label>
</div>
</form>
<div class="startWifi">
<button class="button button-full button-balanced" ng-click="startSmartconfig()">Start</button>
</div>
Someone an idea to edit the entered value ?
Thank you

Replace $scope.passwd = null; to $scope.passwd = '';
You are using ng-click="startSmartconfig()" and passing nothing but in controller, you have used $scope.startSmartconfig = function(passwd){ so this code will not work.
Set controller function to $scope.startSmartconfig = function(){ and another thing is angularjs is two way binding means when you add value in input text with ng-model="passwd", it also bind the textbox value to $scope.passwd.

I am not aware of $window.cordova thing but what I observed is you didn't pass passwd in ng-click="startSmartconfig()" in html and you are assigning the passwd to $scope.passwd which will be undefined.
And no need to pass passwd in function. You can directly get updated value in $scope.passwd