<select id="questionnaire_domain" class="form-control sync-option-text required" name="questionnaire_domain"><option value="ESS">Employee Satisfaction Survey</option><option value="CSS">Customer Satisfaction Survey</option><option value="VSS">Vendor Satisfaction Survey</option><option value="OQ">Orientation Quiz</option><option value="TQ">Training Quiz</option><option value="EI">Exit Interview</option><option value="EO">Employee Opinion</option></select>
<input class="form-control readonly" name="questionnaire_code" type="text" value="" id="questionnaire_code" readonly="">
I want to generate an auto prefix number in the text field according to the selected drop down's option value.
E.g: If I select Exit Interview the auto generated prefix will be 'EI12345',here 'EI' comes from drop down value and '12345' is an auto sequence number.
You can use Math.random() to generate random number of any number of digits. Try this:
$("#questionnaire_domain").change(function() {
var val = $(this).val();
var random = Math.floor(Math.random()*90000) + 10000; // this will generate random number
$("#questionnaire_code").val(val+""+random);
});
Update input value when onchange of select by nextElementSibling:
<html>
<head>
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
</head>
<body>
up vote 0 down vote favorite
<select id="questionnaire_domain" class="form-control sync-option-text required" name="questionnaire_domain" onchange="this.nextElementSibling.value = this.value + this.nextElementSibling.value.match(/(\d+)/)[1];">
<option value="ESS">Employee Satisfaction Survey</option>
<option value="CSS">Customer Satisfaction Survey</option>
<option value="VSS">Vendor Satisfaction Survey</option>
<option value="OQ">Orientation Quiz</option>
<option value="TQ">Training Quiz</option>
<option value="EI">Exit Interview</option>
<option value="EO">Employee Opinion</option>
</select>
<input class="form-control readonly" name="questionnaire_code" type="text" value="11" id="questionnaire_code" readonly="">
</body>
I suppose the generation of the sequence number is based on the selectedindexchange of the dropdownlist? If so, consider the following snippets
$(document).ready(function(){
var sequence_no = 1;
$('#questionnaire_domain').change(function() {
$("#questionnaire_code").val($(this).id + sequence_no);
sequence_no += 1;
});
});
<html>
<head>
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
</head>
<body>
up vote 0 down vote favorite
<select id="questionnaire_domain" class="form-control sync-option-text required" name="questionnaire_domain" onchange="this.nextElementSibling.value = this.value + this.nextElementSibling.value.match(/(\d+)/)[1];">
<option value="ESS">Employee Satisfaction Survey</option>
<option value="CSS">Customer Satisfaction Survey</option>
<option value="VSS">Vendor Satisfaction Survey</option>
<option value="OQ">Orientation Quiz</option>
<option value="TQ">Training Quiz</option>
<option value="EI">Exit Interview</option>
<option value="EO">Employee Opinion</option>
</select>
<input class="form-control readonly" name="questionnaire_code" type="text" value="11" id="questionnaire_code" readonly="">
</body>
Related
I have the db called rec where i store records like:
Id Name Surname
1 John smith
2 Roger jhonson
I wish to display all records in 2 drop-down menus. Say if I select Roger then the value of surname should be changed to Jhonson if it was already on Smith.
If I select John then value of the surname should go back to smith but if I want I should be able to change the surname of John to Jhonson which should not change the value of Name, the selected value should remain as John Jhonson.
Can someone please show me how this can be done?
Really appreciate your kind help and time in advance.
HTML
<select name="cname" class="float-right ralign" id="cname">
<option value="" disabled selected>--select name--</option>
<option value="1">John</option>
<option value="2">Roger</option>
</select>
<select name="surname" class="float-right ralign" id="surname">
<option value="" disabled selected>--select surname--</option>
<option value="1">smith</option>
<option value="2">jhonson</option>
</select>
Use jQuery Onchange Event
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function(){
$("#cname").change(function(){
var cname = $(this).val();
$('#surname option').eq(cname).prop('selected', true);
});
});
$( document ).ready(function(){
$("#cname").change(function(){
var cname = $(this).val();
$('#surname option').eq(cname).prop('selected', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select name="cname" class="float-right ralign" id="cname">
<option value="" disabled selected>--select name--</option>
<option value="1">John</option>
<option value="2">Roger</option>
</select>
<select name="surname" class="float-right ralign" id="surname">
<option value="" disabled selected>--select surname--</option>
<option value="1">smith</option>
<option value="2">jhonson</option>
</select>
I have a onchange multiple select option that can select multiple course then display the total price in other input values
However how to get the total price if I have another multiple select option for months to be sum up in that input
Each months's price is same
course select option code
<select class="form-control" onchange="selectFunction(event)"
name="pay_course[]" required="" multiple>
<option data-price="1111" value="courseId1">English</option>
<option data-price="2222" value="courseId2">Math</option>
</select>
month select option code
<select class="form-control" multiple="multiple" >
<option selected="selected" value="" name="pay_fee_month[]" disabled="true">Select Month...</option>
<option value='Janaury'>Janaury</option>
<option value='February'>February</option>
<option value='March'>March</option>
<option value='April'>April</option>
<option value='May'>May</option>
<option value='June'>June</option>
<option value='July'>July</option>
<option value='August'>August</option>
<option value='September'>September</option>
<option value='October'>October</option>
<option value='November'>November</option>
<option value='December'>December</option>
</select>
Input to be display the total
<input type="number" value="" id="money" class="form-control">
Script
function selectFunction(e) {
var type_id = $('select option:selected').map(function() {
return $(this).attr('data-price');
})
.get().map(parseFloat).reduce(function(a, b) {
return a + b
});
console.log(type_id)
$("#money").val( type_id );
}
I would do it another way... Completely.
What you wish to have is the total price based on selected courses multiplied by the amount of selected months.
Below, is a script that does just that... On change of both selects.
$("#courses, #months").on("change", function(){
// Get the total price of the selected courses.
var price = 0;
$("#courses").find("option:selected").each(function(){
price += $(this).data("price");
});
console.log(price);
// Get the amount of selected months.
var monthCount = $("#months").find("option:selected").length;
console.log(monthCount);
// Multiply.
var total = monthCount * price;
$("#money").val(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="courses" name="pay_course[]" required="" multiple>
<option data-price="1111" value="courseId1">English</option>
<option data-price="2222" value="courseId2">Math</option>
</select>
<select class="form-control" id="months" multiple="multiple" >
<option value="" name="pay_fee_month[]" disabled>Select Month...</option>
<option value='January'>January</option>
<option value='February'>February</option>
<option value='March'>March</option>
<option value='April'>April</option>
<option value='May'>May</option>
<option value='June'>June</option>
<option value='July'>July</option>
<option value='August'>August</option>
<option value='September'>September</option>
<option value='October'>October</option>
<option value='November'>November</option>
<option value='December'>December</option>
</select>
<input type="number" value="" id="money" class="form-control">
Notice that I removed the inline onchange handler and used jQuery .on()
I also removed the selected="selected" on the first month option since it also is disabled.
Using bootstrap-select -- I am multiplying the values of two select fields in a form, and changing the value of an input field to display the total -- after page load.
How can I have the input field stay empty when just one or neither of the select fields are selected?
Below code only works if both fields are selected.
When neither of the fields are selected, it calculates with the first values of both fields - output becomes $10.
When either one of the fields is selected, it multiplies the selected value with the first value of the non-selected field - output becomes 1 * selected value, or selected value * $10.
PS. Reason I am using .load and not .change is that the fields are persisted with garlic.js
<select class="price selectpicker form-control" id="price" name="price" title="Please choose price.." />
<option>$10</option>
<option>$20</option>
<option>$30</option>
</select>
<select class="multiply selectpicker form-control" id="multiply" name="multiply" title="Please choose multiplier.." />
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="text" class="form-control" name="total" id="total" readonly="true" />
$(window).on("load", function(){
var price = parseInt($('.price').val());
var multiply = parseInt($('.multiply').val());
var total = price * multiply;
if(total === ''){
$('#total').val('');
} else {
$('#total').val('$' + total);
}
});
The problem was that the 'title' attribute of 'bootstrap-select', does not use a '0' value default option field. So the above code takes the value from the first selectable option when form is loaded.
To go around this issue:
Added the first default option with a zero value in the select tag.
Used the built in 'show.bs.select' to trigger an event when drop-down list is shown, and the built in 'refresh' method to remove it.
Complementary code:
$('.selectpicker').on('show.bs.select', function () {
$('.selectpicker').find('[value=0]').remove();
$('.selectpicker').selectpicker('refresh');
});
<select class="price selectpicker form-control" id="price" name="price" title="Please choose price.." />
<option value="0"></option>
<option value="10">$10</option>
<option value="20">$20</option>
</select>
<select class="multiply selectpicker form-control" id="multiply" name="multiply" title="Please choose multiplier.." />
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
I hope this will helps you
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script src="http://garlicjs.org/garlic.js"
type="text/javascript"></script>
<form data-persist="garlic" method="POST">
<select class="price selectpicker form-control" id="price" name="price" title="Please choose price.." />
<option value="10">$10</option>
<option value="20">$20</option>
<option value="30">$30</option>
</select>
<select class="multiply selectpicker form-control" id="multiply" name="multiply" title="Please choose multiplier.." />
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" class="form-control" name="total" id="total" readonly="true" />
</form>
In script side
<script>
$(window).on("load", function(){
calculate();
$('.selectpicker').on('change',function(){
calculate();
})
});
function calculate()
{
var price = $('.price').val()?parseInt($('.price').val()):10;
var multiply =$('.multiply').val()? parseInt($('.multiply').val()):1;
var total = price * multiply;
if(total === ''){
$('#total').val('');
} else {
$('#total').val('$' + total);
}
}
</script>
In a "contact us" form, I need to insert a country code (ie 972, 1, 91) to the phone input field after choosing the country from the select list.
For example;
If a user chooses "US" from the list, than the phone input field will start with the number "1" and than the user will continue to write his number. How do I do that with jQuery?
Thank you
You can do this buy adding the value as code of the Country like for US the value of option should be 1
Your HTML should be,
<select id="country">
<option value="">Select Country</option>
<option value="1">US</select>
<option value="91">IN</select>
</select><br/>
Code: <input type="text" id="code" />
Jquery
$(function(){
$('#country').on('change',function(){
$('#code').val(this.value);// changing the code textbox value by current country value
});
});
HTML:
<select id="country">
<option value="">Select Country</option>
<option value="1">US</option>
<option value="+44 ">UK</option>
</select>
<input id="phone" type="text" name="phone">
jQuery:
$(function() {
$('#country').on('change', function() {
$('#phone').val($(this).val());
});
});
<select id="country">
<option value="">Select Country</option>
<option value="1">US</option>
<option value="91">IN</option>
</select>
<br><br>
Code: <input type="text" id="code" />
$(function() {
$('#country').on('change', function() {
$('#phone').val($(this).val());
});
});`enter code here`
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>