We Keep Coding

How to store an Input value and have it appear inside a <p> element on another page

I'm very new to Javascript/JQuery and wanted to know how i can store the values of these Inputs:
<input type="number" id="rooms_amount_bedroom" autocomplete="off" value="0">
<input type="number" id="rooms_amount_bathrooms"autocomplete="off" value="0">
<input type="number" id="rooms_amount_kitchens" autocomplete="off" value="0">
inside this input <p> element:
<p class="chosen_service__room_types">""</p>
using pure Javascript. Thanks for the help!

You can add an Event Listener to the input and set its value in localStorage.
In case you want to update the storage every time the user inputs you can do this:
document.getElementById('rooms_amount_bedroom').addEventListener('input', function(){
let val = this.value;
localStorage.setItem('input',val)
})
<input type="number" id="rooms_amount_bedroom" autocomplete="off" value="0">
In case you want to update the storage once on a button click:
document.getElementById('btn').addEventListener('click', function(){
let val = document.getElementById('rooms_amount_bedroom').value;
localStorage.setItem('input',val)
})
<input type="number" id="rooms_amount_bedroom" autocomplete="off" value="0">
<button id="btn">Update</button>
Then, on the other page, you can set the stored value to the paragraph's content on load as follows:
window.onload = function(){
document.getElementsByClassName('chosen_service__room_types')[0].innerHTML = localStorage.getItem('input');
}
<p class="chosen_service__room_types"></p>

Example 1. Using a link
page 1
Change WhateverItIsYouArClicking to #link if what you are clicking has id="link"
or ".someClass" if what you are clicking has class="someClass"
window.addEventListener("load",function() {
document.querySelector("WhateverItIsYouArClicking").addEventListener("click",function(e) {
e.preventDefault(); // if it is a link or a submit button
const fields = [...document.querySelectorAll("input[type=number]")].map(fld => fld.id+"="+fld.value);
location = "index.html?"+fields.join("&");
})
})
Page 2
window.addEventListener("load",function() {
const url = new URL(location.href);
document.querySelector(".rooms_amount_bedroom").textContent = url.searchParams.get("rooms_amount_bedroom");
document.querySelector(".rooms_amount_bathrooms").textContent = url.searchParams.get("rooms_amount_bathrooms");
document.querySelector(".rooms_amount_kitchens").textContent = url.searchParams.get("rooms_amount_kitchens");
})
Example 2 using a form
<form action="index.html">
<input type="number" id="rooms_amount_bedroom" autocomplete="off" value="0">
<input type="number" id="rooms_amount_bathrooms"autocomplete="off" value="0">
<input type="number" id="rooms_amount_kitchens" autocomplete="off" value="0">
<input type="submit" />
</form>
and on page 2 have the same as above

How do I set a Number Input Into a javascript variable?

I want to set the value input by the user to var numberr, Not the value that is already there eg(value="9").
I might be completely doing the wrong thing I just want to know how to store a value Inputted by the user :/
var numberr = document.getElementById("myNumber").value;
function myFunctionVar() {
document.getElementById("myNumber").value = numberr;
}
<form action="/action_page.php">
<input type="number" id="myNumber" value="9">
<input type="submit">
</form>

You can try parseInt
document.getElementById("btnmyNumber").addEventListener("click", myFunctionVar);
function myFunctionVar() {
var numberr = parseInt(document.getElementById("myNumber").value, 10);
alert(numberr);
<form >
<input type="number" id="myNumber" value="9">
<input type="submit" id="btnmyNumber">
</form>

Try it:
let myNumber;
let input = document.querySelector('#myNumber')
input.addEventListener('input', function(e){
myNumber = e.target.value
console.log(myNumber)
})
Vote up if it helped)

Choosing among radio buttons and Text Field

