I've searched all over and cannot find a nice solution or if it's possible with client-side verification.
My client is asking that a user be restricted to a fixed-length digit combination based on a selection in a drop down.
Example:
Drop Down Selection
Utility A
Utility B
Utility C
Text Input
If User selects Utility A, they must provide an 8 digit account number.
If User selects Utility B, they must provide an 10 digit account number.
If User selects Utility C, they must provide an 12 digit account number.
Anyone know of a simply javascript solution that would provide the answer? I've beat myself to death over this.
Thanks!
Here you go!
HTML
<select id="Select" onchange="checkText()">
<option value="8"> A</option>
<option value="10"> B</option>
<option value="12"> C</option>
</select>
<input id="Enter" type="text" onchange="checkText()" />
<div id="Message"></div>
JavaScript
function checkText(input) {
if(document.getElementById("Enter").value.length != document.getElementById("Select").selectedOptions[0].value) {
document.getElementById("Message").innerHTML = "Your ID has to be " + document.getElementById("Select").selectedOptions[0].value + " digits long";
} else {
document.getElementById("Message").innerHTML = "";
}
}
This is not brilliant at all. But I will not do your work for you. You can easily pick up from here.
I also created a jsFiddle
Where select is your dropdown and input is your input string, you could use:
if ( !/^\d+$/.test(input) ||
input.length != [ 8, 10, 12 ][ select.selectedIndex ] ) {
// Input invalid
}
Further to #Amberland's feedback:
Or, for a more generic solution, store the number of required digits as the value of each option element, e.g. <option value=8>Utility A</option>, and use:
if ( !/^\d+$/.test(input) || input.length != select.value ) {
// Input invalid
}
Related
I have searched the web for answers and find none that I needed. So to the question. I am making a submit form (user selects fields and types an input number to determine the price of an order) which have 2 different select option fields and 1 input field.
<input type="text" id="number" placeholder="please enter a number">
(user entered 35 for example)</input>
<select id="firstpick">
<option value="50">Option 1</option>
<option value="150">Option 2</option>
<option value="100">Option 3</option>
</select>
<select id="secondpick">
<option value="10">Option 4</option>
<option value="15">Option 5</option>
<option value="20">Option 6</option>
</select>
<input disabled="disabled" type="text">(The total sum)</input>
I want to count sum of values for example: firstpick.option3 + (secondpick.option4 * number.35). In other meaning: 100 + (10 * 35) = 450. And I want to get that sum in a different disabled input field, so I can save it in database and show it to the user what is the total cost of an order by fields he selected and by number he typed in.
EDIT: The working code for you (the visitor)! http://jsfiddle.net/LoLd748n/4/
I am not entirely sure what you goal is, but this might be close. jQuery will be helpful.
function getSum() {
first = $("#firstpick").val();
second = $("#secondpick").val();
sum = first + second
return sum
}
It may be a good idea to add an event listener to your selects. This way your field will automatically update.
You do not have to have a disabled input, it could be type="hidden" instead. Then it will not show up on the page.
$("#firstpick").on("change", function() {
sum = getSum();
$("#my-hidden-input").val(sum);
});
$("#secondpick").on("change", function() {
sum = getSum();
$("#my-hidden-input").val(sum);
});
First time posting so apologies if it may question is at first unclear, although I hope it's fairly straight forward. I'm new to Javascript and need some help.
WHAT I WANT TO ACHIEVE:
I have an HTML form and when someone selects a letter from the 'letter' dropdown menu in the HTML form (e.g. A, B, or C), I want the 'number' dropdown menu to change automatically based on the select in the 'letter' dropdown (e.g. if letter selected was 'A' then select '1', if 'B' then select '2' and so on.)
[[ As a bonus, it also like the 'number' dropdown to be disabled, so automatic variable generated cannot be changed by the front-end user filling out the form]]
FURTHER INFORMATION
I had seen something similar down on a form I had permission to use so I tried to ammend the code but I can't make it work. If you could provide tips on how to ammend the code or provide a new answer to my problem that would be fantastic.
MY CODE (so far...)
The Javascript Part
<html>
<head>
<?php
echo "var campus='none';";
?>
<script language ="javascript">
function changeDropdown(number) {
numberSelection = document.getElementById("number");
for (var i = 0; i < numberSelection.length; i++)
{
if (number == numberSelection[i].value)
{
numberSelection[i].selected = true;
return;
}
}
}
function load() {
if (number == 'none')
{
letterSelection = document.getElementById("letter");
if letter == letterSelection("0")
{
changeDropdown("A");
}
else if letter == letterSelection("1")
{
changeDropdown("B");
}
else if letter == letterSelection("2")
{
changeDropdown("C");
}
}
else
{
changeDropdown(number);
}
}
</script>
</head>
<body>
The Form
<form name ="form1">
<select name ="letter" onclick="load()">
<option value ="A">A
<option value ="B">B
<option value ="C">C
</option>
</select>
<br />
<select name ="number">
<option value ="1">1
<option value ="2">2
<option value ="3">3
</option>
</select>
</body>
</html>
Any clarification, just ask and I'm very happy to respond :)
change this
numberSelection = document.getElementById("number")
to this
numberSelection = $("number").val();
and
<select name ="number">
<option value ="1">1
<option value ="2">2
<option value ="3">3
</option>
</select>
to
<select name ="number">
<option value ="1">1</option>
<option value ="2">2</option>
<option value ="3">3</option>
</select>
remember, a openening tag must have a closing tag
I have two fields a drop down for years and a textbox to enter a VIN number. I have the regEx working exactly how I want it but the problem I am having is if a year is not chosen it still validates because the VIN is waiting on the year. How can I enter either date not existing yet or the "Select Year" to also apply with the RegEx?
When I do console.log(date) it returns 0 and the validation is hitting the second regEx because it is 0 which is less than 1981.
Somehow I have to write less than 1981 but greater than 0 I have tried so many different combinations and just seem to not be able to find the correct answer.
var date = Number($("#vehicleyear").val());
var re;
if (date >= 1981) {
re = new RegExp("^[A-HJ-NPR-Za-hj-npr-z\\d]{8}[\\dX][A-HJ-NPR-Za-hj-npr-z\\d]{2}\\d{6}$");
} else if (date < 1981) {
re = new RegExp("^[A-Za-z\\d]{2,17}$");
} else {}
return vin.match(re);
}, 'Please enter valid VIN.');
I tried applying the regEx in the else statement and that did not work either. (Saying if its anything else but that still apply the RegEx)
HTML
<label for="vehicleyear">Year:</label>
<select name="vehicleyear" id="vehicleyear" required>
<option value="" selected="selected">Select Year</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<!-- And so on -->
</select>
Okay, an empty string transformed to a number is 0, so what you want to do is always fail if the value is zero, so in other words, something like this:
if(date <= 0)
{
return false;
}
// other if() after
var re;
if (date >= 1981)
{
...
Good afternoon!
I am building a contact form in Contact Form 7 in Wordpress. And I need a functionality where one of the form fields is a number selector (for example, 1-10) and I need the number that is selected to be calculated and drop down the number of fields to be inputted.
I'll try to explain the best I can. So if someone types in the 4...I need a drop down of four input fields.
I have looked for some jquery script for this functionality, but I'm basically at a deadend. If anyone has any suggestions, I would much appreciate it!
Here's an option using jQuery (jsFiddle)
HTML
Number of inputs:
<select class="numInputs" onChange="buildInputs(this);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div class="inputs"></div>
Javascript (jQuery)
$(document).ready(function () {
// set onchange event for the select box.
$('.numInputs').change(function () {
// clear any inputs added to the div.
$('.inputs').empty();
// get number of inputs to add from select box.
var num = $('.numInputs option:selected').text();
// build the inputs.
for (var i = 1; i <= num; i++) {
$('<input type="text"/><br/>').appendTo('.inputs');
}
})
});
You would use javascript, I wrote a simple sample for you. I haven't ever worked with wordpress, but this just works on it's own, and I would think you should be able to just put it in.
Javascript
<script type="text/javascript">
function thing(){
var num = document.getElementById("number").value; //Get the number out of the number field
document.getElementById("select").innerHTML = ''; //Get rid of the placeholder, or the old ones
for (var i = 0; i < num; i++){
var newOpt = document.createElement('option');
newOpt.innerHTML = i; //It'll just have a dropdown for 0 to the number
newOpt.value = i;
document.getElementById("select").appendChild(newOpt);
}
}
</script>
HTML
<form>
Number: <input type="number" name="number" id="number" onblur="thing();">
<select id="select">
<option value="no">Enter a number first</option>
</select>
<input type="submit" value="Submit">
</form>
Also, instead of using onblur, you could use onkeyup or something. onblur is for when it loses focus.
i am using below three fields need to multiply the Word Count Values through PHP. ANy Help ? Code as -- 1 have to select the first dropdown from here..
<select name="sp" id="sp">
<option value="" selected>Please Select...</option>
<option value="Editing">Editing</option>
<option value="Writing">Writing</option>
</select>
Then i have a text box in which the number would be provide,like word 100 200 300, as
<input type="text" name="Word_Count" id="Word_Count" size="10">
and third field would be where the price would be calculated on behalf on word from above row (100 200 300 word), as
<input type="text" name="price" id="price" value="" readonly="" size="20">
Now if the user will select the Editing from select box, the price would be calculated as 100 x 0.02, 200 x 0.02, 300 x 0.02 like and the user will select the Writing, the price would be calculated at 100 x 0.04, 200 x 0.04, 300 x 0.04.
HOw can i make the sense to get the output more efficiently ? Any help ?
There are many complication that you will have to handle.
1) Check that the string entered in Word_Count is number. (Never trust user input. Apply validation techniques)
2) call a javascript function on Onkeyup event of Word_Count.
<input type="text" name="Word_Count" id="Word_Count" size="10" onkeyup="return somefunction()">
I have shown you, how to call a function by mentioning it in element. You can also bing jquery function on pageload. Better check-out official documentation if you want it that way.
Html select
<select name="sp" id="sp">
<option value="" selected>Please Select...</option>
<option value="0.02">Editing</option>
<option value="0.04">Writing</option>
</select>
Changed the value of options.
javascript/jquery function
function somefunction(){
//take value of Word_Count in one variable
var valWC = $("#Word_Count").val()
//take value of Word_Count in one variable
var valDP = $("#sp").val()
//sumd will hold the product of two numbers
var sumd = 0;
//apply validation technique
//multiply both values valWC and valDP
//sumd will have the product
sumd=Number(valWC)*Number(valDP);
//show it in third box
$("#price").val(sumd);
}
you can do this in Jquery itself.. What you have to do is,
$("#sp").change(function() {
// get the word count field value;
// split the values by using " " character and store it into an array
// loop the array [ inside the loop do your calculation according to the selection of the choice ]
// display the final value in the price field..
});
There are the steps to achieve it.