Displaying options for two select - javascript

friends. Faced such a question. I have two select, in each select of the city they are taken from the database, and in the second select - the city that is != To the city from the first select. Help me, pleasee..)
Code
<form action="{{route('countDistance')}}" method="post">
<div class="starter-template">
<select class="selectpicker" name="from" id="from">
#foreach($deps as $depart)
<option>{!!$depart->City!!}</option>
#endforeach
</select>
<select class="selectpicker" name="to" id="to">
#foreach($deps as $depart)
<option>{!!$depart->City!!}</option>
#endforeach
</select>
<button type="submit" class="btn btn-info">Count »</button>
{{ csrf_field() }}
</div>
</form>

I used jquery to accomplish this. For that I had to add first option saying 'Please select' for both. On change of #from select box, I hid the option with the same text from #to select box. And before hiding any option, showed all, so that previously hidden option may be available now.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="{{route('countDistance')}}" method="post">
<div class="starter-template">
<select class="selectpicker" name="from" id="from">
<option>Please select</option>
#foreach($deps as $depart)
<option>{!!$depart->City!!}</option>
#endforeach
</select>
<select class="selectpicker" name="to" id="to">
<option>Please select</option>
#foreach($deps as $depart)
<option>{!!$depart->City!!}</option>
#endforeach
</select>
<button type="submit" class="btn btn-info">Count »</button>
{{ csrf_field() }}
</div>
</form>
<script>
$(document).ready(function() {
$("#from").change(function() {
// first show all from #to
$("#to > option").each(function() {
$(this).show();
});
console.log($("#from").val());
var toHide = $("#from").val();
$("#to option:contains('" + toHide + "')").hide();
});
});
</script>

Related

How to show multiple select options when user select multiple options and when unselect it still hide and reset!!!?? jquery

