I need the textarea to be filled when "Other" is selected.
This is what I have, I thought it will work. But nothing shows up when other is selected and textarea is left blank.
html:
<form onsubmit="return validation()">
<span>Reason for inquiry: <span>
<select style="color:black" name="reasons">
<option value="catering">Catering</option>
<option value="private party">Private Party</option>
<option value="feedback">Feedback</option>
<option id="selectedOther" value="other">Other</option>
</select>
</form>
JS:
function validation(){
otherInquiry()
}
function otherInquiry(){
var x = document.getElementById("selectedOther").value;
if (document.getElementsByTagName("select") == x){
if(document.getElementById("txtArea").value == ""){
alert("Please tell us your reason of inquiry")
}
return false;
}
}
Related
My html form has the content below:
<form name="profile">
...
<select id="province" name="province">
<span id="provinceWarning" class="alert"></span>
<option value="">Select Province</option>
<option value="AB">Alberta</option>
...
In my javascript, I'm trying to grab the form's ID to show a message telling the user to choose something in the dropdownlist if they haven't chosen anything and pressed the submit button. The problem is that the javascript block returns undefined.
//validate the profile form
function validate(e){
e.preventDefault();
var valid=true;
if(document.profile.province.value == ""){
document.getElementById('provinceWarning').innerHTML="*Please choose a province*";
valid=false;
}
if(valid){
alert("Thank You!");
}
return valid;
};
You can't have a span tag inside a select tag. Browser while rendering this HTML would have stripped it off.
See the demo below (check in your browser's dev tools that browser is stripping off span tag while rendering)
<select id="province" name="province">
<span id="provinceWarning" class="alert"></span>
<option value="">Select Province</option>
<option value="AB">Alberta</option>
</select>
You need to put the span tag outside the select tag.
Try this, it comes down and reset once u select and submit.
function submit(){
if(!document.getElementById("province").value){
document.getElementById("provinceWarning").innerHTML="*Please choose a Province*";
valid=false;
}else{
document.getElementById("provinceWarning").innerHTML=""
valid=true;
window.alert("thank you")
}
}
<form name="profile">
<select id="province" name="province">
<option value="">Select Province</option>
<option value="AB">Alberta</option>
</select>
<span id="provinceWarning" class="alert"></span>
</form>
<button id="btnSubmit" onclick="submit();">Submit</button>
Problems:
1- You can not define span in select option then move it out of your select
2- To check select value you should getElementById("province") and then check the value
3- Testable code can be as below(You can change it as you want):
function func()
{
var ddl = document.getElementById("province");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == ""){
document.getElementById("provinceWarning").innerHTML="*Please choose a Province*";
valid=false;
}else{
alert("Thank You!");
}
}
<form name="profile">
<div>
<span id="provinceWarning" class="alert"></span>
</div>
<div>
<select id="province" name="province">
<option value="">Select Province</option>
<option value="AB">Alberta</option>
</select>
</div>
</form>
<button id="btnSubmit" onclick="func();">Click Me</button>
I want a drop down element where user can select from available options or select enter value option which in turn allows to enter value.
I specifically want that user can enter value only when they select "Enter a value " option.
Here is what I have tried so far.
HTML-
<div class="ginput_container">
<select name="input_4" id="input_1_4" class="medium gfield_select" tabindex="15">
<option value="0">None</option>
<option value="155">1-70</option>
<option value="185">71-250</option>
<option value="*">Enter value</option>
</select>
<input type="text" value="None" class="holder" >
</div>
JavaScript-
jQuery(".gfield_select").change(function() {
var val = jQuery(this).val();
var enter = jQuery(this).parent().find('option:selected').text();
var x = jQuery(this).parent();
if (enter ==="Enter a value" || enter === "Enter value"){
var holder = x.find('.holder');
holder.val('');
holder.prop('disabled',false);
holder.focus();
} else {
x.find('.holder').val(x.find('option:selected').text());
}
});
JS fiddle
however it wont work properly if i click the enter value option again.
I think there are many plugins that do what you want but if you want to create your own, it's a basic and simple solution.
You can create a select and a textbox with display:none like this:
<select id="ddlDropDownList">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="-1">Enter Value</option>
</select>
<input id="txtTextBox" type="text" />
<style>
#txtTextBox{
display:none;
}
</style>
then try this JQuery:
$("#ddlDropDownList").change(function(){
if($(this).val() == '-1'){
$("#txtTextBox").fadeIn();
}else{
$("#txtTextBox").fadeOut();
}
});
Check JSFiddle Demo
I have forked your JSFiddle to http://jsfiddle.net/pwdst/4ymtmf7b/1/ which I hope does what you wanted to achieve.
HTML-
<div class="ginput_container">
<label for="input_1_4">Select option</label>
<select class="medium gfield_select" id="input_1_4" name="input_4" tabindex="15">
<option value="0">None</option>
<option value="155">1-70</option>
<option value="185">71-250</option>
<option value="*">Enter value</option>
</select>
<div>
<label class="hidden-label" for="input_1_4_other">Other value</label>
<input class="holder" id="input_1_4_other" disabled="disabled" name="input_1_4_other" placeholder="None" type="text" />
</div>
</div>
JavaScript-
jQuery(".gfield_select").change(function() {
var $this = jQuery(this);
var val = $this.val();
var holder = $this.parent().find('.holder');
if (val === "*"){
holder.val('');
holder.removeAttr('disabled');
holder.focus();
} else {
holder.val(this.options[this.selectedIndex].text);
holder.attr('disabled', 'disabled');
}
});
When the "Enter value" option is chosen then the input box is enabled, value set to an empty string, and it is focused. If another option is chosen then the text input is disabled again, and the text value from the select list is used.
Thanks guys
I guess i have found my answer
HTML-
<div class="ginput_container">
<select name="input_4" id="input_1_4" class="medium gfield_select" tabindex="15">
<option value="0">None</option>
<option value="155">1-70</option>
<option value="185">71-250</option>
<option value="*">Enter value</option>
</select>
<input type="text" value="None" class="holder" >
</div>
JavaScript-
jQuery(".gfield_select").change(function() {
var val = jQuery(this).val();
var enter = jQuery(this).parent().find('option:selected').text();
var x = jQuery(this).parent();
if (enter ==="Enter a value" || enter === "Enter value"){
var holder = x.find('.holder');
holder.val('');
holder.prop('disabled',false);
holder.focus();
jQuery(this).val("0"); // Change select value to None.
} else {
x.find('.holder').val(x.find('option:selected').text());
x.find('.holder').prop('disabled',true);
}
});
JS FIDDLE
I have a form written in JavaScript that works correctly when I submit. However, there is one conditional which I would like to be validated before the user hits the submit button. If the user chooses "None" on the dropdown menu, I want the other dropdown menu and textbox to be disabled before the user tries to submit. This is what I've done so far, but nothing seems to happen everytime I choose "None":
<form name="my_form" onsubmit="return submit()" action="/test" method="post">
<select id="month">
<option value="None">None</option>
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<select id="day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<input type="text" name="year" placeholder="Year" />
<input type="submit" value="Submit" />
</form>
<script>
function submit(){
var get_month_value = month.options[month.selectedIndex].text;
if(get_month_value == "None"){
document.getElementById("year").disabled = true;
document.getElementById("day").disabled = true;
return false;
}
else if(year == ""){
alert("Year must be filled out");
return false;
}
</script>
Where am I going wrong with this? Any help would be appreciated. Thanks.
Give form an ID and remove the onsubmit function:
<form id="my_form" name="my_form" action="/test" method="post">
Place the submit button outside the form and add the onclick function:
<input type="submit" value="Submit" onclick="submit();" />
Give year text field an ID:
<input type="text" id="year" name="year" placeholder="Year" />
Javascript:
function submit() {
var select = document.getElementById("month");
var get_month_value = select.options[select.selectedIndex].value;
var year = document.getElementById('year').value;
if ((get_month_value == "None") || (year == "")) {
alert("Please fill out the required fields");
} else {
document.getElementById("my_form").submit();
}
}
DEMO
HTML5 Date picker with "required" attribute(works):
<form id="dateForm" name="dateForm" action="/test" method="post">
Date: <input type="date" name="date" required />
<input type="submit" />
</form>
No need for JScript and html for dropdowns.
DEMO
Your code has the following errors:-
First of all you can't give your function the name submit in your form attribute.
You are missing } at the end of your function.
Your Input Text should have id=year not name.
Month is not defined.
year is not defined.
Change
these lines in your HTML:-
<form name="my_form" onsubmit="return validateForm()" action="/test" method="post">
<input type="text" id="year" placeholder="Year" />
Javascript:-
function validateForm(){
var month = document.getElementById('month');
var year = document.getElementById('year').value;
var get_month_value = month.options[month.selectedIndex].text;
if(get_month_value == "None"){
document.getElementById("year").disabled = true;
document.getElementById("day").disabled = true;
return false;
}
else if(year == ""){
alert("Year must be filled out");
return false;
}
}
I am setting up a simpleCart(js) with some selectable options.
I need to show an alert if not all drop-downs meet some value, and also to block the "Add to cart" from adding items to the cart (if not all drop-downs have met some value)
This is as far as I manage, any help is highly appreciated .
The HTML
<p>
<div class="simpleCart_shelfItem">
<h2 class="item_name" style="display:none">TEST</h2>
<select id"sizeSelect" class="item_size">
<option value="nul">Please choose size</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="xlbrain">Super brain</option>
</select>
<select id="shippingSelect" onchange="simpleCart.update();">
<option value="nul">Please choose shipping</option>
<option value="ups">UPS Standard 25€</option>
<option value="mail">Standard Mail 10€</option>
</select>
<select id"destiantionSelect" class="item_price">
<option value="nul">Please choose destination</option>
<option value="290.00">EU</option>
<option value="220.00">World</option>
</select></p>
<p><a class="item_add" onclick="selected()" href="javascript:;">Add to Cart </a></p>
</div>
The shipping cost added to the grand total
<script type="text/javascript">
simpleCart.shipping = function(){
if( $("#shippingSelect").val() == "nul" ){return 0;}
if( $("#shippingSelect").val() == "ups" ){return 25;}
if( $("#shippingSelect").val() == "mail" ){return 10;}
};
</script>
The alert
<script type="text/javascript">
function selected() {
var ddl = document.getElementById("shippingSelect","sizeSelect","destinationSelect");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue =="nul")
{ alert("Please choose one from all options")}
}
</script>
I changed the a button to a actual button and used jquery and binded the click event to check the option boxes, and return if they matched nul, also you have some missing = on your id's.
$('.item_add').click(function () {
if($('#sizeSelect').val().match(/nul/)) return alert("Please choose a size");
if($('#shippingSelect').val().match(/nul/)) return alert("Please choose shipping type");
if($('#destinationSelect').val().match(/nul/)) return alert("Please enter a destination");
});
http://jsfiddle.net/y2Cf9/
I have the following HTML and Javascript, that is not working:
<select id="shirtinfo[0]" name="shirtinfo[0]">
<option value="">Confederation</option>
<option value="6770">Europe (UEFA)</option>
<option value="16272">South America (CONMEBOL)</option>
<option value="21684">Africa (CAF)</option>
<option value="21771">North & Central America (CONCACAF)</option>
<option value="18091">Asia (AFC)</option>
<option value="19193">Oceania (OFC)</option>
</select>
...
<select id="season" name="season">
<option value="">Season</option>
<option value="2013">2013</option>
...
</select>
...
<input id="submit" type="submit" value="[[Save:raw]]" onclick="validate()" />
<script>
function validate() {
if (document.querySelectorAll("#shirtinfo[0], #shirtinfo[1], #shirtinfo[2], #shirtinfo[3], #shirtinfo[4], #season, #style, #status").value)
{
alert("[[Please enter the mandatory fields]]");
return false;
}
}
</script>
All the first option values are empty with just the title, and the alert will be shown if any of the options are not selected. So the user needs to select from the lists at least something else that is not the first option.
How can I do that?
Alter the following code as necessary. Just loop through the proper elements, and if the select's value is empty, then break and handle as necessary.
function validate() {
"use strict";
var selectEls = document.querySelectorAll('select'),
numSelects = selectEls.length;
for(var x=0;x<numSelects;x++) {
if (selectEls[x].value === '') {
alert('[[Please enter the mandatory fields]]');
return false;
}
}
// If the code execution reaches this point, all the tests pass
// ...
}
The code can be improved, for example, if you want to continue looping through all the elements, and highlight the problem select elements, but that is beyond the scope of this question.
Try this: Also in this fiddle: http://jsfiddle.net/9f76X/
<select id="shirtinfo" name="shirtinfo[0]">
<option value="">Confederation</option>
<option value="6770">Europe (UEFA)</option>
<option value="16272">South America (CONMEBOL)</option>
<option value="21684">Africa (CAF)</option>
<option value="21771">North & Central America (CONCACAF)</option>
<option value="18091">Asia (AFC)</option>
<option value="19193">Oceania (OFC)</option>
</select>
...
<select id="season" name="season">
<option value="">Season</option>
<option value="test">test</option>
</select>
...
<input id="submit" type="submit" value="[[Save:raw]]" onclick="return validate();" />
<script type="text/javascript">
function validate() {
var controls, cnt, showAlert;
controls = document.querySelectorAll("#shirtinfo,#season");
for (cnt=0;cnt < controls.length; cnt++)
{
if (!controls[cnt].value)
{
showAlert = true;
break;
}
}
if (showAlert) {
alert("[[Please enter the mandatory fields]]");
}
return !showAlert;
}
</script>