making select-boxes required if appropriate radio button selected - javascript

I wanted to make my 2 select boxes required if they select the radio button foreign language so they can make the choices of what language they want and at which level was not sure exactly how to accomplish this
<label for"artlang"=""> Fine Arts or Language: </label><br>
<input name="ArtLang" type="radio" value="Art150" required>Art 150<br>
<input name="ArtLang" type="radio" value="Mus150"required>Music 150 <br>
<input name="ArtLang" type="radio" value="Lang"required>Foreign Language
<label for="language">Language: </label>
<select name="language">
<option name"="" "="" value=" "> </option>
<option name="chinese" value="chinese">Chinese</option>
<option name="french" value="french">French</option>
<option name="german" value="german">German</option>
<option name="greek" value="greek">Greek</option>
<option name="italian" value="italian">Italian</option>
<option name="japanese" value="japanese">Japanese</option>
<option name="latin" value="latin">Latin</option>
<option name="russian" value="russian">Russian</option>
<option name="spanish" value="spanish">Spanish</option>
</select>
<label for="languagelevel">Level: </label>
<select name="languagelevel">
<option name"="" "="" value=" "> </option>
<option name="Elementary" value="elementary">Elementary</option>
<option name="intermediate" value="intermediate">Intermediate</option>
<option name="advanced" value="advanced">Advanced</option>
</select>

Related

Pass Province or State value to hidden field with Javascript

I am new to javascript and cannot find an easy-to-understand answer. I would like a certain value to get passed to a hidden field when a user selects a certain option from 2 different select dropdown options. They can only select one or the other on the actual form.
For example if a user selects a US state or a Canadian province, I want to pass that value to hidden text field using javascript.
<form>
<p class="form-field state pd-select required">
<label class="field-label" for="usstatevalue">State</label>
<select name="usstatevalue" id="usstatevalue" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="47815">AL</option>
<option value="47817">AK</option>
<option value="47819">AZ</option>
<option value="47821">AR</option>
<option value="47823">CA</option>
<option value="47825">CO</option>
<option value="47827">CT</option>
<option value="47829">DE</option>
<option value="47831">DC</option>
<option value="47833">FL</option>
<option value="47835">GA</option>
<option value="47837">HI</option>
</select>
</p>
<p class="form-field Province_Canada pd-select required">
<label class="field-label" for="provcanvalue">Province – Canada</label>
<select name="provcanvalue" id="provcanvalue" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="47791">Alberta</option>
<option value="47793">British Columbia</option>
<option value="47795">Manitoba</option>
<option value="47797">New Brunswick</option>
<option value="47799">Newfoundland and Labrador</option>
<option value="47801">Nova Scotia</option>
<option value="47803">Nunavut</option>
<option value="47805">Ontario</option>
<option value="47807">Prince Edward Island</option>
<option value="47809">Quebec</option>
<option value="47811">Saskatchewan</option>
<option value="47813">Yukon</option>
</select>
</p>
<p class="form-field State_Province">
<label for="stateprovnew">hidden field</label>
<input type="text" name="stateprovnew" value="">
</p>
</form>
Following code will insert the selected state and country into the text field. You can make the field hidden it will work.
var stateSelector = document.getElementById('usstatevalue');
var countrySelector = document.getElementById('provcanvalue');
var hiddenSelector = document.getElementById('stateprovnew');
stateSelector.addEventListener('change', function() {
hiddenSelector.value = stateSelector.value;
});
countrySelector.addEventListener('change', function() {
hiddenSelector.value += ' ' + stateSelector.value;
});
<form>
<p class="form-field state pd-select required">
<label class="field-label" for="usstatevalue">State</label>
<select name="usstatevalue" id="usstatevalue" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="47815">AL</option>
<option value="47817">AK</option>
<option value="47819">AZ</option>
<option value="47821">AR</option>
<option value="47823">CA</option>
<option value="47825">CO</option>
<option value="47827">CT</option>
<option value="47829">DE</option>
<option value="47831">DC</option>
<option value="47833">FL</option>
<option value="47835">GA</option>
<option value="47837">HI</option>
</select>
</p>
<p class="form-field Province_Canada pd-select required">
<label class="field-label" for="provcanvalue">Province – Canada</label>
<select name="provcanvalue" id="provcanvalue" class="select" onchange="">
<option value="" selected="selected"></option>
<option value="47791">Alberta</option>
<option value="47793">British Columbia</option>
<option value="47795">Manitoba</option>
<option value="47797">New Brunswick</option>
<option value="47799">Newfoundland and Labrador</option>
<option value="47801">Nova Scotia</option>
<option value="47803">Nunavut</option>
<option value="47805">Ontario</option>
<option value="47807">Prince Edward Island</option>
<option value="47809">Quebec</option>
<option value="47811">Saskatchewan</option>
<option value="47813">Yukon</option>
</select>
</p>
<p class="form-field State_Province">
<label for="stateprovnew">hidden field</label>
<input type="text" name="stateprovnew" id="stateprovnew" value="">
</p>
</form>

