I need to get the value from the datalist?
Currently I get defined for the 2 parameter yoursign and friendsign
for example if I choose Aries for yoursign and Leo for friendSign I need to get both and pass to the function
<body>
<form id="Match"></form>
<label for="yourSignList">your sign:</label><br /><input list="yourSignList" name="sign1" required><br />
<datalist id="yourSignList">
<option value="Aries">
<option value="taurus">
<option value="Gemini">
<option value="Cancer">
<option value="Leo">
<option value="Virgo">
<option value="Libra">
<option value="Scorpio">
<option value="Saggitarius">
<option value="Capricon">
<option value="Aquarius">
<option value="Pisces">
</datalist>
<label for="friendSignList">your friend sign:</label><br /><input list="friendSignList" name="sign2" required><br />
<datalist id="friendSignList">
<option value="Aries">
<option value="taurus">
<option value="Gemini">
<option value="Cancer">
<option value="Leo">
<option value="Virgo">
<option value="Libra">
<option value="Scorpio">
<option value="Saggitarius">
<option value="Capricon">
<option value="Aquarius">
<option value="Pisces">
</datalist>
<button type='submit' onclick="Match()">Done</button><br>
<label for="output">התאמה: </label><output id='output'></output>
<form />
<script>
function Match() {
const signYours = $("yourSignList").val();
const signFriend = $("friendSignList").val();
$("#output").val(answer(signYours, signFriend));
}
try this code may be working like
$("#friendSignList").find("option").each(function(e,i){
console.log( e, i );
});
this works for me:
function Match() {
var signYours = $("input[name='sign1']").val();
var signFriend = $("input[name='sign2']").val();
$("#output").val(answer(signYours, signFriend));
}
Related
I have a select box where one particular value is selected another field shows up.
I have no knowledge of javascript and have taken this code from somewhere.
I have this javascript in multiple places in the same form. But, my script works only on one input. If I select another from another select box, the value of previous input closes, the thing which I don't want. This will be well understood if you see the code.
The link where you can check the issue:
jsfiddle
Javascript:
function checkvalue(val) {
if (val === "NewSale")
document.getElementById('actualamt').style.display = 'block';
else
document.getElementById('actualamt').style.display = 'none';
if (val === "SchoolWearAccessories")
document.getElementById('schoolwear').style.display = 'block';
else
document.getElementById('schoolwear').style.display = 'none';
}
<form>
Product Category:
<select name="category" required onchange='checkvalue(this.value)'>
<option value="">Select Product Category</option>
<option value="School Uniforms">School Uniforms</option>
<option value="SchoolWearAccessories">School Wear Accessories</option>
<option value="Hospital Uniforms">Hospital Uniforms</option>
<option value="Corporate Uniforms">Corporate Uniforms</option>
<option value="Industrial Uniforms">Industrial Uniforms</option>
</select>
<div id="schoolwear" style="display:none;">
Sub Category:
<select name="subcategory">
<option value="">Select Product Category</option>
<option value="Uniform Sweaters">Uniform Sweaters</option>
<option value="School Belts">School Belts</option>
<option value="School Ties">School Ties</option>
<option value="Uniform Socks and Shoes">Uniform Socks and Shoes</option>
<option value="School Caps">School Caps</option>
<option value="School Bags">School Bags</option>
</select>
</div>
Tag:
<select name="producttag" onchange='checkvalue(this.value)'>
<option value="">None</option>
<option value="New">New</option>
<option value="Sale">Sale</option>
<option value="NewSale">New and Sale</option>
</select>
<div id="actualamt" style="display:none;">
Actual Amount:
<input type="number" name="actualamt" step="any" />
</div>
</form>
Help will be appreciated.
You should have different functions for each select onchange events.
I have renamed the function to checkvalueProductTag() and checkvalueCategory()
function checkvalueProductTag(val) {
if(val==="NewSale")
document.getElementById('actualamt').style.display='block';
else
document.getElementById('actualamt').style.display='none';
}
function checkvalueCategory(val){
if(val==="SchoolWearAccessories")
document.getElementById('schoolwear').style.display='block';
else
document.getElementById('schoolwear').style.display='none';
}
Check the updated fiddle
https://jsfiddle.net/6hheckao/1/
If you want both of them to be displayed on selection then simply use two different onchange functions like this
function checkvalue(val) {
if (val === "SchoolWearAccessories")
document.getElementById('schoolwear').style.display = 'block';
else
document.getElementById('schoolwear').style.display = 'none';
}
function checkvalue1(val) {
if (val === "NewSale")
document.getElementById('actualamt').style.display = 'block';
else
document.getElementById('actualamt').style.display = 'none';
}
<form>
Product Category:
<select name="category" required onchange='checkvalue(this.value)'>
<option value="">Select Product Category</option>
<option value="School Uniforms">School Uniforms</option>
<option value="SchoolWearAccessories">School Wear Accessories</option>
<option value="Hospital Uniforms">Hospital Uniforms</option>
<option value="Corporate Uniforms">Corporate Uniforms</option>
<option value="Industrial Uniforms">Industrial Uniforms</option>
</select>
<div id="schoolwear" style="display:none;">
Sub Category:
<select name="subcategory">
<option value="">Select Product Category</option>
<option value="Uniform Sweaters">Uniform Sweaters</option>
<option value="School Belts">School Belts</option>
<option value="School Ties">School Ties</option>
<option value="Uniform Socks and Shoes">Uniform Socks and Shoes</option>
<option value="School Caps">School Caps</option>
<option value="School Bags">School Bags</option>
</select>
</div>
Tag:
<select name="producttag" onchange='checkvalue1(this.value)'>
<option value="">None</option>
<option value="New">New</option>
<option value="Sale">Sale</option>
<option value="NewSale">New and Sale</option>
</select>
<div id="actualamt" style="display:none;">
Actual Amount:
<input type="number" name="actualamt" step="any" />
</div>
</form>
Below are the dropdown data..
<select size="1" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
I want to get alert/pop up when I select the data which is start from IN in drop down list.
Try this:
https://jsfiddle.net/mminetto/bggwnkwj/
var select = $('select[name="Test_Data"]');
select.on('change', function(){
var options = select.children('option:selected');
if(options.length > 0 && options[0].innerText.startsWith("IN")){
alert(this.value);
alert(options[0].innerText);
}
});
<select size="1" name="Test_Data" id="dropdown">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
in javascript
<script>
$("#dropdown").change(function(){
if($(this).find("option:selected").text().startsWith("IN")){
alert("option with IN selected =>"+$(this).find("option:selected").text());
}
});
</script>
Try this code
HTML
<select size="1" onChange="showAlert()" id="dataCountry" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
</select>
JavaScript
<script>
function showAlert() {
var el = document.getElementById('dataCountry'); // get the index
var text = el.options[el.selectedIndex].innerHTML; // get the label
var n = text.search("IN"); //search number of IN
if(n>=0) {
alert(text);
}
}
</script>
This is working form with select, but how to make it work same but in form?
<select id="destination" name="destination" onchange="navigate(this.options[this.selectedIndex].value)">
<option value="">Select country</option>
<option value="afghanistan">Afghanistan</option>
<option value="albania">Albania</option>
<option value="algeria">Algeria</option>
<option value="andorra">Andorra</option>
<option value="angola">Angola</option>
Script.js
function navigate(destination)
{
if (destination != "")
location.href = destination + ".php";
}
It is there anyway make it work with "datalist"?
<datalist id="countries" >
<option value="Afghanistan">
<option value="Albania">
<option value="United Kingdom">
<option value="United States">
<option value="Vanuatu">
<option value="Vatican City">
<option value="Yemen">
<option value="Zambia">
<option value="Zimbabwe">
</datalist>
To get the form value in the onsubmit handler via JavaScript you can assign id to the input element, and then programatically read its value.
function myFunction() {
// 1. use the id 'txtCountry' to get reference to the INPUT element
// Note: you need to edit your HTML to assign the id 'txtCountry' (see sample HTML below)
var txtCountry = document.getElementById('txtCountry');
// 2. assign the value (text) in the INPUT element to a variable called 'destination'
var destination = txtCountry.value;
// 3. redirect to an URL based on the value from step 2
var url = destination + ".php";
alert("You are about to redirect to\n\n" + url);
location.href = url;
}
<form onsubmit="myFunction()">
Enter country:
<input type="text" id="txtCountry" name="txtCountry" list="countries">
<input type="submit" value="Submit">
</form>
<datalist id="countries">
<option value="Afghanistan">
<option value="Albania">
<option value="United Kingdom">
<option value="United States">
<option value="Vanuatu">
<option value="Vatican City">
<option value="Yemen">
<option value="Zambia">
<option value="Zimbabwe">
</datalist>
I'm working on a website project and really need help as I'm new to all this. I'm basically given values to every option in the drop down menu's and make them add together which I've managed. But then I want to the total value from the menus to then be the range for a pseudo random to be a generated and added to the age I input.
When I hit submit I'd like it to calculate all that and display the result on a new page. I want to be able to do all this within javascript and html.
Any help would be greatly appreciated! My coding is below. Thanks so much!
<body>
<form id="form1" action="" method="post" onsubmit="return calcTotal(this)">
<select name=select1>
<option selected="selected" value="0">Chinese Zodiac</option>
<option value="3">Rat</option>
<option value="3">Ox</option>
<option value="4">Tiger</option>
<option value="2">Rabbit</option>
<option value="4">Dragon</option>
<option value="5">Snake</option>
<option value="3">Horse</option>
<option value="3">Sheep</option>
<option value="4">Monkey</option>
<option value="5">Rooster</option>
<option value="3">Dog</option>
<option value="3">Pig</option>
</select>
</select>
<br />
<select name=select2>
<option selected="selected" value="0">Star Sign</option>
<option value="2">Aries</option>
<option value="4">Taurus</option>
<option value="3">Gemini</option>
<option value="4">Cancer</option>
<option value="3">Leo</option>
<option value="2">Virgo</option>
<option value="2">Libra</option>
<option value="3">Scorpio</option>
<option value="2">Sagittarius</option>
<option value="4">Capricorn</option>
<option value="2">Aquarius</option>
<option value="3">Pisces</option>
</select>
<br />
<select name=select3>
<option selected="selected" value="0">Blood Type</option>
<option value="3">O</option>
<option value="2">A</option>
<option value="1">B</option>
<option value="3">AB</option>
</select>
<br />
<select name=select4>
<option selected="selected" value="0">Favourite Colour</option>
<option value="3">Black</option>
<option value="3">Blue</option>
<option value="2">Brown</option>
<option value="2">Green</option>
<option value="3">Orange</option>
<option value="3">Pink</option>
<option value="2">Purple</option>
<option value="4">Red</option>
<option value="2">Yellow</option>
<option value="2">White</option>
<option value="5">Other</option>
</select>
<br />
Age<input name="" type="number" value="" />
<br />
<input name="" type="submit" value="Total" />
<span>Total: </span><span id="result"></span>
</form>
<script type="text/javascript">
function calcTotal(oForm){
var sum = 0;
for(i=0; i < oSels.length; i++){
sum += new Number(oSels[i].value);
}
document.getElementById('result').innerHTML = sum;
return false;
}
window.onload=function(){
oSels = document.getElementById('form1').getElementsByTagName('select');
for(i=0; i < oSels.length; i++){
oSels[i].onchange=function(){
document.getElementById('result').innerHTML = '';
}
}
}
</script>
I played with your code. I don't now if it's someting like that that you wanted but here is an example of random score.
It now use the age to generate a value.
Take a look if you like it at my codepen.
I changed the age input:
Age<input id="age" name="" type="number" value="" />
I also added a new function to generate random number between min-max:
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
And modified how the sum is calculated:
var age = document.getElementById('age').value;
sum = parseInt(age) + parseInt(getRandomInt(sum-(age / 4),sum+(age / 4)));
//Add some random. The more you are older, the more random it is.
You can do a lot of different generated sum. If you want less modifications, we also can take the last digit of the age to get the min/max value generated...
Edit:
To help you share variables between pages, Look at this question.
Adding this as an answer as the submitter considers it a good idea:
Put the result from all your maths into hidden fields. Then when you submit the form, the values will be passed along.
You don't need to do anything special really. Just add fields like this:
<input type="hidden" value="[yourValue]" name="fieldName" id="fieldId" />
For the yourValue part, simply insert your caclulated value from the JavaScript:
document.getElementById("fieldId").value = calculatedValue;
Since it's all part of the same form that you're submitting anyway, they will all be past along. You can retrieve the fields on the receiving page as normal.
I downloaded and edited your entire code block. I changed a couple of things.
1. You don't need the onsubmit on your form. You need a call the JavaScript function on a Total button. The submit button is added to submit the form when the user is done.
2. A hidden field to hold your result is added to the form.
3. The function where you do your calculation has an addition to send the calulated total to the new hidden field.
4. You need to add something to the ACTION, so it knows where to submit the form. You can also remove the ALERT. I just added that to be sure it worked right.
I've run and tested this, and it works exactly as expected. This is what the edited code looks like:
<body>
<form id="form1" action="" method="post">
<select name=select1>
<option selected="selected" value="0">Chinese Zodiac</option>
<option value="3">Rat</option>
<option value="3">Ox</option>
<option value="4">Tiger</option>
<option value="2">Rabbit</option>
<option value="4">Dragon</option>
<option value="5">Snake</option>
<option value="3">Horse</option>
<option value="3">Sheep</option>
<option value="4">Monkey</option>
<option value="5">Rooster</option>
<option value="3">Dog</option>
<option value="3">Pig</option>
</select>
</select>
<br />
<select name=select2>
<option selected="selected" value="0">Star Sign</option>
<option value="2">Aries</option>
<option value="4">Taurus</option>
<option value="3">Gemini</option>
<option value="4">Cancer</option>
<option value="3">Leo</option>
<option value="2">Virgo</option>
<option value="2">Libra</option>
<option value="3">Scorpio</option>
<option value="2">Sagittarius</option>
<option value="4">Capricorn</option>
<option value="2">Aquarius</option>
<option value="3">Pisces</option>
</select>
<br />
<select name=select3>
<option selected="selected" value="0">Blood Type</option>
<option value="3">O</option>
<option value="2">A</option>
<option value="1">B</option>
<option value="3">AB</option>
</select>
<br />
<select name=select4>
<option selected="selected" value="0">Favourite Colour</option>
<option value="3">Black</option>
<option value="3">Blue</option>
<option value="2">Brown</option>
<option value="2">Green</option>
<option value="3">Orange</option>
<option value="3">Pink</option>
<option value="2">Purple</option>
<option value="4">Red</option>
<option value="2">Yellow</option>
<option value="2">White</option>
<option value="5">Other</option>
</select>
<br />
Age<input name="" type="number" value="" />
<br />
<input name="" type="button" value="Total" onclick="calcTotal();" />
<input name="submit" type="submit" value="Submit" />
<span>Total: </span><span id="result"></span>
<input type="hidden" value="0" name="resultIs" id="resultIs" />
</form>
<script type="text/javascript">
function calcTotal(oForm) {
var sum = 0;
for (i = 0; i < oSels.length; i++) {
sum += new Number(oSels[i].value);
}
//This is what you are using to display the result to your user.
document.getElementById('result').innerHTML = sum;
//This will add the value of the result to a hidden field I added to the form. When you submit it, just request the value of "resultIs"
document.getElementById("resultIs").value = sum;
alert(sum);
return false;
}
//I really don't even see that this is needed. Your form doesn't need to be cleared onLoad.
window.onload = function() {
oSels = document.getElementById('form1').getElementsByTagName('select');
for (i = 0; i < oSels.length; i++) {
oSels[i].onchange = function() {
document.getElementById('result').innerHTML = '';
}
}
}
</script>
So basically the HTML form will ask what company they belong to, and if they pick for example:-
<select name="catg" onchange='maxlength()'>
<option> Select..</option>
<option value="stu">Uni Student</option>
<option value="anothersstu">Student at another institution</option>
<option value="staff">Uni Staff</option>
<option value="other">other</option>
</select><br />
Student Number / Staff Number: <input type="text" name="ss"/> <br />
function maxlength(){
if(test.catg.selected=="stu"){
test.ss.maxlength='8';
.focus();
.select();}
return;
}
If the user picks Uni student or Uni staff, the maxlength of the Student Number/Staff Number texbox needs to be 8.
How can i achieve that? i have tried onChange but cant get it to work.
You can do something like this:
HTML:
<select id="select">
<option>Select..</option>
<option value="stu">Uni Student</option>
<option value="anothersstu">Student at another institution</option>
<option value="staff">Uni Staff</option>
<option value="other">other</option>
</select>
<br />Student Number / Staff Number:
<input type="text" id="txt" name="ss" />
<br />
JS:
document.getElementById('select').onchange = (function(){
if(this.value=="stu"){
document.getElementById('txt').maxLength=8;
}else{
document.getElementById('txt').removeAttribute('maxLength');
}
});
So depending on your requirements, do if else if conditions
Demo: http://jsfiddle.net/AmitJoki/8ZewM/2
<select name="catg" onchange='maxlength()'>
<option> Select..</option>
<option value="stu">Uni Student</option>
<option value="anothersstu">Student at another institution</option>
<option value="staff">Uni Staff</option>
<option value="other">other</option>
</select><br />
Student Number / Staff Number: <input type="text" name="ss" id="ss"/> <br />
Jquery:
$('select').change(function () {
var value = this.value;
if(value=='stu')
{
$("#ss").attr('maxlength','8');
}
else
{
$("#ss").attr('maxlength',''); // clear maxlength if not stu
}
});
<select id="selopt" onchange="maxlength()">
<option value="stu">Uni Student</option>
<option value="anothersstu">Student at another institution</option>
<option value="staff">Uni Staff</option>
<option value="other">other</option>
</select>
Student Number / Staff Number: <input type="text" id="ss" maxlength=""/> <br />
function maxlength(){
var x = document.getElementById("selopt").selectedIndex;
if(document.getElementById("selopt")[x].value=="stu"){
document.getElementById("ss").maxLength=8;
}
return;
}
<select name="catg" id="catg" onchange="maxLengthFunction()">
<option> Select..</option>
<option value="stu">Uni Student</option>
<option value="anothersstu">Student at another institution</option>
<option value="staff">Uni Staff</option>
<option value="other">other</option>
</select><br />
Student Number / Staff Number: <input type="text" name="ss" id="ss" />
And in Javascript
function maxLengthFunction()
{
var ddl = document.getElementById("catg");
var strOption = ddl.options[ddl.selectedIndex].text
if(strOption == "Uni Student" || strOption == "Uni Staff" )
document.getElementById("ss").maxLength="8";
else
document.getElementById("ss").removeAttribute('maxLength');
}
Try this
$(document).ready(function(){
$("#sele").change(function(){
var optext=$("#sele option:selected").text();
if(optext=='Uni Student'||optext=='Uni Staff'){
$("#tname").val("");
$("#tname").attr('maxlength','8');
}
else{
$("#tname").val("");
$("#tname").attr('maxlength','');
}
});
});
<select name="sele" id="sele" > <option> Select..</option>
<option value="stu">Uni Student</option>
<option value="anothersstu">Student at another institution</option>
<option value="staff">Uni Staff</option>
<option value="other">other</option>
</select><br />
Student Number / Staff Number: <input type="text" name="ss" id="tname"/>