I'm trying to validate a login script, pretty much everything else is done but I don't know how to do a drop-down menu. How would I validate it, to ensure an option other than the default is selected, through JavaScript?
All of the other validation is done via a separate .js sheet, so I'm not sure if document.getElementById works or I'm just making silly mistakes?
HTML (Form ID is "registration_form"):
<select class="signup_input_styleV2" id="location" name="location">
<option value="false" disabled selected>Region</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value"Oceania">Oceania</option>
<option value"Asia">Asia</option>
<option value"Africa">Africa</option>
<option value"Antarctica">Antarctica</option>
</select>
if ( document.getElementsByName('location')[0].value == 'false' ){
alert('Select something !');
}
This might suffice.
Yes, you can use getElementById
function validate(){
var val = document.getElementById("location").value
console.log(val);
}
<select class="signup_input_styleV2" id="location" name="location">
<option value="false" disabled selected>Region</option>
<option value="Europe">Europe</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value"Oceania">Oceania</option>
<option value"Asia">Asia</option>
<option value"Africa">Africa</option>
<option value"Antarctica">Antarctica</option>
</select>
<input type="submit" onClick="return validate();">
Related
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!
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>
<p class="birthday_date">
<label for="birthday">Birthday</label>
<select id="months" class="dd">
<option value="">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="text" name="dy" id="date" placeholder="Day">
<input type="text" name="year" id="year" placeholder="Year">
<span id="birthday_error">you can't leave this empty.</span>
</p>
#months option[value=""] {
display: none;
}
$('#months').change(function () {
var selectedValue = $(this).val();
if (selectedValue == "") {
$(this).addClass('input_error');
$('#birthday_error').show();
}
});
when you click on dropdown if you select an option then fine if do not select an option in dropdown then show an error message and apply input_error CSS to dropdown like google sign up dropdown
1.No jQuery library is there. so code will not work.(so add jQuery library)
2.Extra # is there in your code.
3.Use $(this) instead of months variable.
And finally i hope you want like this:- (if selectbox have some value then hide error message and remove error class form select-box otherwise add error class to selectbox and show error message too):-
$(document).ready(function(){ // add this if you are adding code at top of the page not in bottom
$('#months').addClass('input_error');
$('#birthday_error').show();
$('#months').change(function () {
var selectedValue = $(this).val();
if (selectedValue == "") {
$(this).addClass('input_error'); //remove # and months variable and use $(this)
$('#birthday_error').show();
}else{
$(this).removeClass('input_error'); //remove class
$('#birthday_error').hide();//hide error message
}
});
});
.input_error{
border-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- add jQuery library-->
<p class="birthday_date">
<label for="birthday">Birthday</label>
<select id="months" class="dd">
<option value="">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="text" name="dy" id="date" placeholder="Day">
<input type="text" name="year" id="year" placeholder="Year">
<span id="birthday_error">you can't leave this empty.</span>
</p>
Note:- pay attention to the comments given in code snippet
I am using Carmen gem for country DropDown. I am using carmen at two places. I want to set these dropdowns equal with selected value by clicking on checkbox. Html code for drop down:-
<select id="contact_attributes" name="dealer[contact_attributes][country]" class="initialized">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="IN" selected="selected>India</option>
</select>
<input type="checkbox" id="SameAsCurrentAddress" class="filled-in">
<select id="permanent_address" name="dealer[permanent_address_attributes][country]" class="initialized">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="IN">India</option>
<option value="US" selected="selected">United States</option
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
</select>
My code is here:
$('#SameAsCurrentAddress').on('click', function () {
if ($('#SameAsCurrentAddress').is(':checked')) {
$('select#permanent_address').val($('select#contact_attributes').val());
});
But i am unable to set the value eqaul. How to set equal? Please help me.
You have a bunch of syntax errors. Please use a good IDE like Eclipse to catch these errors for you. This works:
<select id="contact_attributes" name="dealer[contact_attributes][country]" class="initialized">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="IN" selected="selected">India</option>
</select>
<input type="checkbox" id="SameAsCurrentAddress" class="filled-in">
<select id="permanent_address" name="dealer[permanent_address_attributes][country]" class="initialized">
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="US" selected="selected">United States</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
</select>
$('#SameAsCurrentAddress').click(function () {
if ($('#SameAsCurrentAddress').is(':checked')) {
$('#permanent_address').val($('#contact_attributes').val());
}
});
i have read a tutorial on the internet which said that this way i can make a site load contect with no reload but it does not seem to work
heres my code:
I would want it to display the query.php file results under the 'send' button when date selected from dropdown and clicked.
<form method="post" action="query.php">
<select id="textarea" name="textarea" style="height: 42px;margin-top: 2px;">
<option value="1980" selected>1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
<button type="submit" name="inputuno" value="Submit" class="btn btn-theme">Check!</button>
</form>
<script type="text/javascript">
function recp(id) {
$('#myStyle').load('query.php');
}
</script>
<div id='myStyle'>
</div>
$('#textarea').onchange(function() {.
$('#myStyle').load('query.php', {textarea: $("#myselect option:selected").val() });
});
if I correctly understood what you are looking for. It will automatically reload when option will be changed. If you want to reload when button is clicked just add id property on it, for example "relbutton" and change type to "button".
$('#relbutton').click(function() {.
$('#myStyle').load('query.php', {textarea: $("#myselect option:selected").val() });
});
Also you need to get rid of those tags, they are completely unecessary here.
Who is calling that recp(id) function? I'd say nobody. If nobody is calling it, it won't run. If it won't run, it won't conduct the page load.
You need to call that function from somewhere.
Also, so far this seems to be more of a JavaScript/jQuery issue than a PHP one.
If you'd like the form to be sent, you'll need to add an onsubmit handler. I'd suggest taking a look here and here.