Automatic scroll on href

I am trying to add some improvements to a site that I haven't developed, and I currently have a navigation panel on the page. The HTML for this is below
<div id="calendar-nav-container">
<span class="calendar-nav" style="float: left"> <<< </span>
<span class="calendar-nav" style="float: left"> < </span>
<span class="calendar-nav" style="float: right"> >>> </span>
<span class="calendar-nav" style="float: right"> > </span>
<form action="/Calendar" id="calendarForm" method="get"> <label for="CalendarType">
<select name="calendarType">
<option value="Courses" selected="selected">By Course</option>
<option value="Venues">By Venue</option>
<option value="Trainers">By Trainer</option>
</select></label>
<label for="LocationId"><select id="locationId" name="locationId">
<option value="">All Locations</option>
<option value="1">Brighton</option>
<option value="2">London</option>
<option value="3">Leeds</option>
<option value="4">New York</option>
<option value="5">Frankfurt</option>
<option value="6">Hong Kong</option>
<option value="7">Toronto</option>
<option value="8">Dublin</option>
<option value="9">Cape Town</option>
<option value="10">Glasgow</option>
<option value="11">Newcastle</option>
<option value="16">Singapore</option>
<option value="17">Birmingham</option>
</select></label>
<label for="DaysToShow"><select id="daysToShow" name="daysToShow">
<option value="5">1 week</option>
<option value="19">3 weeks</option>
</select></label>
<label for="StartDate"><input id="startDate" name="startDate" type="text" value="06/07/2015" class="hasDatepicker"></label>
<label for="IncludePond" style="color: white"><input checked="checked" data-val="true" data-val-required="The Boolean field is required." id="includePond" name="includePond" type="checkbox" value="true"><input name="includePond" type="hidden" value="false">Include Pond Courses </label>
</form></div>
I want to maintain page scrolling when these options or links are clicked or chosen. I have limited HTML knowledge.

Change Form action url Dynamically

