I am trying to make a webpage with a form where you have an input box and a slider. The slider should display the value of the slider but it only works if put it directly in to the main class but not if I put it in anything else for example the form.
So it works if I put the slider part in main class like this.
<div class="main">
<!-- slider -->
<div class="box">
<input step="0.1" type="range" min="0.1" max="5" value="1" name="amount">
</div>
<!-- value display -->
<div class="value">1</div>
<div class="field">
<h1>Halao</h1><br><br>
<form action="https://formsubmit.co/your#email.com" method="POST">
<input type="text" name="name" placeholder="Name" required><br><br>
<br>
<button type="submit">Send</button>
</form>
</div>
</div>
<script>
const slider = document.querySelector("input");
const value = document.querySelector(".value");
value.textContent = slider.value
slider.oninput = function(){
value.textContent = this.value;
}
</script>
</body>
But if it put in the form the value display does not show.
<div class="main">
<div class="field">
<h1>Halao</h1><br><br>
<form action="https://formsubmit.co/your#email.com" method="POST">
<input type="text" name="name" placeholder="Name" required><br><br>
<!-- slider -->
<div class="box">
<input step="0.1" type="range" min="0.1" max="5" value="1" name="amount">
</div>
<!-- value display -->
<div class="value">1</div>
<br>
<button type="submit">Send</button>
</form>
</div>
</div>
<script>
const slider = document.querySelector("input");
const value = document.querySelector(".value");
value.textContent = slider.value
slider.oninput = function(){
value.textContent = this.value;
}
</script>
</body>
I would really appreciate it if some one could explain why it is not working and help me to get it working.
In the form, you have a
<input type="text" name="name" placeholder="Name" required>
which gets selected as querySelector('input')
Either use querySelector('input[type="range"]'), add it id, or a class
Related
I'm not sure if I worded the title correctly to describe my issue.
I am constructing a custom phone number 'field' within a form on my website, which is actually composed of 10 individual fields (digits), all grouped within a particular div (Id=numberContainer).
Currently, I am using some script to force the cursor to start at the first field (Id=userPhone_digit-01), no matter which field within the group the user clicks on.
The code also advances the cursor to the next 'digit' after data is entered into each field.
The code seems to work fine for all of that so far.
However, I would like to expand or modify the code, to have the cursor also start on the first field (Id=userPhone_digit-01) when the user clicks anywhere at all within the entire div (Id=numberContainer) or any elements within the div.
I have experimented with several 'tweaks', including some 'onfocus' things. But so far, I can't seem to get anything to work.
I have included a very stripped down version of the form, containing only the 'phone number' field(s).
I also left the link to the CSS in the 'head' section'.
I left out my failed attempts at tweaking the code and left in only what is currently working.
If anyone has any suggestions, it would be greatly appreciated.
Thanks, Maddison
HTML
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.jamiesexton.com/css/forcefield3.css">
</head>
<body>
<div class="pageContainer">
<div class="blankSpace"></div>
<div class="formContainer">
<form id="requestForm" action="/formHandler.php" method="post" enctype="multipart/form-data">
<div class="center_Wrapper">
<div class="formHeader">- THE FORM -</div>
</div>
<div class="phoneNumber_Container">
<div class="left_Wrapper">
<div class="section_Header">Phone Number</div>
<button class="phoneReset_button" title="Reset"><img src="/images/refreshbutton.png"
width="20px" height="20px"></button>
</div>
<!-- //////////////////// Start 'numberContainer' Div //////////////////// -->
<div Id="numberContainer" class="phoneField_Wrapper">
<div class="leftSpace"><img
src="https://www.jamiesexton.com/images/smallflag.jpg" width="40px"
height="24px"></div>
<p class="plusOne">+1</p>
<p class="phoneNumber_Parentheses_Left">(</p>
<input type="number" id="userPhone_digit-01" name="userPhone_digit-01" class="phoneField"
minlength="1" maxlength="1" tabindex="2" required>
<input type="number" id="userPhone_digit-02" name="userPhone_digit-02" class="phoneField"
minlength="1" maxlength="1" tabindex="3" required>
<input type="number" id="userPhone_digit-03" name="userPhone_digit-03" class="phoneField"
minlength="1" maxlength="1" tabindex="4" required>
<p class="phoneNumber_Parentheses_Right">)</p>
<input type="number" id="userPhone_digit-04" name="userPhone_digit-04" class="phoneField4"
minlength="1" maxlength="1" tabindex="5" required>
<input type="number" id="userPhone_digit-05" name="userPhone_digit-05" class="phoneField"
minlength="1" maxlength="1" tabindex="6" required>
<input type="number" id="userPhone_digit-06" name="userPhone_digit-06" class="phoneField"
minlength="1" maxlength="1" tabindex="7" required>
<p class="phoneNumber_Dash">-</p>
<input type="number" id="userPhone_digit-07" name="userPhone_digit-07" class="phoneField"
minlength="1" maxlength="1" tabindex="8" required>
<input type="number" id="userPhone_digit-08" name="userPhone_digit-08" class="phoneField"
minlength="1" maxlength="1" tabindex="9" required>
<input type="number" id="userPhone_digit-09" name="userPhone_digit-09" class="phoneField"
minlength="1" maxlength="1" tabindex="10" required>
<input type="number" id="userPhone_digit-10" name="userPhone_digit-10" class="phoneField"
minlength="1" maxlength="1" tabindex="11" required>
<div class="rightSpace"></div>
</div>
<!-- //////////////////// End 'numberContainer' Div //////////////////// -->
</div>
<!-- Start Force-Field/Next-Field Script -->
<script>
const
forceField = document.querySelector('#requestForm')
, f_nums = [...forceField.querySelectorAll('#numberContainer input')]
;
forceField.oninput = e =>
{
if ( e.target.matches('#numberContainer input[maxlength="1"]')
&& e.target.value.length===1
){
let nextOneIndx = f_nums.findIndex(el=>el===e.target) +1;
if (nextOneIndx < f_nums.length)
{
f_nums[nextOneIndx].focus();
}
else
{
let nextTab = +e.target.getAttribute('tabindex') +1;
forceField.querySelector(`[tabindex="${nextTab}"]`).focus();
}
}
}
forceField.onclick = e =>
{
if ( e.target.matches('#numberContainer input[maxlength="1"]')
&& e.target.value.length===0
){
let freeOne = f_nums.find(el=>el.value===''); // find 1st input free
if (freeOne) freeOne.focus()
}
}
</script>
<!-- End Force-Field/Next-Field Script -->
<!-- Start Clear-Number-Fields Script -->
<script>
let btnClear = document.querySelector('button');
let inputs = document.querySelectorAll('.phoneField,.phoneField4');
btnClear.addEventListener('click', () => {
inputs.forEach(input => input.value = '');
});
</script>
<!-- End Clear-Number-Fields Script -->
<div class="submitButton_Container">
<div class="center_Wrapper" ><input type="submit" class="submit__button" value="Submit"></div>
</div>
</form>
</div>
</div>
</body>
</html>
Query the numberContainer so you add an onclick event listener. Then onclick get the closest numberContainer, just in case event target is a child of the numberContainer element, we can then query the first input element using the number container element like this e.target.closest('#numberContainer').querySelector('#userPhone_digit-01')
Then any time the user clicks anywhere on the number container element, the first input will focus.
const numCont = document.getElementById('numberContainer')
numCont.onclick = e => e.target.closest('#numberContainer').querySelector('#userPhone_digit-01').focus()
const forceField = document.querySelector('#requestForm'),
f_nums = [...forceField.querySelectorAll('#numberContainer input')];
const numCont = document.getElementById('numberContainer')
numCont.onclick = e => e.target.closest('#numberContainer').querySelector('#userPhone_digit-01').focus()
forceField.oninput = e => {
if (e.target.matches('#numberContainer input[maxlength="1"]') &&
e.target.value.length === 1
) {
let nextOneIndx = f_nums.findIndex(el => el === e.target) + 1;
if (nextOneIndx < f_nums.length) {
f_nums[nextOneIndx].focus();
} else {
let nextTab = +e.target.getAttribute('tabindex') + 1;
forceField.querySelector(`[tabindex="${nextTab}"]`).focus();
}
}
}
forceField.onclick = e => {
if (e.target.matches('#numberContainer input[maxlength="1"]') &&
e.target.value.length === 0
) {
let freeOne = f_nums.find(el => el.value === ''); // find 1st input free
if (freeOne) freeOne.focus()
}
}
let btnClear = document.querySelector('button');
let inputs = document.querySelectorAll('.phoneField,.phoneField4');
btnClear.addEventListener('click', () => {
inputs.forEach(input => input.value = '');
});
<link rel="stylesheet" href="https://www.jamiesexton.com/css/forcefield3.css">
<div class="pageContainer">
<div class="blankSpace"></div>
<div class="formContainer">
<form id="requestForm" action="/formHandler.php" method="post" enctype="multipart/form-data">
<div class="center_Wrapper">
<div class="formHeader">- THE FORM -</div>
</div>
<div class="phoneNumber_Container">
<div class="left_Wrapper">
<div class="section_Header">Phone Number</div>
<button class="phoneReset_button" title="Reset"><img src="/images/refreshbutton.png"
width="20px" height="20px"></button>
</div>
<!-- //////////////////// Start 'numberContainer' Div //////////////////// -->
<div id="numberContainer" class="phoneField_Wrapper">
<div class="leftSpace"><img src="https://www.jamiesexton.com/images/smallflag.jpg" width="40px" height="24px"></div>
<p class="plusOne">+1</p>
<p class="phoneNumber_Parentheses_Left">(</p>
<input type="number" id="userPhone_digit-01" name="userPhone_digit-01" class="phoneField" minlength="1" maxlength="1" tabindex="2" required>
<input type="number" id="userPhone_digit-02" name="userPhone_digit-02" class="phoneField" minlength="1" maxlength="1" tabindex="3" required>
<input type="number" id="userPhone_digit-03" name="userPhone_digit-03" class="phoneField" minlength="1" maxlength="1" tabindex="4" required>
<p class="phoneNumber_Parentheses_Right">)</p>
<input type="number" id="userPhone_digit-04" name="userPhone_digit-04" class="phoneField4" minlength="1" maxlength="1" tabindex="5" required>
<input type="number" id="userPhone_digit-05" name="userPhone_digit-05" class="phoneField" minlength="1" maxlength="1" tabindex="6" required>
<input type="number" id="userPhone_digit-06" name="userPhone_digit-06" class="phoneField" minlength="1" maxlength="1" tabindex="7" required>
<p class="phoneNumber_Dash">-</p>
<input type="number" id="userPhone_digit-07" name="userPhone_digit-07" class="phoneField" minlength="1" maxlength="1" tabindex="8" required>
<input type="number" id="userPhone_digit-08" name="userPhone_digit-08" class="phoneField" minlength="1" maxlength="1" tabindex="9" required>
<input type="number" id="userPhone_digit-09" name="userPhone_digit-09" class="phoneField" minlength="1" maxlength="1" tabindex="10" required>
<input type="number" id="userPhone_digit-10" name="userPhone_digit-10" class="phoneField" minlength="1" maxlength="1" tabindex="11" required>
<div class="rightSpace"></div>
</div>
<!-- //////////////////// End 'numberContainer' Div //////////////////// -->
</div>
<div class="submitButton_Container">
<div class="center_Wrapper"><input type="submit" class="submit__button" value="Submit"></div>
</div>
</form>
</div>
</div>
So, I am trying to get a "thank you" message instead of a form that I have created on HTML. I want to get a thank you message only if the user has submitted all their details and everything.
Here's my HTML:
<div class = "form">
<form>
<!-- Name -->
<label class = "firstName">First name</label><br>
<input type="text" placeholder = "John" required = "required" pattern="[A-Za-z]. {1,20}" id = "firstName"><br>
<label class = "lastName">Last name</label><br>
<input type="text" placeholder = "AppleSeed" required = "required" pattern="[A-Za-z]{1,20}" id = "lastName"><br>
<!-- Email -->
<label class = "email">Email</label><br>
<input type= "email" placeholder = "j.appleseed#example.co.uk" size = "42" required = "required" id = "email"><br>
<!-- Mobile Number -->
<label class = "tel">Mobile Number</label><br>
<input placeholder = "Your Mobile Number" size = "42" required = "required" pattern="[0-9]{6,13}" id = "number"><br><br>
<!-- The Submit button -->
<button class = "submit" onclick="revealMessage()">
<span title="What are you waiting for? Click it!">Submit</span>
</button>
<h1 id = "hiddenMessage" style = "display: none">Thank You!</h1>
</form>
</div>
Javascript:
function revealMessage()
{
document.getElementById("hiddenMessage").style.display = "block";
document.getElementsByClassName("form").style.display = "none";
}
getElementsByClassName is plural. You need to add [0] to the result or better, don't use it
You want to access the submit event - just hiding the form when clicking the button, will not submit the form and also not trigger the validation
You had a bug in your pattern for the First name too
When you hide the form div, the content will hide too
You may want to use AJAX since the form removes the page when submitting - with Ajax you can return thank you from the server
Anyway this shows the thankyou before submitting when things are filled correctly. the HTML5 required and the pattern will not allow submission until correctly filled
document.getElementById("myForm").addEventListener("submit", function(e) {
e.preventDefault(); // pause submission
document.getElementById("hiddenMessage").style.display = "block";
document.getElementById("formDiv").style.display = "none";
setTimeout(function() {
e.target.submit()
}, 2000)
})
<div class="form" id="formDiv">
<form id="myForm">
<!-- Name -->
<label class="firstName">First name</label><br>
<input type="text" placeholder="John" required="required" pattern="[A-Za-z]{1,20}" id="firstName"><br>
<label class="lastName">Last name</label><br>
<input type="text" placeholder="AppleSeed" required="required" pattern="[A-Za-z]{1,20}" id="lastName"><br>
<!-- Email -->
<label class="email">Email</label><br>
<input type="email" placeholder="j.appleseed#example.co.uk" size="42" required="required" id="email"><br>
<!-- Mobile Number -->
<label class="tel">Mobile Number</label><br>
<input placeholder="Your Mobile Number" size="42" required="required" pattern="[0-9]{6,13}" id="number"><br><br>
<!-- The Submit button -->
<button type="submit" class="submit">
<span title="What are you waiting for? Click it!">Submit</span>
</button>
</form>
</div>
<h1 id="hiddenMessage" style="display: none">Thank You!</h1>
Instead of:
document.getElementsByClassName("form").style.display = "none";
Use querySelector:
document.querySelector(".form").style.display = "none";
Also, move your hiddenMessage div outside of your form so it doesn't get hidden with the form on submit.
See the snippet below:
function revealMessage() {
document.getElementById("hiddenMessage").style.display = "block";
document.querySelector(".form").style.display = "none";
}
<div class="form">
<form onsubmit="revealMessage()">
<!-- Name -->
<label class="firstName">First name</label><br>
<input type="text" placeholder="John" pattern="[A-Za-z]. {1,20}" id="firstName" required><br>
<label class="lastName">Last name</label><br>
<input type="text" placeholder="AppleSeed" pattern="[A-Za-z]{1,20}" id="lastName" required><br>
<!-- Email -->
<label class="email">Email</label><br>
<input type="email" placeholder="j.appleseed#example.co.uk" size="42" id="email" required><br>
<!-- Mobile Number -->
<label class="tel">Mobile Number</label><br>
<input placeholder="Your Mobile Number" size="42" pattern="[0-9]{6,13}" id="number" required><br><br>
<!-- The Submit button -->
<button type="submit" class="submit">
<span title="What are you waiting for? Click it!">Submit</span>
</button>
</form>
</div>
<h1 id="hiddenMessage" style="display: none">Thank You!</h1>
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onsubmit
There is an event Called onsubmit on javascript when you submit you can alert or do what ever suits you
<div class="form">
<form onsubmit="myFunction()">
<!-- Name -->
<label class="firstName">First name</label><br>
<input type="text" placeholder="John" required="required" id="firstName"><br>
<label class="lastName">Last name</label><br>
<input type="text" placeholder="AppleSeed" required="required" pattern="[A-Za-z]{1,20}" id="lastName"><br>
<!-- Email -->
<label class="email">Email</label><br>
<input type="email" placeholder="j.appleseed#example.co.uk" size="42" required="required" id="email"><br>
<!-- Mobile Number -->
<label class="tel">Mobile Number</label><br>
<input placeholder="Your Mobile Number" size="42" required="required" id="number"><br><br>
<!-- The Submit button -->
<button class="submit">
<span title="What are you waiting for? Click it!">Submit</span>
</button>
</form>
</div>
<h1 id="hiddenMessage" style="display: none">Thank You!</h1>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
I am trying to submit the form when both the range value changes. The code structure is -
<div class="card price-range-div">
<div class="card-header">
<h4 class="panel-title">Search By Budget</h4>
</div>
<div class="card-body">
<div class="form-group">
<div class="price-slider">
<span>
<label for="">Price from</label>
<input readonly name="priceFrom" id="priceFrom" type="number" value="200000" min="200000" max="1000000"/>
<label for="">Price to</label>
<input readonly name="priceTo" id="priceTo" type="number" value="1000000" min="200000" max="1000000"/>
</span>
<input id="first-input" value="200000" min="200000" max="1000000" step="500" type="range">
<input id="second-input" value="300000" min="300000" max="1000000" step="500" type="range">
</div>
</div>
</div>
</div>
</div>
I have given unique ID's to input field as 'first-input' and 'second-input'. I want to submit form only if two of these range value changes. May be using if and && condition in jquery. But i am not sure how to do this. Currently, I am able to submit form only on one input ie. 'first-input' change. Any help would be highly appreciated.
$('input#first-input').change(function() {
$('form#search-form').submit();
});
A very easy way to understand and implement this is to create a variable that tracks the status of each input. Once both of those variables have been 'changed', then you know you should immediately submit the form. The solution would not scale well to dozens of inputs, but will certainly work for 2.
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<div class="card price-range-div">
<div class="card-header">
<h4 class="panel-title">Search By Budget</h4>
</div>
<div class="card-body">
<div class="form-group">
<div class="price-slider">
<span>
<label for="">Price from</label>
<input readonly name="priceFrom" id="priceFrom" type="number" value="200000" min="200000" max="1000000"/>
<label for="">Price to</label>
<input readonly name="priceTo" id="priceTo" type="number" value="1000000" min="200000" max="1000000"/>
</span>
<input id="first-input" class="trackedInputs" value="200000" min="200000" max="1000000" step="500" type="range">
<input id="second-input" class="trackedInputs" value="300000" min="300000" max="1000000" step="500" type="range">
</div>
</div>
</div>
</div>
<script>
$(function(){
//create variables to track a value change
input1Changed = false;
input2Changed = false;
//fire our handler, whenever one of the two inputs changes
$("input#first-input").change(function() {
input1Changed = true;
if(input1Changed && input2Changed) {
alert("Submit the form here!");
}
});
$("input#second-input").change(function() {
input2Changed = true;
if(input1Changed && input2Changed) {
alert("Submit the form here!");
}
});
});
</script>
I have a JavaScript function that reads from a form where integers are input. For some reason the function isn't executing. I know this since I have a console.log("hello") call outside the function that prints but a console.log() call inside the function isn't printing. I'm not sure what I'm doing wrong. I read input from the table using getElementByID and then use parseInt to make them integers.
HTML
<body>
<div class="container">
<div class="well">
<h1 class="text-center">Multiplication Table</h1>
<p class="text-center">Enter the lowest and highest values to be displayed in
the multiplication table and the table will generate</p>
</div>
<form class="form-inline">
<label for="row_min" class="mr-sm-2">Row Min</label>
<input type="number" class="form-control mb-2 mr-sm-2" placeholder="row min" id="row_min">
<label for="row_max" class="mr-sm-2">Row Max</label>
<input type="number" class="form-control mb-2 mr-sm-2" placeholder="row max" id="row_max">
<label for="col_min" class="mr-sm-2">Col Min</label>
<input type="number" class="form-control mb-2 mr-sm-2" placeholder="col min" id="col_min">
<label for="col_max" class="mr-sm-2">Col Max</label>
<input type="number" class="form-control mb-2 mr-sm-2" placeholder="col max" id="col_max">
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<br>
<!-- Temoprary placeholder for the table before user input comes in -->
<div class="container">
<div class="well" id="table-placeholder">
<h3 class="text-center">Multiplication Table Will Appear Here</h3>
</div>
</div>
<!-- include the JavaScript at the bottom of the body to laod faster -->
<script type="text/JavaScript" src="js/javascript.js"></script>
</body>
Javascript
var row_min, row_max, column_min, column_max;
console.log("hello");
function getUserInput() {
row_min = parseInt(document.getElementById("row_min").value);
row_max = parseInt(document.getElementById("row_max").value);
col_min = parseInt(document.getElementById("col_min").value);
col_max = parseInt(document.getElementById("col_max").value);
input = document.getElementById("row_max").value;
row_max = parseInt(userInput);
input = document.getElementById("col_min").value;
column_min = parseInt(userInput);
input = document.getElementById("col_max").value;
column_max = parseInt(userInput);
console.log(row_min, row_max, column_min, column_max);
}
I want: when I enter in the txtbox Enter amount, then I submit the button , the amount I enter in textbox1 which is inputValue it this display in the txtbox which is totAmountPaid
html
<div class="col-md-12">
<label>Enter Amount:</label>
<input type="text" class="form-control" id="inputValue" value="">
</div>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>
script
function myFunction(){
var paidAmount = parseFloat(document.getElementById("inputValue").value);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}
Are you including your JS before you are trying add the onClick handler?
If you load the js beforehand it should work fine.
As you can see here https://jsfiddle.net/Lyspxwvu/1/
<script>
function myFunction(){
var paidAmount = parseFloat(document.getEle`enter code here`mentById("inputValue").v`enter code here`alue);
document.getElementById("totAmountPaid").value = paidAmount.toFixed(2);
}
</script>
<div class="col-md-12">
<label>Total Amount Paid:</label>
<input type="text" class="form-control"
readonly="readonly"id="totAmountPaid" value="">
</div>
<div class="col-md-12 ">
</br><button class="btn btn-primary col-md-6" type="button"
onclick="myFunction()" >btn</button>
</div>