Selectbox used for city name in application form
<select id="city" class="custom-select form-control" name="jobman-field-7[]">
<option value="" selected></option>
<option value="Other">Other Please Specify</option>
<option value="Lahore">Lahore</option>
<option value="Karachi">Karachi</option>
<option value="Islamabad">Islamabad</option>
</select>
Input field shows when 'OTHER' selected from a Selectbox above
<div class="form-group" id="other-city">
<label>Enter your city here</label>
<input name="other-city" value="" type="text" class="form-control">
</div>
Javascript to toggle the fields
$(document).ready(function () {
toggleFields();
$("#city").change(function () {
toggleFields();
});
});
function toggleFields() {
if ($("#city").val() == 'Other') {
$("#other-city").show();
} else {
$("#other-city").hide();
}
}
Here your approach doesn't look meaningful I guess. You have options in your select box being retrieved from DB, appending user input as an option does not make your new data reflected in DB. Better try to trigger an ajax call to insert data into city column in your DB table when the form is submitted. This could be one way to solve your requirement so next time when a user visits page, the new result will be retrieved and shown in the select box again.
//I NEED SOMETHING LIKE THIS BUT OTHER and the NEW CITY get selected Can we only select one city when added?
<select multiple id="city">
<option value="PickCity"></option>
<option value="Other">Other Please Specify</option>
<option value="Lahore">Lahore</option>
<option value="Karachi">Karachi</option>
<option value="Islamabad">Islamabad</option>
</select>
<input type="text" id="other-city">
$().ready(function() {
$('#other-city').change(function() {
var option = new Option($('#other-city').val(), "value");
$('#city option:selected').append(option);
});
});
Note: I havent added the saving to db part; Hope u can handle that;
I have focused on passing value from input box to dropdown;
Please see if this helps you
<!DOCTYPE html>
<html>
<body>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="city-form" onsubmit="return addCitytoDropDown()" method="POST">
<div class="form-group" id="other-city">
<label>Enter your city here</label>
<input name="other-city" type="text" class="form-control" id="inputBox">
</div>
</form>
<select id="city" class="custom-select form-control" name="jobman-field-7[]">
<option value="PickCity" selected>Pick a City</option>
<option value="Other">Other Please Specify</option>
<option value="Lahore">Lahore</option>
<option value="Karachi">Karachi</option>
<option value="Islamabad">Islamabad</option>
</select>
<script type="text/javascript">
function addCitytoDropDown(){
var x = document.getElementById("city");
var option = document.createElement("option");
var newCity = document.getElementById("inputBox").value;
option.text = newCity;
option.selected = true;
x.add(option);
return false;
}
</script>
</body>
</html>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<!-- Based on https://codepen.io/bahiirwa/pen/OjNYZb -->
<div class="container">
<h2>Demo dependent lists</h2>
<div class="row">
<div class="col-md-3">
<select class="form-control" name="select1" id="select1">
<option value="">--Please choose an option--</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="1800">1800</option>
<option value="2000">2000</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" name="select2" id="select2">
<option value="1000" data-section1="1000">500</option>
<option value="1500" data-section1="1500">750</option>
<option value="1800" data-section1="1800">900</option>
<option value="2000" data-section1="2000">1000</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" name="select3" id="select3">
<option value="1000" data-section2="1000">250</option>
<option value="1500" data-section2="1000">450</option>
<option value="1800" data-section2="1000">500</option>
<option value="2000" data-section2="1000">750</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" name="select4" id="select4">
<option value="1000" data-section3="1000">250</option>
<option value="1500" data-section3="1000">450</option>
<option value="1800" data-section3="1000">500</option>
<option value="2000" data-section3="1000">750</option>
</select>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
//Reference: https://jsfiddle.net/fwv18zo1/
$(document).ready(function() {
var $order_name = $('#order-name');
var $output = $('#output');
var $select1 = $('#select1');
var $select2 = $('#select2');
var $select3 = $('#select3');
var $select4 = $('#select4');
var $options2 = $select2.find('option');
var $options3 = $select3.find('option');
var $options4 = $select4.find('option');
$select1.on('change', function(event) {
$select2.html(
$options2.filter(
function() {
return $(this).data('section1') == $select1[0].selectedOptions[0].value;
}
)
);
$select2.trigger('change');
}).trigger('change');
$select2.on('change', function(event) {
$select3.html(
$options3.filter(
function() {
return $(this).val() == $select2[0].selectedOptions[0].value;
}
)
);
}).trigger('change');
$select3.on('change', function(event) {
$select4.html(
$options4.filter(
function() {
return $(this).val() == $select3[0].selectedOptions[0].value;
}
)
);
}).trigger('change');
$select4.on('change', function(event) {
$select3.html(
$options4.filter(
function() {
// return $(this).data('section3') == $select4[0].selectedOptions[0].value;
return $(this).val() == $select4[0].selectedOptions[0].value;
}
)
);
}).trigger('change');
});
</script>
</html>
In this code, I am unable to do the thing which is happening in the second and third options, but not in the fourth option. I have created a demo dependent lists in which when user chooses the first option then the second option automatically comes with filtered data. Then again user have to select from the third option filtered data, but in the fourth option it doesn't automatically fetch the filtered data instead it's asking the user to select data from given options which the code doesn't want. For example, suppose I have chosen the first option 1000, then in the second option 500 comes automatically similarly in the third option but not in the fourth option. How can I code so that the fourth option also comes automatically filtered data.
I have a form having education details in which there is a dropdown which gives 4 option
schooling
graduation
post graduation
others
now what I am doing is allowing user to fill those details but what I want is user can not select one education type more than once which means user can select schooling once,graduation once and so on and this validation i want on client end which is js/jquery
image for reference
function checkUserEducation() {
const userSelectedEducationArray = $("select[name='educationType[]']").map(function() {
return $(this).val();
}).get();
//checks if any education type is empty
if (userSelectedEducationArray.includes("")) {
$('#educationErrorMsg').show();
} else {
$('#educationErrorMsg').hide();
}
if (countElement('schooling', userSelectedEducationArray) > 1) {
// $('#educationErrorMsg').show();
$('#educationErrorMsg').after("*schooling can be chosen only one time");
} else {
}
if (countElement('graduation', userSelectedEducationArray) > 1) {
$('#educationErrorMsg').after("</br>*graduation can be chosen only one time");
} else {
}
if (countElement('post_graduation', userSelectedEducationArray) > 1) {
$('#educationErrorMsg').after("</br>*post graduation can be chosen only one time");
} else {
}
if (countElement('others', userSelectedEducationArray) > 1) {
$('#educationErrorMsg').html("</br>*others can be chosen only one time");
} else {
}
}
function countElement(item, array) {
var count = 0;
$.each(array, function(i, v) { if (v === item) count++; });
return count;
}
this validation i am trying to do but i am not getting appropriate outcome
so any help regarding this
<select class="form-control" id="educationType" name="educationType[]" aria-label="Select Education Type">
<option selected value="">Select type</option>
<option value="schooling">Schooling</option>
<option value="graduation">Graduation</option>
<option value="post_graduation">Post Graduation</option>
<option value="others">Others</option>
</select>
this is my select dropdown on which i want validation
so any hints or validation tips would be very helpful
THANK YOU !!
English is not my primary language but i'll try my best to explain.
Give same class to all selects that you want to check
then on change function loop through all element with given class
if you're using form-repeater then compare name of the elements to avoid comparing with the same element. if you are not using form-repeater add a "data-counter" element add increase its value on every new add,
after that just compare value of the element, if same then show alert
var count = 1;
$(document).on("click", ".add-btn", function () {
$("#clone")
.find(".gg").addClass('test-select')
.attr("data-counter", count++);
$("#Main").append($("#clone").html());
$("#clone")
.find(".gg").removeClass('test-select');
});
$(document).on("change", ".test-select", function () {
const This = $(this);
$(".test-select").map(function() {
if(this.getAttribute('data-counter') !== $(This).attr('data-counter')){
if($(this).val() == $(This).val()){
alert('repeat');
$(This).css('background-color','red')
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>stack question</title>
</head>
<body>
<div id="Main" class="row p-1">
<div class="col-md-8">
<select class="form-select test-select" data-counter="0" name="test[]" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary add-btn">Add</button>
</div>
</div>
<div class="d-none" id="clone">
<div class="mt-2"></div>
<div class="col-md-8">
<select class="form-select gg test-select" data-counter="" name="test[]" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary add-btn">Add</button>
</div>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$("#educationType").change(function(){
if($(this).val() && !$(this).find('option:selected').attr("data-clicked")){
$(this).find('option:selected').attr("data-clicked","true")
}else if($(this).find('option:selected').attr("data-clicked")){
alert(`"${$(this).val().toUpperCase()}" can be chosen only one time`);
$(this).val("")
}
})
</script>
I have a form where when I select the select option in the input (jurusan) it is also filled in based on the value. Here I want to change the value of the value obtained by selecting the option, how do I do it?
Suppose I select select A will appear 1
So how do you change the number 1 to another value? suppose I want to turn it into a car.
<html>
<head>
<meta charset="utf-8">
<title>Latihan Ajax</title>
</head>
<body>
<h2>Latihan Ajax 1</h2>
<select id="nama" name="fakultas" onchange="fakultas()">
<option value="0">-Pilih-</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<input type="text" name="jurusan" id="jurusan">
<script type="text/javascript">
function fakultas(){
var data = document.getElementById("nama").value;
document.getElementById("jurusan").value = data;
}
</script>
</body>
</html>
Essentially, you are already setting the value in your function and as another commenter pointed out you can change that value to anything you wish. In the snippit below, I use an array to show you how you can use the options value => a number, which could represent an index for the array, to get the value of the array.
const camaros = ['Choose', 'Camaro RS', 'Camaro SS', 'Camaro SS 1LE', 'Camaro ZL1']
function fakultas() {
var data = document.getElementById("nama").value;
document.getElementById("jurusan").value = camaros[data];
}
<html>
<head>
<meta charset="utf-8">
<title>Latihan Ajax</title>
</head>
<body>
<h2>Latihan Ajax 1</h2>
<select id="nama" name="fakultas" onchange="fakultas()">
<option value="0">-Pilih-</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<input type="text" name="jurusan" id="jurusan">
</body>
</html>
You could also use an array of objects that use words as keys to retrieve a value with that key and then set the inputs value.
const obj = [{
car: 'Devel Sixteen',
boat: 'Westinghouse J34',
plane: 'X-15',
spaceship: 'Millennium Falcon'
}]
function fakultas() {
var data = document.getElementById("nama").value;
document.getElementById("jurusan").value = obj[0][data];
}
<html>
<head>
<meta charset="utf-8">
<title>Latihan Ajax</title>
</head>
<body>
<h2>Latihan Ajax 1</h2>
<select id="nama" name="fakultas" onchange="fakultas()">
<option value="">-Pilih-</option>
<option value="car">A</option>
<option value="boat">B</option>
<option value="plane">C</option>
<option value="spaceship">D</option>
</select>
<input type="text" name="jurusan" id="jurusan">
</body>
</html>
Here is my script, what my goal is if other is selected in select, the other text input beside it will be enabled, this is what i've got so far, any approach will be really appreciated, I have 4 questions like this and I want it to be modular, best approach for doing my function to be reuseable.. How do I properly do this without any problem posting my data as 2 name inputs will generate 2 post variables in php.. T_T
<script type="text/javascript" charset="utf-8">
function validate()
{
var ddl = document.getElementById("cause_pain");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "OTHER")
{
document.getElementsByClassName("causepain")[0].removeAttribute("name");
document.getElementsByClassName("causepain1")[0].removeAttribute("disabled");
}
}
</script>
<form action="test.php" method="GET">
<select class="select causepain" id="cause_pain" name="cause_pain" onchange="validate()">
<option value="" selected="selected">Select Cause of Pain</option>
<option value="ARTHRITIS">ARTHRITIS</option>
<option value="RHEUMATISM">RHEUMATISM</option>
<option value="OLD AGE">OLD AGE</option>
<option value="ACTIVE LIFESTYLE WHEN YOUNGER">ACTIVE LIFESTYLE WHEN YOUNGER</option>
<option value="OTHER">OTHER</option>
</select>
<input class="causepain1" type="text" id="cause_pain" name="cause_pain" size="40" onkeyup="clean('this.id')" disabled>
<input type="submit" id="submit"/>
</form>
This method is reusable and pretty straight forward. Using data attributes, you could specify the element that needs to be shown on the specific option element. Also before showing any input element hide the elements that were attributed to the previous selection.
Example:
<form action="test.php" method="GET">
<select class="select causepain" id="cause_pain" name="cause_pain">
<option value="" selected="selected">Select Cause of Pain</option>
<option value="ARTHRITIS">ARTHRITIS</option>
<option value="RHEUMATISM">RHEUMATISM</option>
<option value="OLD AGE">OLD AGE</option>
<option value="ACTIVE LIFESTYLE WHEN YOUNGER">ACTIVE LIFESTYLE WHEN YOUNGER</option>
<option value="OTHER" data-show="cause_pain_other">OTHER</option>
</select>
<input class="causepain1" type="text" id="cause_pain_other" name="cause_pain" size="40"
onkeyup="clean('this.id')" disabled style="display: none;">
<input type="submit" id="submit"/>
</form>
<script type="text/javascript" charset="utf-8">
var selectedOpt;
function selectionChanged(e) {
if (selectedOpt && selectedOpt.dataset.show) {
var showEl = document.getElementById(selectedOpt.dataset.show);
showEl.disabled = true;
showEl.style.display = 'none';
}
selectedOpt = this.querySelector('[value="'+e.target.value+'"]');
if (selectedOpt.dataset.show) {
var showEl = document.getElementById(selectedOpt.dataset.show);
showEl.disabled = false;
showEl.style.display = 'block';
}
}
document.querySelector('select').addEventListener('change', selectionChanged);
</script>
Your selectedOpt should be an object if you're using multiple selects on the same page and then just add the element to the object with the id as an index:
var selectedOpt = {};
...
selectedOpt[this.id] = this.querySelector('[value="'+e.target.value+'"]');
I know this is simple, and I need to search in Google. I tried my best and I could not find a better solution. I have a form field, which takes some input and a select field, which has some values. It also has "Other" value.
What I want is:
If the user selects the 'Other' option, a text field to specify that 'Other' should be displayed. When a user selects another option (than 'Other') I want to hide it again. How can I perform that using JQuery?
This is my JSP code
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="otherType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
Now I want to show the DIV tag**(id="otherType")** only when the user selects Other.
I want to try JQuery. This is the code I tried
<script type="text/javascript"
src="jquery-ui-1.10.0/tests/jquery-1.9.0.js"></script>
<script src="jquery-ui-1.10.0/ui/jquery-ui.js"></script>
<script>
$('#dbType').change(function(){
selection = $('this').value();
switch(selection)
{
case 'other':
$('#otherType').show();
break;
case 'default':
$('#otherType').hide();
break;
}
});
</script>
But I am not able to get this. What should I do? Thanks
You have a few issues with your code:
you are missing an open quote on the id of the select element, so: <select name="dbType" id=dbType">
should be <select name="dbType" id="dbType">
$('this') should be $(this): there is no need for the quotes inside the paranthesis.
use .val() instead of .value() when you want to retrieve the value of an option
when u initialize "selection" do it with a var in front of it, unless you already have done it at the beggining of the function
try this:
$('#dbType').on('change',function(){
if( $(this).val()==="other"){
$("#otherType").show()
}
else{
$("#otherType").hide()
}
});
http://jsfiddle.net/ks6cv/
UPDATE for use with switch:
$('#dbType').on('change',function(){
var selection = $(this).val();
switch(selection){
case "other":
$("#otherType").show()
break;
default:
$("#otherType").hide()
}
});
UPDATE with links for jQuery and jQuery-UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
Demo on JSFiddle
$(document).ready(function () {
toggleFields(); // call this first so we start out with the correct visibility depending on the selected form values
// this will call our toggleFields function every time the selection value of our other field changes
$("#dbType").change(function () {
toggleFields();
});
});
// this toggles the visibility of other server
function toggleFields() {
if ($("#dbType").val() === "other")
$("#otherServer").show();
else
$("#otherServer").hide();
}
HTML:
<p>Choose type</p>
<p>Server:
<select id="dbType" name="dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
</p>
<div id="otherServer">
<p>Server:
<input type="text" name="server_name" />
</p>
<p>Port:
<input type="text" name="port_no" />
</p>
</div>
<p align="center">
<input type="submit" value="Submit!" />
</p>
You have to use val() instead of value() and you have missed starting quote id=dbType" should be id="dbType"
Live Demo
Change
selection = $('this').value();
To
selection = $(this).val();
or
selection = this.value;
I got its answer. Here is my code
<label for="db">Choose type</label>
<select name="dbType" id=dbType">
<option>Choose Database Type</option>
<option value="oracle">Oracle</option>
<option value="mssql">MS SQL</option>
<option value="mysql">MySQL</option>
<option value="other">Other</option>
</select>
<div id="other" class="selectDBType" style="display:none;">
<label for="specify">Specify</label>
<input type="text" name="specify" placeholder="Specify Databse Type"/>
</div>
And my script is
$(function() {
$('#dbType').change(function() {
$('.selectDBType').slideUp("slow");
$('#' + $(this).val()).slideDown("slow");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myfun(){
$(document).ready(function(){
$("#select").click(
function(){
var data=$("#select").val();
$("#disp").val(data);
});
});
}
</script>
</head>
<body>
<p>id <input type="text" name="user" id="disp"></p>
<select id="select" onclick="myfun()">
<option name="1"value="1">first</option>
<option name="2"value="2">second</option>
</select>
</body>
</html>
$('#dbType').change(function(){
var selection = $(this).val();
if(selection == 'other')
{
$('#otherType').show();
}
else
{
$('#otherType').hide();
}
});