I have a sign-up form which asks users to select a country from a drop down menu.
I have a bit of script that, depending on the country selected by the user, displays a particular Region/State field.
$("#Country").change(function() {
if ( $(this).val() == "GB") {
$("#RegionsUS").hide();
$("#RegionsOTHER").hide();
$("#RegionsUK").show();
}
else if ( $(this).val() == "US") {
$("#RegionsUS").show();
$("#RegionsOTHER").hide();
$("#RegionsUK").hide();
}
else {
$("#RegionsOTHER").show();
$("#RegionsUS").hide();
$("#RegionsUK").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<select name="Country" id="Country" class="form-control" required>
<option selected>Please select</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="FR">France</option>
</select>
<input type="text" id="RegionsOTHER" name="Region" class="form-control" placeholder="Region/State" maxlength="50">
<select id="RegionsUS" name="Region" class="form-control" style="display:none;">
<option value="Alabama">Alabama</option>
</select>
<select id="RegionsUK" name="Region" class="form-control" style="display:none;">
<option value="England">England</option>
<option value="Scotland">Scotand</option>
</select>
</form>
Problem is, when the form is submitted, all three region fields are submitted despite two of them always being hidden.
How do I prevent the hidden fields from being submitted with the form?
Thank you.
NJ
Sorry, despite searching pretty much all day yesterday and not seeing the following, my question is obviously very similar to this question:
Preventing an HTML form field from being submitted
So I've edited my function and HTML as follows:
$("#Country").change(function() {
if ( $(this).val() == 425) {
$("#RegionsUS").hide();
document.getElementById('RegionsUS').disabled = true;
$("#RegionsOTHER").hide();
document.getElementById('RegionsOTHER').disabled = true;
$("#RegionsUK").show();
document.getElementById('RegionsUK').disabled = false;
}
else if ( $(this).val() == 426) {
$("#RegionsUS").show();
document.getElementById('RegionsUS').disabled = false;
$("#RegionsOTHER").hide();
document.getElementById('RegionsOTHER').disabled = true;
$("#RegionsUK").hide();
document.getElementById('RegionsUK').disabled = true;
}
else {
$("#RegionsOTHER").show();
document.getElementById('RegionsOTHER').disabled = false;
$("#RegionsUS").hide();
document.getElementById('RegionsUS').disabled = true;
$("#RegionsUK").hide();
document.getElementById('RegionsUK').disabled = true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<select name="Country" id="Country" class="form-control" required>
<option selected>Please select</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
<option value="FR">France</option>
</select>
<input type="text" id="RegionsOTHER" name="Region" class="form-control" placeholder="Region/State" maxlength="50">
<select id="RegionsUS" name="Region" class="form-control" style="display:none;" disabled="disabled">
<option value="Alabama">Alabama</option>
</select>
<select id="RegionsUK" name="Region" class="form-control" style="display:none;" disabled="disabled">
<option value="England">England</option>
<option value="Scotland">Scotand</option>
</select>
</form>
<select name="A">
<option value="1">Volvo</option>
<option value="2">Saab</option>
</select>
<select name="B">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
<input type="Submit" >
After I submit, I want to show result from A and B. For example:
if($_POST['A']==1 && $_POST['B']==2){
echo 'true';
}else{
echo '0';
}
Is it possible to do this in joomla?
you have to enclosed this input fields into form tag. For example
<form method="post">
<select name="A">
<option value="1">Volvo</option>
<option value="2">Saab</option>
</select>
<select name="B">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
<input type="Submit" >
</form>
Hope it will help
Following code in react shows this error:
"Use the defaultValue or value props on ".
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
tried this but still does not work:
<select value="1">
<option value="" disabled>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Trying to implement as in doc in this link but cant make the selected work inside option. Also i am looking to make "choose your option" as a default selected option when the form first loads
You should keep a state variable in your component. I've written some code, and here is a live JSBin:
var MySelect = React.createClass({
getInitialState: function() {
return {
value: "0"
};
},
handleChange: function(event) {
var value = event.target.value;
console.log(value, " was selected");
this.setState({value: event.target.value});
},
render: function() {
return (
<select value={this.state.value} onChange={this.handleChange}>
<option value="0">Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
);
}
})
React.render(
<MySelect />, document.body
);
Replace the console.log with a Flux event or pass the value to your parent with a callback.
I have the following code for a select drop down input that is styled in Bootstrap.
<select class="form-control" name="businessprocess" ng-model="businessprocess" required>
<option value="">-- Select Business Process --</option>
<option value="C">Process C</option>
<option value="Q">Process Q</option>
</select>
Before the user is able to submit this form, he or she must select a business process.
So I have put the required directive on the select statement, however because the first option tag has -- Select Business Process -- that still counts as a selected option, and thus the required flag is met, and therefore the form validates even though no actual Business Process is selected.
How can I overcome this issue?
Thank You.
This approach could/should solve your issue:
1) declare the options inside of your scope:
$scope.processes = [
{ code: "C", name: "Process C" },
{ code: "Q", name: "Process Q" }
];
And 2) use this declaration:
<select class="form-control" name="businessprocess" ng-model="businessprocess" required
ng-options="c.code as c.name for c in processes" >
<option value="">-- Select Business Process --</option>
</select>
The trick here is in fact, that during the angular cycles, will firstly fix the issue that the the current value is not among the processes options. So, the default would be set to:
<option value="">-- Select Business Process --</option>
and required will be working as expected (more details)
you can initial the value of selector in controller:
<select class="form-control" name="businessprocess" ng-model="businessprocess">
<option value="A">-- Select Business Process --</option>
<option value="C">Process C</option>
<option value="Q">Process Q</option>
</select>
in Controller:
$scope.businessprocess = "A" ;
or "C","Q",whatever you want, so the select will always have value. i think you don't need "required" here in select.
If you don't want an init a value. also do some extra effect when user don't select it.
<select class="form-control" name="businessprocess" ng-model="businessprocess" myRequired>
<option value="">-- Select Business Process --</option>
<option value="C">Process C</option>
<option value="Q">Process Q</option>
</select>
then write the directive:
model.directive("myRequired", function() {
return {
restrict: 'AE',
scope: {},
require: 'ngModel',
link: function(scope, iElement, iAttrs) {
if(iElement.val() == ""){
//do something
return;
} else {
//do other things
}
});
}
};
});
JS
angular.module('interfaceApp')
.directive('requiredSelect', function () {
return {
restrict: 'AE',
require: 'ngModel',
link: function(scope, elm, attr, ctrl) {
if (!ctrl) return;
attr.requiredSelect = true; // force truthy in case we are on non input element
var validator = function(value) {
if (attr.requiredSelect && ctrl.$isEmpty(value)) {
ctrl.$setValidity('requiredSelect', false);
return;
} else {
ctrl.$setValidity('requiredSelect', true);
return value;
}
};
ctrl.$formatters.push(validator);
ctrl.$parsers.unshift(validator);
attr.$observe('requiredSelect', function() {
validator(ctrl.$viewValue);
});
}
};
});
a best way and straight one is to use:
HTML
<select name="businessprocess" ng-model="businessprocess" required>
<option selected disabled value="">-- Select Business Process --</option>
<option ng-repeat="v in processes" value="{{v.id}}">{{v.value}}</option>
</select>
You can try to add form, like:
HTML
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="mainForm">
<select name="businessprocess" ng-model="businessprocess" required>
<option value="">-- Select Business Process --</option>
<option ng-repeat="v in processes" value="{{v.id}}">{{v.value}}</option>
</select>
<span class="error" ng-show="mainForm.businessprocess.$error.required">required</span>
</form>
</div>
js
angular.module('myApp', []);
function MyCtrl($scope, $timeout) {
$scope.processes = [{
id: "C",
value: "Process C"
}, {
id: "Q",
value: "Process Q"
}];
}
Demo Fiddle
Use the following code snippet
<select class="form-control" name="businessprocess" ng-model="businessprocess">
<option value="A" disabled selected hidden>-- Select Business Process --</option>
<option value="C">Process C</option>
<option value="Q">Process Q</option>
</select>
Add "disabled" to the first option:
<select class="form-control" name="businessprocess" ng-model="businessprocess" required>
<option value="" disabled>-- Select Business Process --</option>
<option value="C">Process C</option>
<option value="Q">Process Q</option>
This works for me. Form is invalid until user selects any other value than "Choose..."
<select name="country" id="country" class="form-control" formControlName="country" required>
<option selected value="">Choose...</option>
<option *ngFor="let country of countries">{{country.country}}</option>
</select>
Maybe this code, can be usefull for this... in this case the form is called myform
<select ng-model="selectX" id="selectX" name="selectX" required>
<option value="" ></option>
<option value="0" >0</option>
<option value="1">1</option>
</select>
<span style="color:red" ng-show="myform.selectX.$dirty && myform.selectX.$invalid">
<span ng-show="myform.selectX.$error.required">Is required.</span>
</span>
I am clueless when it comes to JavaScript and Ajax. Could y'all point me to a simple tutorial site for both?
The algorithm for what I'm trying to accomplish is fairly simple. I have three drop-down menus to enter a date. The user selects a year, then a month, then, based on the two previous selections, chooses a date. So, if a user selects Feb, 2012, the date list will show twenty-nine days. If he wants to look at Feb. 2013, the date list would show 28 days. Or for another month, show 30 or 31 days. What sort of function would I need to accomplish this?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form name="myform">
<fieldset><legend>Selection Date</legend><label for="year">Year: </label>
<select name="year" id="year" size="1">
<option value=" " selected="selected"></option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
</select>
<label for="month">Month: </label>
<select name="month" id="month" size="1">
<option value=" " selected="selected"></option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<label for="day">Day: </label>
<select name="day" id="day" size="1">
<option value=" " selected="selected"></option>
<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>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</fieldset>
</form>
<script type="text/javascript">
function daysInMonth(month, year) {
var days = new Date(year, month, 0);
return days.getDate();
}
function setDayDrop(dyear, dmonth, dday) {
var year = dyear.options[dyear.selectedIndex].value;
var month = dmonth.options[dmonth.selectedIndex].value;
var day = dday.options[dday.selectedIndex].value;
if (day == ' ') {
var days = (year == ' ' || month == ' ') ? 31 : daysInMonth(month, year);
dday.options.length = 0;
dday.options[dday.options.length] = new Option(' ', ' ');
for (var i = 1; i <= days; i++)
dday.options[dday.options.length] = new Option(i, i);
}
}
function setDay() {
var year = document.getElementById('year');
var month = document.getElementById('month');
var day = document.getElementById('day');
setDayDrop(year, month, day);
}
document.getElementById('year').onchange = setDay;
document.getElementById('month').onchange = setDay;
</script>
</body>
Thanks for the speedy response. I found this on the www that puts a calendar into the form:
Any Time