I have select options contains languages, it's supposedly that user choose multiple options (languages) or an option (language), and i want user when choose an option (language), new select option shows, and contains his level in that language.
when user select multiple languages (english, arabic, france), three select option show, his level in these language, and when unselect any options, it's supposed to, the select option (that contains his level in that language) become hidden and reset (return to default select (first option)).
but i've some problems in my code
1- when user select multiple options, multiple select options that contains his level don't show all at once.
2- when user unselect an option it stills show and not reset (return to default select (first option))?!!
could you help me please
my view blade with script:
#extends('layouts.app')
#section('content')
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
<option value="4">Espanole</option>
</select>
</div>
</div>
<div id="arabicShow" style="display: none" class="form-row">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
#stop
#section('script')
<script type="text/javascript">
$(document).ready(function (){
$( "#languages option:first-child" ).attr("disabled","disabled");
$( "#arabic option:first-child" ).attr("disabled","disabled");
$( "#english option:first-child" ).attr("disabled","disabled");
$( "#france option:first-child" ).attr("disabled","disabled");
$('#languages').change(function(){
var text = $(this).find("option:selected").text().trim(); //get text
if(text === "Arabic"){
$('#arabicShow').show();
}else if(text === "English"){
$('#englishShow').show();
}else if(text === "France"){
$('#franceShow').show();
}else {
$('#arabicShow').hide();
$('#englishShow').hide();//hide
}
});
});
</script>
#stop
You can use .each loop to iterate through all selected options and then depending on condition show require select-boxes.
Demo Code :
$(document).ready(function() {
$("#languages option:first-child").attr("disabled", "disabled");
$("#arabic option:first-child").attr("disabled", "disabled");
$("#english option:first-child").attr("disabled", "disabled");
$("#france option:first-child").attr("disabled", "disabled");
$('.selects').hide(); //hide all
$('#languages').change(function() {
$('.selects select:not(:visible)').val(""); //reset
$('.selects').hide(); //hide all
//loop through all selected options..
$(this).find("option:selected").each(function() {
var text = $(this).text()
if (text === "Arabic") {
$('#arabicShow').show();
} else if (text === "English") {
$('#englishShow').show();
} else if (text === "France") {
$('#franceShow').show();
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
</select>
</div>
</div>
<!--added one common class i.e : selects-->
<div id="arabicShow" class="form-row selects">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>

Duplicate fields in a form upon selection

I made a form to select skills. After the 1st selection is made, a 2nd list is shown with options depending of the 1st choice.
Then, a "+" button allow to duplicate the fields ans add another skill.
My problem :
The inital form is OK but when I press "+" the second form created doesn't work (the second "select field" is not filtered according to the first select.
Please can you help?
Thanks a lot.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skill form</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" /></script>
</head>
<body>
<h1>Insert your skills</h1>
<div class="copycat">
<div id="form">
<form action="" method="post" name="addbloc">
<p>
<label for="tpl">Family :</label>
<select name="tpl" id="tpl">
<option value="">-- Select your family --</option>
<option value="Language" data-id='#champ1'>Language</option>
<option value="Cooking" data-id='#champ2'>Cooking</option>
</select><br />
<div class="champ" id="champ1">
<label for="Language">Skill :</label>
<select name="Language" id="Language">
<br/>
<option value="">-- Select your skill --</option>
<option value="Spanish" data-id='#champ1'>Spanish</option>
<option value="Chineese" data-id='#champ1'>Chineese</option>
<option value="French" data-id='#champ1'>French</option>
</select><br />
<input onclick="copycat();" id="button" value="+" type="button">
</div>
<div class="champ" id="champ2">
<label for="Cooking">Skill :</label>
<select name="Cooking" id="Cooking">
<br/>
<option value="">-- Select your skill --</option>
<option value="Italian" data-id='#champ2'>Italian</option>
<option value="Mexican" data-id='#champ2'>Mexican</option>
<option value="Japanese" data-id='#champ2'>Japanese</option>
<option value="Greek" data-id='#champ2'>Greek</option>
</select><br />
<input onclick="copycat();" id="button" value="+" type="button">
</div>
</p>
</form>
</div>
</div>
<!-- WIP ----- Submit button to store in database -->
<div style="z-index:99;"><input type="submit" name="Submit" value="Submit" class="bouton"></div>
<script type="text/javascript">
// Show 2nd field according to first field selection
$(document).ready(function() {
$('.champ').hide(); // on cache les champ par défaut
$('select[name="tpl"]').change(function() { // lorsqu'on change de valeur dans la liste
$('.champ').hide();
var selectedDataID = $(this).find('option:selected').attr('data-id');
$(selectedDataID).show();
});
});
// Duplicate field when + button is pressed
function copycat(){
$('.copycat:first').clone().appendTo($('#form'));
}
</script>
</body>
</html>
You cannot use same ids for different elements so instead of id i have change that to html attributes i.e :data-id .Then , when you select any option from select-box only divs which are inside form should change not others which are added dynamically so use $(this).closest("form").. to make change inside form htmls . Lastly ,these elements are created dynamically so use $(document).on('change', 'select[name="tpl"]',...
Also, your copycat function is copying entire div so next time if you press + it will show 2 copy of select and so on .To fix this use $('.copycat form:first')....
Demo Code :
$(document).ready(function() {
$('.champ').hide();
$(document).on('change', 'select[name="tpl"]', function() {
$(this).closest("form").find('.champ').hide(); //hide the champ div inside form which is there
var selectedDataID = $(this).find('option:selected').attr('data-id');
//get the div with dta-id of slected option
$(this).closest("form").find("div[data-id=" + selectedDataID + "]").show();
});
});
// Duplicate field when + button is pressed
function copycat() {
//copy first form
$('.copycat form:first').clone().appendTo($('#form'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Insert your skills</h1>
<div class="copycat">
<div id="form">
<form action="" method="post" name="addbloc">
<p>
<label for="tpl">Family :</label>
<!--instead of id added data-id -->
<select name="tpl" id="tpl">
<option value="">-- Select your family --</option>
<option value="Language" data-id='champ1'>Language</option>
<option value="Cooking" data-id='champ2'>Cooking</option>
</select><br />
<!--added data-id-->
<div class="champ" data-id="champ1">
<label for="Language">Skill :</label>
<select name="Language" id="Language">
<br/>
<option value="">-- Select your skill --</option>
<option value="Spanish" data-id='#champ1'>Spanish</option>
<option value="Chineese" data-id='#champ1'>Chineese</option>
<option value="French" data-id='#champ1'>French</option>
</select><br />
<input onclick="copycat();" id="button" value="+" type="button">
</div>
<!--added data-id-->
<div class="champ" data-id="champ2">
<label for="Cooking">Skill :</label>
<select name="Cooking" id="Cooking">
<br/>
<option value="">-- Select your skill --</option>
<option value="Italian" data-id='#champ2'>Italian</option>
<option value="Mexican" data-id='#champ2'>Mexican</option>
<option value="Japanese" data-id='#champ2'>Japanese</option>
<option value="Greek" data-id='#champ2'>Greek</option>
</select><br />
<input onclick="copycat();" id="button" value="+" type="button">
</div>
</p>
</form>
</div>
</div>
<!-- WIP ----- Submit button to store in database -->
<div style="z-index:99;"><input type="submit" name="Submit" value="Submit" class="bouton"></div>

Change option value into href?

Hi I downloaded some html template which I am trying to readjust and I have some code form like this, is it possible that I can change the option "value" into "href" so when client select lets say "Standard Access" and click on the button Buy Now to redirect to the paypal lets say?
Here is the code :
<div class="modal-body">
<form method="POST" action="#">
<div class="form-group">
<input type="text" class="form-control" name="your-name" placeholder="Your Name">
</div>
<div class="form-group">
<input type="text" class="form-control" name="your-email" placeholder="Your Email">
</div>
<div class="form-group">
<select id="ticket-type" name="ticket-type" class="form-control" >
<option value="">-- Select Your Ticket Type --</option>
<option value="standard-access">Standard Access</option>
<option value="pro-access">Pro Access</option>
<option value="premium-access">Premium Access</option>
</select>
</div>
<div class="text-center">
<button type="submit" class="btn">Buy Now</button>
</div>
</form>
</div>
Here you have some example. Probably it's possible to make it better, but I don't know the context.
$('#confirmButton').on('click', function() {
const href = $('#redirect').val();
window.location.href = href;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="redirect">
<option value="" disabled selected>-- Select Your Ticket Type --</option>
<option value="https://www.google.com">Google</option>
<option value="https://stackoverflow.com">Stackoverflow</option>
</select>
<button type="button" id="confirmButton">Confirm</button>
You can add onsubmit listener to your form.
<form method="POST" action="#" onsubmit="myFunction()">...
</form>
<script>
myFunction(){
var x = document.getElementById("ticket-type").value;
if (x== 'standard-access') {window.location.href = "http://www.URL1.html";}
else if (x== 'pro-access') {window.location.href = "http://www.URL2.html";}
return false; // to prevent default submit
}
</script>

Display value from selected option on every click

I have a dropdown menu where list is selected from mysql database and a textbox contain datepicker. How can i display value selected from the dropdown menu and datepicker on every click on add button? The code can add div dynamically onclick on add button but the value selected to be displayed in the div are changed on every selected dropdown menu because of the javascript onchange function.
How can i display the value correctly?
$( ".js-datepicker" ).datepicker();
$("#choose_exam").on("change", function() {
var selected = $(this).val();
$("#exam").html("" + selected);
});
$("#t_exam").on("change", function() {
var selected = $(this).val();
$("#exam_date").html("" + selected);
})
//contents of the div added after clicking on add button in the form
$(".add-more").click(function() {
var html = $("#copy-fields").html();
$("#validation-step2").append(html);
$('.js-datepicker').datepicker('update');
});
//remove button
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- This is the form contain dropdown menu and datepicker textbox -->
<div class="tab-pane push-30-t push-50" id="validation-step2">
<div class="form-group">
<select class="form-control" name="choose_exam[]" id="choose_exam">
<!--<?php
$sql = "Select name from exam_list order by id asc";
$result = mysql_query( $sql );
while(list($category) = mysql_fetch_row($result)){
$option = '<option value="'.$category.'">'.$category.'</option>';
echo ($option);}
?>-->
<option value="0">Please choose</option>
<option value="1">Sample Category 1</option>
<option value="2">Sample Category 2</option>
<option value="3">Sample Category 3</option>
<option value="4">Sample Category 4</option>
<option value="5">Sample Category 5</option>
</select>
<label for="choose_exam">Exam List</label>
</div>
<div class="form-group">
<input class="js-datepicker form-control" type="text" name="t_exam" id="t_exam" data-date-format="dd/mm/yyyy">
<label for="t_exam">Date</label>
</div>
<div class="form-group">
<button class="btn btn-default add-more pull-right" type="button">Add</button>
</div>
<!-- This is for dynamically add every div contains exam and date value upon clicking add button -->
<div class="copy-fields hide" id="copy-fields">
<div class="control-group">
<div class="form-group">
<div id="exam" name="exam[]"></div>
<div id="exam_date" name="exam_date[]"></div>
</div>
<div class="form-group">
<button class="btn btn-default remove pull-right" type="button">Delete</button>
</div>
</div>
</div>
Your code has several problems:
The HTML you're copying using var html = $("#copy-fields").html(); contains elements with the id attribute specified, which will lead you to having a bunch of elements with the same id. Turn #exam to .exam and #exam_date to .exam_date to fix that.
Then, inside the change event, use first() or last(), so that only the first or the last of .exam and .exam_date change when the event is triggered. In the first snippet, I use last() as in $(".exam").last().html(this.value);.
The line $(".js-datepicker").datepicker("update"); throws an error, perhaps because you haven't set which date to update to. In the snippets below, I assume you want to reset it.
Snippet 1:
(This snippet follows your code as much as possible including a live update of the data 'onchange'.)
/* ----- JavaScript ----- */
/* Initialise the datepicker. */
$(".js-datepicker").datepicker();
/* Set the 'change' event. */
$("#choose_exam").on("change", function() {
$(".exam").last().html(this.value);
});
$("#t_exam").on("change", function() {
$(".exam_date").last().html(this.value);
})
/* Insert the given data to the DOM. */
$(".add-more").click(function() {
/* Cache the innerHTML of the '#copy-fields'. */
var html = $("#copy-fields").html();
/* Insert it as last inside '#validation-step2'. */
$("#validation-step2").append(html);
/* Reset the 'select' element and the date picker. */
$("#choose_exam").val(0);
$(".js-datepicker").val("");
});
/* Remove the saved data when the remove button is clicked. */
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="tab-pane push-30-t push-50" id="validation-step2">
<div class="form-group">
<select class="form-control" name="choose_exam[]" id="choose_exam">
<option value="0">Please choose</option>
<option value="1">Sample Category 1</option>
<option value="2">Sample Category 2</option>
<option value="3">Sample Category 3</option>
<option value="4">Sample Category 4</option>
<option value="5">Sample Category 5</option>
</select>
<label for="choose_exam">Exam List</label>
</div>
<div class="form-group">
<input class="js-datepicker form-control" type="text" name="t_exam"
id="t_exam" data-date-format="dd/mm/yyyy">
<label for="t_exam">Date</label>
</div>
<div class="form-group">
<button class="btn btn-default add-more pull-right" type="button">Add</button>
</div>
<!-- This is for dynamically add every div contains exam and date
value upon clicking add button -->
<div class="copy-fields hide" id="copy-fields">
<div class="control-group">
<div class="form-group">
<div class="exam" name="exam[]"></div>
<div class="exam_date" name="exam_date[]"></div>
</div>
<div class="form-group">
<button class="btn btn-default remove pull-right" type="button">Delete</button>
</div>
</div>
</div>
</div>
Snippet 2:
(This snippet presents an alternate approach using a template to add the data to the DOM.)
/* ----- JavaScript ----- */
/* Create a template. */
var template = `
<div class="control-group">
<div class="form-group">
<div class="exam" name="exam[]">[_EXAM_]</div>
<div class="exam_date" name="exam_date[]">[_DATE_]</div>
</div>
<div class="form-group">
<button class="btn btn-default remove pull-right" type="button">Delete</button>
</div>
</div>
`;
/* Initialise the datepicker. */
$(".js-datepicker").datepicker();
/* Insert the given data to the DOM. */
$(".add-more").click(function() {
/* Cache the data. */
var
exam = $("#choose_exam").val(),
date = $("#t_exam").val(),
editedTemplate = template.replace("[_EXAM_]", exam).replace("[_DATE_]", date);
/* Insert it as last inside '#validation-step2'. */
$("#validation-step2").append(editedTemplate);
/* Reset the 'select' element and the date picker. */
$("#choose_exam").val(0);
$(".js-datepicker").val("");
});
/* Remove the saved data when the remove button is clicked. */
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="tab-pane push-30-t push-50" id="validation-step2">
<div class="form-group">
<select class="form-control" name="choose_exam[]" id="choose_exam">
<option value="0">Please choose</option>
<option value="1">Sample Category 1</option>
<option value="2">Sample Category 2</option>
<option value="3">Sample Category 3</option>
<option value="4">Sample Category 4</option>
<option value="5">Sample Category 5</option>
</select>
<label for="choose_exam">Exam List</label>
</div>
<div class="form-group">
<input class="js-datepicker form-control" type="text" name="t_exam"
id="t_exam" data-date-format="dd/mm/yyyy">
<label for="t_exam">Date</label>
</div>
<div class="form-group">
<button class="btn btn-default add-more pull-right" type="button">Add</button>
</div>
</div>
So i prefer to discuss about your question under this answer, because i still feel something is wrong, it's not clear to me what you want to do exactly, but here is you can get #t_exam and #choose_exam value after click on add button. Also it dynamically add selected values to your html but with a little changes.
$(".js-datepicker").datepicker();
$(".add-more").click(function() {
var selectedExam = $('#choose_exam option:selected').val();
var selectedDate = $('#t_exam').val();
var html = '<div class="control-group">'+
'<div class="form-group">'+
'<div class="exam" name="exam[]">'+selectedExam+'</div>'+
'<div class="exam_date" name="exam_date[]">'+selectedDate+'</div></div>'+
'<div class="form-group">'+
'<button class="btn btn-default remove pull-right" type="button">Delete</button>'+
'</div></div>'
;
$("#copy-fields").append(html);
// $('.js-datepicker').datepicker('update');
});
//remove button
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- This is the form contain dropdown menu and datepicker textbox -->
<div class="tab-pane push-30-t push-50" id="validation-step2">
<div class="form-group">
<select class="form-control" name="choose_exam[]" id="choose_exam">
<!--<?php
$sql = "Select name from exam_list order by id asc";
$result = mysql_query( $sql );
while(list($category) = mysql_fetch_row($result)){
$option = '<option value="'.$category.'">'.$category.'</option>';
echo ($option);}
?>-->
<option value="0">Please choose</option>
<option value="1">Sample Category 1</option>
<option value="2">Sample Category 2</option>
<option value="3">Sample Category 3</option>
<option value="4">Sample Category 4</option>
<option value="5">Sample Category 5</option>
</select>
<label for="choose_exam">Exam List</label>
</div>
<div class="form-group">
<input class="js-datepicker form-control" type="text" name="t_exam" id="t_exam" data-date-format="dd/mm/yyyy">
<label for="t_exam">Date</label>
</div>
<div class="form-group">
<button class="btn btn-default add-more pull-right" type="button">Add</button>
</div>
<!-- This is for dynamically add every div contains exam and date value upon clicking add button -->
<div class="copy-fields hide" id="copy-fields"></div>

required drop-down lists with Save Button

I have 2 required drop-down lists,this is my try but it doesn't work when I click on the "Save" Button:
<div>
<button class="btn btn-action" ng-click="save()">Save</button>
</div>
<form>
<div class="row">
<select required>
<option ng-repeat="pi in listProduitAvailable" value="{{pi.id}}">{{pi.reference}}</option>
</select>
<select required>
<option ng-repeat="pi in listProduitAvailable" value="{{pi.id}}">{{pi.reference}}</option>
</select>
</div>
</form>
the save method:
$scope.save= function() {
$scope.creerGamme();
}
how can I correct my code please
thanks for help

Categories

Resources