I have 2 radio buttons. All of them have different values. I also have one text field, in case I need a different value, I can enter that value on that text field.
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="url" value="https://example.com/fee/25"> $25
<input type="radio" name="url" value="https://example.com/fee/50"> $50
<input type="submit" value="Submit">
</form>
and here is the Javascript I've found to make radio buttons working
<script type="text/javascript">
function doSubmit(form) {
var urls = form['url'];
var i = urls && urls.length;
while (i--) {
if (urls[i].checked) {
window.location = urls[i].value;
}
}
document.getElementById("amount").value;
return false;
}
</script>
I have one text field:
<input type="text" name="amount" size="10" id="amount" value="">
Ok. If the amount is entered, then I need to use this code:
document.getElementById("amount").value
But how to make it working with radio buttons? I have created this JS code:
<script type="text/javascript">
var link = "https://example.com/fee/";
var input= document.getElementById('amount');
input.onchange=input.onkeyup= function() {
link.search= encodeURIComponent(input.value);
};
</script>
What I'm doing wrong? Thanks in advance for your time. I love and enjoy learning from experts.

I would create a separate radio button for the text input:
var options = Array.from(document.querySelectorAll("[name=url]"));
amount.addEventListener('focus', function() {
options[0].checked = true; // If textbox gets focus, check that radio button
});
options[0].addEventListener('change', function() {
amount.focus(); // if first radio button gets checked, focus on textbox.
});
function doSubmit(form) {
// get checked value, replace empty value with input text
var value = options.find( option => option.checked ).value || amount.value;
window.location = "https://example.com/fee/" + value;
return false;
};
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="url" value="" checked>
$<input type="text" name="amount" size="5" id="amount" value="" >
<input type="radio" name="url" value="25"> $25
<input type="radio" name="url" value="50"> $50
<input type="submit" value="Submit">
</form>

Instead of using the url as the value for the radio buttons, consider using the value you wish to pass to the url:
function doSubmit(form) {
var endpoint = "https://example.com/fee/";
// gets the values of input elements that were selected
var checkedValues = Array.from(form.amounts)
.filter(radio => radio.checked)
.map(radio => radio.value);
// if a radio button was checked, use its value
// otherwise, use the value in the text field
var amount = checkedValues.length ?
checkedValues[0] : form.amount.value;
console.log('redirecting to: ', endpoint + amount);
return false;
}
// uncheck radio buttons when text is entered
function uncheck() {
Array.from(document.querySelectorAll('input[name="amounts"]'))
.forEach(radio => radio.checked = false);
}
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="amounts" value="25"> $25
<input type="radio" name="amounts" value="50"> $50
<input type="text" name="amount" onkeyup="uncheck()">
<input type="submit" value="Submit">
</form>
Edit: Wow I completely forgot you could use the :checked attribute as a css selector. In this case, the code becomes quite simple:
function doSubmit(form) {
// select checked inputs with the specified name attribute
var checkedRadio = document.querySelector('input[name="amounts"]:checked')
// if we have a radio button that is checked, use its value
// otherwise, use the text input's value
var amount = checkedRadio ? checkedRadio.value : form.amount.value;
window.location = 'https://example.com/fee/' + amount;
return false;
}
// uncheck radio buttons when text is entered
function uncheck() {
Array.from(document.querySelectorAll('input[name="amounts"]'))
.forEach(radio => radio.checked = false);
}
<form action="" onsubmit="return doSubmit(this)">
<input type="radio" name="amounts" value="25"> $25
<input type="radio" name="amounts" value="50"> $50
<input type="text" name="amount" onkeyup="uncheck()">
<input type="submit" value="Submit">
</form>

Passing value from one field to another

I want to pass the value 9112232453 of one textfield to another.
I know I need Javascript for this but I don't know how to do it.
HTML
<form method = "post" action="">
<input type="checkbox" name="phone" value="9112232453" onclick='some_func();' >
<input type="text" name="phone" value="" id="phone">
<input type="submit" name="Go">
</form>
Then later, I want to use the value in my php.

