I have a scenario with Chosen plugin and jQuery Validate plugin where I'm trying to show and hide fields according to radio button checked options. So as I'm trying to validate them too. Here's my code:
<form id="my-form" action="" method="post">
<input type="radio" name="active" id="1" value="1" onclick="test(1)" > A
<input type="radio" name="active" id="1" value="2" onclick="test(2)"> B
<input type="radio" name="active" id="1" value="3" onclick="test(3)"> C
<input type="radio" name="active" id="1" value="4" onclick="test(4)" checked> D
<div class='with-select' id="resident" style="display:none !important;">
<span>resident:</span>
<select class="chosen-select" required="true">
<option value="">[select option]</option>
<option value="01">Value 1</option>
<option value="02">Value 2</option>
<option value="03">Value 3</option>
<option value="04">Value 4</option>
<option value="05">Value 5</option>
</select>
</div>
<div class='with-select' id="employee" style="display:none !important;">
<span>employee:</span>
<select class="chosen-select" name="selEmp" id="selEmp" required="true">
<option value="">[select option]</option>
<option value="01">Value 1</option>
<option value="02">Value 2</option>
<option value="03">Value 3</option>
<option value="04">Value 4</option>
<option value="05">Value 5</option>
</select>
</div>
<div class='with-select' id="inputvis" style="display:none !important;">
<span>Visitor:</span>
<input type="text" name="txtVis" id="txtVis" required="true">
</div>
<div class='with-select' id="inputothr" >
<span>Other:</span>
<input type="text" name="txtOther" id="txtOther" required="true">
</div>
<div>
<input type="submit" />
</div>
</form>
<script>
// Chosen validation
$('.chosen-select').chosen();
$.validator.setDefaults({ ignore: ":hidden:not(select)" });
// validation of chosen on change
if ($("select.chosen-select").length > 0) {
$("select.chosen-select").each(function() {
if ($(this).attr('required') !== undefined) {
$(this).on("change", function() {
$(this).valid();
});
}
});
}
// validation
$('#my-form').validate({
errorPlacement: function (error, element) {
console.log("placement");
if (element.is("select.chosen-select")) {
console.log("placement for chosen");
// placement for chosen
element.next("div.chzn-container").append(error);
} else {
// standard placement
error.insertAfter(element);
}
}
});
window.test = function(a){
//alert(a);
switch(a){
case 1:
$("#resident").show();
$("#employee").hide();
$("#inputvis").hide();
$("#inputothr").hide();
break;
case 2:
$("#resident").hide();
$("#employee").show();
$("#inputvis").hide();
$("#inputothr").hide();
break;
case 3:
$("#resident").hide();
$("#employee").hide();
$("#inputvis").show();
$("#inputothr").hide();
break;
case 4:
$("#resident").hide();
$("#employee").hide();
$("#inputvis").hide();
$("#inputothr").show();
break;
}
}
</script>
My fiddle
The problem is that I have to select/enter values in every field to post the form. How can I post the form with checking one radio button for example, and then enter value in only that field (others) corresponding and skip validation of other select box or whatever left out?
Related
by selecting the option it has to return the html tags
<select onchange="getval(this);">
<option value="none" selected>none</option>
<option value="1">Blood Group</option>
<option value="2">Donor name</option>
</select>
<script>
function getval(sel)
{
if (sel == 1) {
return '<label for="Bloodgroup">Blood Group</label>
<select name="bg" class="form-control" id="exampleFormControlSelect1">
<option value="O+" selected>O+</option>
<option value="O-">O-</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
</select>';
}else if (sel == 2) {
return ' <label for="name">Name</label>
<input type="text" name = "name" class="form-control" required>';
}
}
</script>
I want an output by choosing the options
for example: if the option is selected as bloodgroup
else if it is donor name
There's a couple of issues in your code. Firstly the argument you're passing to the getval() function is the select element reference, not the value which was selected, so the if condition needs to read the value property from the argument.
In addition your return statements in the function won't do anything alone, as nothing is done with the values you provide back from the function. To add the HTML in the strings to the DOM you need to call a function or property of a target element to append the content to. In the following example that's done using querySelector and innerHTML respectively:
let content = document.querySelector('#content');
function getval(el) {
if (el.value == 1) {
content.innerHTML = `<label for="Bloodgroup">Blood Group</label>
<select name="bg" class="form-control" id="exampleFormControlSelect1">
<option value="O+" selected>O+</option>
<option value="O-">O-</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
</select>`;
} else if (el.value == 2) {
content.innerHTML = `<label for="name">Name</label>
<input type="text" name = "name" class="form-control" required>`;
}
}
<select onchange="getval(this);">
<option value="none" selected>none</option>
<option value="1">Blood Group</option>
<option value="2">Donor name</option>
</select>
<div id="content"></div>
However it's also worth noting that using inline event handlers in onclick attributes is no longer good practice. In addition, storing HTML within your JS should be avoided. A more modern solution would be to use an unobtrusive event handler and have all the HTML within the DOM when the page loads and simply toggle its visibility.
As you've tagged the question with jQuery, here's an example of how to do that:
let content = $('#content');
$('select').on('change', e => {
$('.toggle').hide().filter(`.${e.target.value}`).show();
});
.toggle { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value="none" selected>none</option>
<option value="bloodgroup">Blood Group</option>
<option value="donor">Donor name</option>
</select>
<div id="content">
<div class="toggle bloodgroup">
<label for="Bloodgroup">Blood Group</label>
<select name="bg" class="form-control" id="exampleFormControlSelect1">
<option value="O+" selected>O+</option>
<option value="O-">O-</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
</select>
</div>
<div class="toggle donor">
<label for="name">Name</label>
<input type="text" name = "name" class="form-control" required>
</div>
</div>
I am trying to show a checked checkbox if a value is selected on a select input. So if someone is choosing any value in the dropdown I want the checkbox to switch from off to on. Here is the html example.
I tried different things to achieve that but it is not working at all. My latest try looks like this:
$(document).ready(function() {
$('#subject').each(function() {
if (this.selected)
$("#box-4").prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="number" id="subject" name="subject">
<option value="none" selected disabled hidden>none</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" id="box" disabled="disabled">
I think that I am on the right track here but don´t understand why this isn´t working at all.
$(document).ready(function() {
$('#subject').click(function() {
var option = document.getElementById('subject');
console.log(option.value);
if (option.value ==1 ||option.value==2)
$("#box").prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="number" id="subject" name="subject">
<option value="none" selected disabled hidden>none</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" id="box" >
It should be .change()
Don't check whether it is selected or not
$(document).ready(function() {
// Change event
$('#subject').change(function() {
// On change, at first reseting all checkboxes state
$('input[type="checkbox"]').each(function() {
$(this).prop('checked', false);
});
// After reseting checkboxes state, check the appropriate checkbox
$("#box-" + this.value).prop("checked", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="number" id="subject" name="subject">
<option value="none" selected disabled hidden>none</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="checkbox" id="box-1" disabled>
<input type="checkbox" id="box-2" disabled>
I want to make input element name="sellprice" enable if i select value sell option else input element will be disabled.
<select id="selling" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Wan't To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label for="4">Price :</label>
<input id="4" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
Here is my Javascript Code, I have try this below code but it's not working.
$(document).ready(function(){
$("select[name='selling']").on('change',function(){
if($(this).val()== "free"){
$("input[name='sellprice']").prop("disabled",false);
}else{
$("input[name='sellprice']").prop("disabled",true);
}
});
});
Please have a look I hope it's useful for you.
$(document).ready(function(){
$("select[name='selling']").on('change',function(){
if($(this).val()== "sell"){
$("input[name='sellprice']").prop("disabled",false);
}else{
$("input[name='sellprice']").prop("disabled",true);
}
});
});
I want to make input element name="sellprice" enable
- that is not an input, it's a dropdown
If i select value sell option else input element will be disabled. - from your current explanation i understand that you want to disable the drop-down if the third option is selected
If the third option is selected, the drop-down will be disabled.
$(document).ready(function() {
$('#mounth').change(function() {
if( $(this).val() == "sell") {
$('#mounth').prop( "disabled", true );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<select id="mounth" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Don't Want To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label>Price :</label>
<input id="textInput" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
If you want to disable the input if the third option is selected, the following code will do it
$(document).ready(function() {
$('#mounth').change(function() {
if( $(this).val() == "sell") {
$('#textInput').prop( "disabled", true );
} else {
$('#textInput').prop( "disabled", false );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<select id="mounth" name="selling">
<option value="" selected="selected">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Don't want To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label>Price :</label>
<input id="textInput" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 ">
</div>
<select id="mounth" onchange="myOnChangeFunction()" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Wan't To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label for="4">Price :</label>
<input id="4" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
in js
<script>
function myOnChangeFunction() {
var val = document.getElementById("mounth").value;
if(val === "sell"){
document.getElementById('4').disabled = false;
}else{
document.getElementById('4').disabled = true;
}
}
</script>
Disable/enable text field and list box as per user selected value from parent list box.
Condition:
if user don't know programming then list box and text box must disable.
However it is not working, I know I am missing something.only Javascript please
function check()
{
//if(document.drop_list.choice[1].checked){
if(document.getElementById("mt").value === 'N'){
document.getElementById("no").disabled=true;
document.getElementById("txt").disabled=true;
}else{
document.getElementById("no").disabled=false;
document.getElementById("txt").disabled=false;
}
}
<form name="drop_list" action="listbox-validation-demock.php" method="post" id='f1'>
Do you want to learn Web programming languages ?
<select name="Category" id="mt" onChnage="check()">
<option value='Y'>Y</option>
<option value="N">N</option>
</select>
<br /><br />
<select name="Category" id="no">
<option value=''>Select One</option>
<option value="PHP">PHP</option>
<option value="ASP">ASP</option>
<option value="JavaScript">JavaScript</option>
<option value="HTML with design">HTML</option>
<option value="Perl">Perl</option><option value="MySQL">MySQL</option></select>
<br /><br />
Age<input type="text" size="20" id="txt">
</form>
It should have been :
<select name="Category" id="mt" onChange="check()">
Your script works, the only problem is a typo:
<select name="Category" id="mt" onChnage="check()">
-----------------------------------^^^-------------
I want to change option values as per the input value. For example if i put value02 in input then the select should show options having title="value02" other options will hide.
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
Please help
I think this is the ANSWER you looking for
WORKING:DEMO
HTML
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">01 1</option>
<option value="2" title="value01">01 2</option>
<option value="1" title="value02">02 1</option>
<option value="2" title="value02">02 2</option>
<option value="1" title="value03">03 1</option>
<option value="2" title="value03">03 2</option>
</select>
JS/JQuery
$(document).mouseup(function (e)
{
var container = $("select");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#program option[title='value01']").show();
$("#program option[title='value02']").show();
$("#program option[title='value03']").show();
}
});
$("select").click(function()
{
var getVal = $("input[type=text]").val();
if(getVal == "value01")
{
$("#program option[title='value02']").hide();
$("#program option[title='value03']").hide();
}
else if(getVal == "value02")
{
$("#program option[title='value01']").hide();
$("#program option[title='value03']").hide();
}
else if(getVal == "value03")
{
$("#program option[title='value01']").hide();
$("#program option[title='value02']").hide();
}
else
{
}
});
Assuming your question means that you want to hide <option> tags that don't match the title that the user typed (so only the matching options are available in the <select>), you can do it like this:
You can monitor changes to the fname field and upon each change see if the current value of the fname field matches any of the titles and, if so, hide the options that don't match, leaving only the matching options. If none match, then show all the options.
$("#fname").on("input", function() {
var option;
if (this.value) {
var sel = $("#program");
option = sel.find('option[title="' + this.value + '"]');
}
if (option && option.length) {
// show only the matching options
sel.find("option").hide();
option.show();
} else {
// show all options
sel.find("option").show();
}
});
Try this. It disables all the options. And add new option that is entered from input field. You need to press enter after entering value in input field.
$(document).ready(function() {
$('#fname').bind('keypress', function(e) {
var code = e.keyCode || e.which;
if (code == 13) { //Enter keycode
$("#program").append($('<option/>', {
value: $("#fname").val(),
title: $("#fname").val(),
text: $("#fname").val()
}));
$("#program option[value!=" + $("#fname").val() + "]").attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
Use jquery. Get the value of the input and search the option for that value and set the value. Try with -
$('#program').val($('#program option[title=' + $('#fname').val() + ']').val())
Try this...
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
$('#fname').on('blur', function(){
var value=$("#fname").val();
$('#program').val($('#program option[title=' + value + ']').val());
});
demo:https://jsfiddle.net/qrecL29u/2/
And without jQuery
var field = document.getElementById('fname'),
select = document.getElementById('program');
field.addEventListener('keyup', function(evt) {
for (var i = 0; i < select.children.length; i++) {
if (select.children[i].title !== field.value) select.children[i].style.display = 'none';
else select.children[i].style.display = 'block';
}
});
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>