How should i show select title with css - javascript

Hello Guys Please Help me for this I didn't how I show select title. I want to show above When should we call you?.
please check my code Thanks:-
<select name="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today" id="df">today</option>
<option value="tommorow" id="df">tommorow</option>
<option value="sunday" id="dfd">sunday</option>
</select>
Please check online codepen code link:- https://codepen.io/anon/pen/EQBbyG


You can add a <label> in your HTML Markup.
<label for="myfirst">When should we call you?</label>
<select name="myfirst" id="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today" id="df">today</option>
<option value="tommorow" id="df">tommorow</option>
<option value="sunday" id="dfd">sunday</option>
</select>


If you use jQuery you can select all the <select> elements with a title attribute, and copy its value into the first <option>.
$("select[title] option:first-child").text(function(i, oldtext) {
if (oldtext.trim() == '') {
return $(this).parent().attr("title");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today">today</option>
<option value="tommorow">tommorow</option>
<option value="sunday" >sunday</option>
</select>
<select name="mytime" title="What time of day?">
<option class="optnoval"></option>
<option value="morning">Morning</option>
<option value="afternoon" >Afternoon</option>
<option value="evening">Evening</option>
</select>

Related

submit any of the text of the selected option using html

When the form is submit I can only get the number assigned to the value. I want to submit any of the texts that is between the select options.
For example, when I select Bird and Dove I want to receive Bird and Dove not 3 and 3
$("#select1").change(function() {
if ($(this).data('options') === undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form method="POST" action="process.php">
<select name="select1" id="select1">
<option value="0">-Select-</option>
<option value="1">Cars</option>
<option value="2">Phones</option>
<option value="3">Birds</option>
</select>
<select name="select2" id="select2">
<option value="0">-Select-</option>
<option value="1">BMW</option>
<option value="1">Benz</option>
<option value="1">Toyota</option>
<option value="2">iPhone</option>
<option value="2">Samsung</option>
<option value="2">Motorola</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="3">Dove<option>
</select><br>
<label>Postal code</label>
<input type="number" name="zipcode" placeholder="postal code">
<button>Search</button>
</form>

When the form is submit the value of the selected option is sent. The problem is because you're using this value to match the child option elements to the parent.
To fix this you need to use value as it was intended, ie. to hold the value you want to send to the server when the form is submit, and use a different method for grouping the option elements between select. I'd suggest using a data attribute for this instead, like this:
$("#select1").change(function() {
if (!$(this).data('options')) {
$(this).data('options', $('#select2 option').clone());
}
var category = $(this).find('option:selected').data('category');
var options = $(this).data('options').filter(function() {
return $(this).data('category') == category;
});
$('#select2').html(options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="process.php">
<select name="select1" id="select1">
<option data-category="0" value="">-Select-</option>
<option data-category="1" value="Cars">Cars</option>
<option data-category="2" value="Phones">Phones</option>
<option data-category="3" value="Birds">Birds</option>
</select>
<select name="select2" id="select2">
<option data-category="0" value="Cars">-Select-</option>
<option data-category="1" value="BMW">BMW</option>
<option data-category="1" value="Benz">Benz</option>
<option data-category="1" value="Toyota">Toyota</option>
<option data-category="2" value="iPhone">iPhone</option>
<option data-category="2" value="Samsung">Samsung</option>
<option data-category="2" value="Motorola">Motorola</option>
<option data-category="3" value="Eagle">Eagle</option>
<option data-category="3" value="Hawk">Hawk</option>
<option data-category="3" value="Dove">Dove</option> <!-- note I fixed your typo here, missing / -->
</select><br>
</form>

Just change the value from number to text.
example
<option value="Hawk">Hawk</option>
<option value="Dove">Dove<option>
Done!

How can I get the value select name

I´m now beginning with programming and I need to know what text would be the value of this code. The JS code would be an "on click" event from this unfoldable list. Thanks you in advance!!
<select name="select1" data-dojo-type="dijit/form/Select">
<option value="Artesania">Artesania</option>
<option value="Banco" selected="selected">Banco</option>
<option value="Bar">Bar</option>
<option value="Bodega">Bodega</option>
<option value="Boutique">Boutique</option>
<option value="Discoteca">Discoteca</option>

var selectbox = document.getElementById('select');
selectbox.addEventListener('change', function(){
console.log(this.value);
//do whatever you want with the value
});
<select name="select1" data-dojo-type="dijit/form/Select" id='select'>
<option value="Artesania">Artesania</option>
<option value="Banco" selected="selected">Banco</option>
<option value="Bar">Bar</option>
<option value="Bodega">Bodega</option>
<option value="Boutique">Boutique</option>
<option value="Discoteca">Discoteca</option>
</select>

Show a second select box based on the option chosen in the first?

I have the following select drop down box:
<select name="selectcourier" required>
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
What I want to do is if Interlink is selected a secondary select box appears below it and disappears if it unselected and another option is chosen instead. This is the second select drop down box.
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
How can I go about getting this working?

bind an event with javascript on change and insert a new element in the DOM (the second select statement) like:
(provided you have jquery)
var secondSelect="your_html_here";
$("name='selectcourier'").change(function() {
if (this.val()=='Interlink') {
$('body').append(secondSelect); }
else {
$('#secondselectid').remove();
});
customise the html and where you want to append the second select

<script>
$(function(){
$('#s1').hide();
});
function call()
{
var check=$('#s2').val();
if(check=="Interlink")
{
$('#s1').show();
}
else
{
$('#s1').hide();
}
}
</script>
<select name="selectcourier" required onchange="call();" id="s2" >
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<label>Select Shipping Courier:</label>
<select name="selectcourier" required id="s1">
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
You can use the above code to achieve your task

Just react on the event of changing the value of the first select.
If the value equals 'Interlink' display the second select - if the value is something else hide the second select.
<select name="selectcourier" required onchange="document.getElementById('interlink_addition').style.display = (this.value=='Interlink' ? 'block' : 'none')">
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<div id="interlink_addition" style="display:none">
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
</div>

you can use ajax for this. write a ajax function to show second select box and call it on onChange event of the first select Box

How to add content with select tag without refreshing the page(AJAX)

I am trying to make a page when someone clicks on a option in the select form, another select form appears then another without having to refresh the page. I know you use AJAX for not refreshing but my code is somehow not working when tried.
HTML
<div id="example">
<select id="foo">
<option value="">lets make another</option>
<option value="index.html">Demographic</option>
<option value="index.html">Crime</option>
<option value="index.html">School</option>
</select>
</div>
<div id="result">
</div>
javascript(AJAX)
$(document).ready(function() {
$('#example').on('click', 'button.switch', function() {
$.ajax('AjaxLoadedContent.html')
.done(function(response){
$('#result').html(response);
});
});
});
Content thats suppose to load(Another select form)
<select id="foo">
<option value="">Pick a site</option>
<option value="index.html">Demographic</option>
<option value="index.html">Crime</option>
<option value="index.html">School</option>
</select>
But whats wrong??

As #Goose said in the comments, instead of using an Ajax call you could hide the select boxes and show them based on the value of the shown select option, as shown below:
HTML
<div id="example">
<select id="foo">
<option value="">lets make another</option>
<option value="demographic">Demographic</option>
<option value="crime">Crime</option>
<option value="school">School</option>
</select>
<select id="demographic" class="toggle">
<option value="">Demographic</option>
<option value="d1">d1</option>
<option value="d2">d2</option>
<option value="d3">d3</option>
</select>
<select id="crime" class="toggle">
<option value="">Crime</option>
<option value="c1">c1</option>
<option value="c2">c2</option>
<option value="c3">c3</option>
</select>
<select id="school" class="toggle">
<option value="">School</option>
<option value="s1">s1</option>
<option value="s2">s2</option>
<option value="s3">s3</option>
</select>
</div>
<div id="result"></div>
CSS
.toggle {
display:none;
}
JS
$('#foo').on('change', function(){
var val = $(this).val();
$('.toggle').hide();
$('#'+val).show();
});
Fiddle

If your content is fairly static, I'd use the following code that doesn't invoke additional http calls:
HTML:
<div id="example">
<select id="foo">
<option value="">lets make another</option>
<option value="">Demographic</option>
<option value="">Crime</option>
<option value="">School</option>
</select>
</div>
<div id="result">
<select id="foo">
<option value="">Pick a site</option>
<option value="">Demographic</option>
<option value="">Crime</option>
<option value="">School</option>
</select>
</div>
JS:
$(function() {
$("#result").hide();
$("#foo").click(function() {
$("#result").show();
});
});
Let me know if it helps. Cheers!

Change fieldset via radio button

I have a form with 2 radio buttons and when either button is toggled it shows or hides a certain fieldset. The issue I have is because the fieldset is just hidden so when the form is submitted it still takes the first fieldsets values.
I have setup a fiddle to show how the form changes the fieldsets http://jsfiddle.net/hhdMq/1/
So when I select "Scale B" although you can change the correct values, when the form is submitted it takes the default values of Scale A.
<center>
<input type="radio" name="sellorlet" value="Yes" id="rdYes" checked="yes" />
<label for="rdYes">Scale A</label>
<input type="radio" name="sellorlet" value="No" id="rdNo" />
<label for="rdNo">Scale B</label>
</center>
<fieldset id="sell">
<center>
<select id="pricemin" name="min">
<option value="50000">Min Price</option>
<option value="50000">£50,000</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
<option value="600000">£600,000</option>
<option value="700000">£700,000</option>
<option value="800000">£800,000</option>
<option value="900000">£900,000</option>
<option value="1000000">£1,000,000</option>
<option value="1250000">£1,250,000</option>
<option value="1500000">£1,500,000</option>
<option value="1750000">£1,750,000</option>
<option value="2000000">£2,000,000</option>
<option value="3000000">£3,000,000</option>
</select>
<select id="pricemax" name="max">
<option value="5000000">Max Price</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
<option value="600000">£600,000</option>
<option value="700000">£700,000</option>
<option value="800000">£800,000</option>
<option value="900000">£900,000</option>
<option value="1000000">£1,000,000</option>
<option value="1250000">£1,250,000</option>
<option value="1500000">£1,500,000</option>
<option value="1750000">£1,750,000</option>
<option value="2000000">£2,000,000</option>
<option value="3000000">£3,000,000</option>
<option value="4000000">£4,000,000</option>
<option value="5000000">£5,000,000</option>
</select>
</center>
</fieldset>
<fieldset id="buy" style="display:none;">
<center>
<select id="lpricemin" name="min">
<option value="500">Min Price</option>
<option value="500">£500</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
<option value="1250">£1250</option>
<option value="1500">£1500</option>
<option value="2000">£2000</option>
<option value="2500">£2500</option>
<option value="3000">£3000</option>
<option value="4000">£4000</option>
<option value="5000">£5000</option>
</select>
<select id="lpricemax" name="max">
<option value="5000">Max Price</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
<option value="1250">£1250</option>
<option value="1500">£1500</option>
<option value="2000">£2000</option>
<option value="2500">£2500</option>
<option value="3000">£3000</option>
<option value="4000">£4000</option>
<option value="5000">£5000</option>
</select>
</center>
</fieldset>
and the jquery used:
$("input[name='sellorlet']").change(function () {
$("#sell").toggle(this.value == "Yes");
$("#let").toggle(this.value == "No");
});
My question is, how can I completely disable the first fieldset if Scale B is selected and likewise when Scale A is selected it will disable the second fieldset?
Many thanks

When submitting a form, you cannot have two inputs, selects, or textareas with the same name in the same form. Doing so will cause confusion and probably end up the wrong info being submitted. There are two ways you can fix this.
Method 1:
Change the
<select id="lpricemin" name="min">
<select id="lpricemin" name="lmin">
to
<select id="lpricemax" name="max">
<select id="lpricemax" name="lmax"> respectively.
This will allow you to handle the data from lmin and lmax and ensure you get the info from the second fieldset.
Method 2:
Put the second fieldset in a different form. Then just change the jQuery to show the forms instead of the fieldsets.

Changed the radio buttons now to a tabbed design so the form can be separated correctly. If anyone would like to know how the tabs are done they are here http://cssdeck.com/labs/fancy-tabbed-navigation-with-css3-and-jquery

Method 3 would be to change the switch the content of your select through Javascript rather than toggling through visibility. You can do that through:
function setMaxScale()
{
document.getElementById().innerHTML = "<option value="50000">Min Price</option>\
<option value="50000">£50,000</option>\
<option value="100000">£100,000</option>\
<option value="200000">£200,000</option>\
<option value="300000">£300,000</option>...";
}
An other clean solution would be to create your scales dynamically with a loop.

Categories

Resources