So I need to change the default url to something much better I have made it to work on .htaccess but I can't do it into the form action...Can someone tell me how to change the form url the form goes to the url
s=thesearch&for=for&genre=genre&lang=lang&quality=quality&rating=rating&orderby=orderby
I want to make the form goes to
s=thesearch/for/genre/lang/quality/rating/orderby
the form code that goes into the first url:
<form role="search" method="get" class="search-form" action="s=">
<label>
<input autofocus autocomplete="off" type="search" class="search-field" placeholder="Search …" value="" name="" title="Search for:">
</label>
<input type="submit" class="search-submit" value="Search">
<!-- Squared THREE -->
<div class="squaredThree">
<input type="checkbox" id="squaredThree" name="check" />
<label for="squaredThree">
<div style="font-weight: 700;font-size: 1.1em;color: #5a5a5a;margin-left:25px;margin-top:2px;">Advanced</div>
<div style="font-weight: 700;font-size: 1.1em;color: #5a5a5a;margin-left:98px;margin-top:-20px;">Search</div></label>
</div>
<script type="text/javascript">
document.getElementById('squaredThree').onchange = function() {
document.getElementById('advanced-search').style.display = this.checked ? 'block' : 'none';
};
</script>
<div id="advanced-search">
<span style="font-weight: 700;font-size: 1.2em;color: #5a5a5a;margin-left:70px;">
Search For:
</span>
<select name="for" style="margin-left:46px;">
<option value="Title" selected="selected">Title</option>
<option value="Actor">Actor</option>
<option value="Writer">Writer</option>
<option value="Director">Director</option>
<option value="Company">Company</option>
<option value="IMDb_ID">IMDb ID</option>
</select><br>
<span style="font-weight: 700;font-size: 1.2em;color: #5a5a5a;margin-left:85px;">
Genre:
</span>
<select name="genre" style="margin-left:46px;">
<option value="All" selected="selected">All</option>
<option value="Action">Action</option>
<option value="Adventure">Adventure</option>
<option value="Animation">Animation</option>
<option value="Comedy">Comedy</option>
<option value="Crime">Crime</option>
<option value="Drama">Drama</option>
<option value="Family">Family</option>
<option value="Fantasy">Fantasy</option>
<option value="Horror">Horror</option>
<option value="Music">Music</option>
<option value="Musical">Musical</option>
<option value="Mystery">Mystery</option>
<option value="Romance">Romance</option>
<option value="Sci-Fi">Sci-Fi</option>
<option value="Sport">Sport</option>
<option value="Thriller">Thriller</option>
<option value="War">War</option>
<option value="Western">Western</option></select>
<span style="font-weight: 700;font-size: 1.2em;color: #5a5a5a;margin-left:82px;">Subtitle:</span>
<select name="lang" style="margin-left:46px;">
<option value="All" selected="selected">All</option>
<option value="Arabic">Arabic</option>
<option value="Czech">Czech</option>
<option value="Danish">Danish</option>
<option value="Dutch">Dutch</option>
<option value="English">English</option>
<option value="French">French</option>
<option value="German">German</option>
<option value="Greek">Greek</option>
<option value="Indonesian">Indonesian</option>
<option value="Malay">Malay</option>
<option value="Spanish">Spanish</option>
<option value="Swedish">Swedish</option>
<option value="Turkish">Turkish</option>
</select>
<span style="font-weight: 700;font-size: 1.2em;color: #5a5a5a;margin-left:82.5px;">Quality:</span>
<select name="quality" style="margin-left:46px;">
<option value="All" selected="selected">All</option>
<option value="CAM">CAM</option>
<option value="Non-HD">Non HD</option>
<option value="HD">HD</option>
<option value="Full-HD">Full HD</option></select>
<span style="font-weight: 700;font-size: 1.2em;color: #5a5a5a;margin-left:85px;">Rating:</span>
<select name="rating" style="margin-left:46px;">
<option value="0" selected="selected">All</option>
<option value="9">9+</option>
<option value="8">8+</option>
<option value="7">7+</option>
<option value="6">6+</option>
<option value="5">5+</option>
<option value="4">4+</option>
<option value="3">3+</option>
<option value="2">2+</option>
<option value="1">1+</option>
</select><br>
<span style="font-weight: 700;font-size: 1.2em;color: #5a5a5a;margin-left:76px;">Order By:</span>
<select name="orderby" style="margin-left:46px;">
<option value="Latest" selected="selected">Latest</option>
<option value="Oldest">Oldest</option>
<option value="Rating">Rating</option>
<option value="Alphabetical">Alphabetical</option>
<option value="Views">Views</option></select>
</select>
</div>
</form>
Anyone who knows how to change the form url with something...
You can set you action attribute like any other attribute
$("form").attr("action", "/path/to/formaction");

Disable dropdown item based on selection done on other dropdown box