You could use a JS. function to take param (this.value) like:
<script>
var some_func = function (val){
var input = document.getElementById("phone");
input.value = val;
}
</script>
<form method = "post" action="">
<input type="checkbox" name="phone" value="9112232453" onclick='some_func(this.value);' >
<input type="text" name="phone" value="" id="phone">
<input type="submit" name="Go">
</form>

The best way is to not obtrude the HTML code with Javascript event handlers.
So, you can add a DOMContentLoaded event listener to the document, and as soon as DOM is loaded:
You add a change event listener to the input[type=checkbox], and then:
1.1. If the checkbox is checked, then you change the input#phone's value to its value
1.2. If not, then you empty the input#phone's value.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('cbphone').addEventListener('change', function(e) {
var phone = document.getElementById('phone');
if (this.checked) {
phone.value = this.value;
// you can even enable/disable the input#phone field, if you want to, e.g:
// phone.disabled = false;
}
else {
phone.value = '';
// phone.disabled = true;
}
});
});
<form method="post" action="">
<input type="checkbox" name="cbphone" id="cbphone" value="9112232453">
<input type="text" name="phone" id="phone">
<input type="submit" name="Go" value="Go">
</form>

before submit form use validation and check whether the field value is filled up or not. if yes get value of the field.
if(document.getElementBy("fieldIdfirst").value!="")
{
document.getElementBy("fieldIdSecond").value=document.getElementElementById("fieldIdfirst");
}
Thanks it..

Try this: http://jsfiddle.net/yhuxy4e1/
HTML:
<form method = "post" action="">
<input type="checkbox" name="phone" value="9112232453" onclick='some_func();' id="chk_phone">
<input type="text" name="phone" value="" id="txt_phone">
<input type="submit" name="Go">
</form>
JavaScript:
some_func = function() {
var checkBox = document.getElementById('chk_phone');
var textBox = document.getElementById('txt_phone');
textBox.value = checkBox.value;
}

calculate two input field values in javascript

Hi i want to calculate two input field values and result will show in third input field so i want to write code in ajax page
<input id="a1" type="text" />
<input id="a2" type="text" onblur="Calculate();" />
<input id="a3" type="text" name="total_amt" value="" />
here javascript function
<script>
function Calculate()
{
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value=parseInt(resources) * parseInt(minutes);
document.form1.submit();
}
</script>
starting its working but nw its not working please help me
Thanks in Advance

Look this! Work it.
http://jsfiddle.net/op1u4ht7/2/
<input id="a1" type="text" />
<input id="a2" type="text" onblur="calculate()" />
<input id="a3" type="text" name="total_amt" />
calculate = function()
{
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value = parseInt(resources)*parseInt(minutes);
}

Try AutoCalculator https://github.com/JavscriptLab/autocalculate Calculate Inputs value and Output By using selector expressions
Just add an attribute for your output input like data-ac="(#firstinput+#secondinput)"
No Need of any initialization just add data-ac attribute only. It will find out dynamically added elements automatically
FOr add 'Rs' with Output just add inside curly bracket data-ac="{Rs}(#firstinput+#secondinput)"

My code is from an answer above. Special thank for you!
calculate = function (a, p, t) {
var amount = document.getElementById(a).value;
var price = document.getElementById(p).value;
document.getElementById(t).value = parseInt(amount)*parseInt(price);}
<input type="number" id="a0" onblur="calculate('a0', 'p0', 't0')">
<input type="number" id="p0" onblur="calculate('a0', 'p0', 't0')">
<input type="number" id="t0" >
<hr>
<input type="number" id="a1" onblur="calculate('a1', 'p1', 't1')">
<input type="number" id="p1" onblur="calculate('a1', 'p1', 't1')">
<input type="number" id="t1" >

put in you form id="form1"
the JavaScript is look like this.
calculate = function()
{
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value = parseInt(resources)*parseInt(minutes);
document.form1.submit();
}