I am working with three dropdown selects with same options. I want to disable an item if that item is selected in other dropdown. I have JQuery code working for two dropdown box. i.e. if I am selecting one item its disabled in other dropdown. But I am having trouble doing it for three dropdown. If I select one item in first that item is disabled in two and three but when I select second dropdown, third dropdown only disables second dropdown selection.
I am new to jquery and AJAX.
PLease guide me.
Appreciate your help.
<select id="select1" name="phoneusescategories">
<option value="" selected="selected">top-1 use </option>
<option value="1"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
<select id="select2" name="phoneusescategories">
<option value="" selected="selected">top-2 use </option>
<option value="1"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
<select id="select3" name="phoneusescategories">
<option value="" selected="selected">top-3 use </option>
<option value="1"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
$(document).ready(function(){
$("select").change(function() {
$("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
});
});
http://jsfiddle.net/sakura1/xzjdsusz/
you might want to use prop() instead of attr() if you want to enable and disable the options of your select..
HERE: (jsFiddle DEMO)
I added this line just in case you want to remove other disabled options whenever you select a new option
$('select option').prop("disabled", false);
CODE SNIPPET :
$('select').on('change', function(){
$('select option').prop("disabled", false);
$("select").not(this).find("option[value="+ $(this).val() + "]").prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="select1" name="phoneusescategories">
<option value="" selected="selected">top-1 use </option>
<option value="Games"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
<select id="select2" name="phoneusescategories">
<option value="" selected="selected">top-2 use </option>
<option value="Games"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
<select id="select3" name="phoneusescategories">
<option value="" selected="selected">top-3 use </option>
<option value="Games"> Games</option>
<option value="2"> Productivity</option>
<option value="3"> News</option>
<option value="4"> Shopping & services</option>
<option value="5"> Music</option>
<option value="6"> Social Networking</option>
<option value="7"> Browser</option>
</select>
OK this is an updated answer
$('#select1,#select2,#select3').on('change', function(){
var value =$.trim($(this).val());
$('select option:contains("'+value+'")').attr('disabled','disabled');
});
New DEMO
it will work for just Games
So change your option value same of option text like so
<option value="Games"> Games</option>

dropdown menu html form personalized category

i have the following part of code of a dropdown menu
<p>
<label for='Select a Category '>Select a Category<font color="red"><strong>*</strong></font>: </label></p>
<p><div id='contactform_category_errorloc' class='err'></div>
<select name="category" class="input">
<option value="0" selected="selected">
[choose yours]
</option>
<option value="Arts and entertainment">Arts and entertainment</option>
<option value="Automotive">Automotive</option>
<option value="Business">Business</option>
<option value="Computers">Computers</option>
<option value="Games">Games</option>
<option value="Health">Health</option>
<option value="Internet">Internet</option>
<option value="News and Media">News and Media</option>
<option value="Recreation">Recreation</option>
<option value="Reference">Reference</option>
<option value="Shopping">Shopping</option>
<option value="Sports">Sports</option>
<option value="World">World</option>
</select>
</p>
i want add in drop down menu an option with value: "custom" that when i select this option appear just below a field blank as input text where i can add my personalized text so i can insert personalized category
it's possible?
maybe you mean something like this: http://jsbin.com/ubihuw/edit#javascript,html
so in php or something you can check then the "my_own_text" field ... dont know what you will exactly do ;)
js:
$('.input').change(function()
{
if($(this).attr('value') == "0") {
$('#choose_own_text').append('<input type="text" id="my_own_text" name="my_own_text" value="Please type in .." />');
} else {
$('#choose_own_text').empty();
}
});
your code ...
<p><div id='contactform_category_errorloc' class='err'></div>
<select name="category" class="input">
<option value="0" selected="selected">
[choose yours]
</option>
<option value="Arts and entertainment">Arts and entertainment</option>
<option value="Automotive">Automotive</option>
<option value="Business">Business</option>
<option value="Computers">Computers</option>
<option value="Games">Games</option>
<option value="Health">Health</option>
<option value="Internet">Internet</option>
<option value="News and Media">News and Media</option>
<option value="Recreation">Recreation</option>
<option value="Reference">Reference</option>
<option value="Shopping">Shopping</option>
<option value="Sports">Sports</option>
<option value="World">World</option>
</select>
<div id="choose_own_text"></div>
</p>

Categories