How to make dropdown selection compulsory if the variable is true? - javascript

I have an angular js dropdown. I want that if my variabl e.g. 'x' has value true it makes it compulsory to select a value from the drop down and incase of false value it can allow it to save it without selecting anything from the drop down. Here is my drop down:
<select class="form-control dropdownheight"
ng-model="search.hardware"
ng-change="search()" >
<option value="" selected>Select Hardware</option>
<option ng-repeat="box in boxes" value="{{box.name}}">{{box.name}}</option>
</select>

You can use ng required for this.
<form name="form">
<select ng-model="hardware" class="form-control dropdownheight" ng-change="search()" >
<option value="" selected>Select Hardware</option>
<option ng-repeat="box in boxes" value="{{box.name}}">{{box.name}}</option>
</select>
<label for="input">This input must be filled if `required` is true: </label>
<input type="text" id="input" name="input" ng-required="isRequired" /><br>
<hr>
<code>{{form.input.$error}}</code><br>
isRequired = <code>{{isRequired}}</code>
<input type="submit" value="Save" ng-disabled="isRequired"/>
</form>
I have created plunkr for it:
https://plnkr.co/edit/bfWuGCOYLGIV0Krlaaeo?p=preview

Use the ng-required directive:
<select class="form-control dropdownheight"
ng-model="search.hardware"
ng-change="search()"
ng-required="x">
<option value="" selected>Select Hardware</option>
<option ng-repeat="box in boxes" value="{{box.name}}">{{box.name}}</option>
</select>
See this jsfiddle

Related

How to select and get two input value?

I have an issue when I select an option it will get the input value perfectly but I want to add one more input value which is email so for example,
when I select (Elvis) option & get two value phone and email in different input field.
<select class="name" name="name[]">
<option value="" selected="selected">Please select...</option>
<option value="Elvis" data-phonenumber="11111" data-email="abc#gmail.com">Elvis</option>
<option value="Frank" data-phonenumber="22222" data-email="123#gmail.com">Frank</option>
<option value="Jim" data-phonenumber="33333" data-email="123#gmail.com">Jim</option>
</select>
<input type="text" class="phonenumber" name="phonenumber[]" value="" >
<input type="text" class="email" name="email[]" value="" >
<br />
<select class="name" name="name[]">
<option value="" selected="selected">Please select...</option>
<option value="Elvis" data-phonenumber="11111" data-email="abc#gmail.com">Elvis</option>
<option value="Frank" data-phonenumber="22222" data-email="123#gmail.com">Frank</option>
<option value="Jim" data-phonenumber="33333" data-email="123#gmail.com">Jim</option>
</select>
<input type="text" class="phonenumber" name="phonenumber[]" value="" >
<input type="text" class="email" name="email[]" value="" >
<br />
here is script
<script>
$(document).ready(function() {
$('.name').live('change', function() {
$(this).next($('.phonenumber')).val($(this).find('option:selected').attr('data-phonenumber'));
})
});
</script>
Hope it helps. I've used jquery
-edit----
code indent and added comments
//body render wait
$(document).ready(function (){
//loop selects with "name" class a attach change callback on each
$('.name').each(function(idx, elem){
$(elem).change(function(){
//get selected option element
var option = $(this).find(':selected');
//get phone number data
var p = $(option).data('phonenumber');
//get email data
var e = $(option).data('email');
//find next phonenumber input and set value
$(elem).parent().find('.phonenumber').val(p);
//find next email input and set value
$(elem).parent().find('.email').val(e);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tamplate">
<select class="name">
<option value="">Please select...</option>
<option value="Elvis" data-phonenumber="11111" data-email="abc#gmail.com">Elvis</option>
<option value="Frank" data-phonenumber="22222" data-email="123#gmail.com">Frank</option>
<option value="Jim" data-phonenumber="33333" data-email="123#gmail.com">Jim</option>
</select>
<input type="text" class="phonenumber" name="phonenumber" value="" >
<input type="text" class="email" name="email" value="" >
</div>
<div class="tamplate">
<select class="name">
<option value="">Please select...</option>
<option value="Elvis" data-phonenumber="11111" data-email="abc#gmail.com">Elvis</option>
<option value="Frank" data-phonenumber="22222" data-email="123#gmail.com">Frank</option>
<option value="Jim" data-phonenumber="33333" data-email="123#gmail.com">Jim</option>
</select>
<input type="text" class="phonenumber" name="phonenumber" value="" >
<input type="text" class="email" name="email" value="" >
</div>

html5 input type date datalist remove other options

I set datalist in input[type='date'].
For e.g.,
<input type="date" id="date" name="date" list="thesedates">
<datalist id="thesedates">
<option label="Groundhog Day">2014-02-02</option>
<option label="Valentine's Day">2014-02-14</option>
<option label="Flag Day">2014-06-14</option>
</datalist>
Question
In this example i seen Other option. I want to remove this.
Thank you for help me !
I guess you want to pick date only from given list. Why are you not using select element?
<form action="index.php">
<select name="date">
<option value="2014-02-02">Groundhog Day</option>
<option value="2014-02-14">Valentine's Day</option>
<option value="2014-06-14">Flag Day</option>
</select>
<input type="submit">
</form>

Clear value from input field when select value from dropdown list

I have this drop down list:
<select name="group_psoft" id="group_psoft">
<option value="0" selected="selected" title="0">---select---</option>
<option value="100" title="100">100</option>
<option value="200" title="200">200</option>
<option value="300" title="300">300</option>
</select>
and one input field:
<input id="name" value="">
How do I clear out the value of the "name" input when I change value in the dropdown list?
Kind regards
Simply use change() function in jquery which triggers when you change the select like this
Read Here about .change()
$('#group_psoft').change(function() {$('#name').val('')});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="group_psoft" id="group_psoft">
<option value="0" selected="selected"title="0">---select---</option>
<option value="100" title="100">100</option>
<option value="200" title="200">200</option>
<option value="300" title="300">300</option>
</select>
<input id="name" value="Initial Value">
You just need to use the change event of the list and then update the input on each occurrence of change.
$('#group_psoft').change(function() {
// Set the input's value to the current value of the list
$('#name').val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="group_psoft" id="group_psoft">
<option value="0" selected="selected"title="0">---select---</option>
<option value="100" title="100">100</option>
<option value="200" title="200">200</option>
<option value="300" title="300">300</option>
</select>
<input id="name" value="Initial Value">
This will clear the input field when the dropdown selection changes:
$("#group_psoft").on("change", function(){
$("#name").val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="group_psoft" id="group_psoft">
<option value="0" selected="selected"title="0">---select---</option>
<option value="100" title="100">100</option>
<option value="200" title="200">200</option>
<option value="300" title="300">300</option>
</select>
<input id="name" value="">

Passing id of tag that submited form with onchange=this.form.submit()

Is there a way to know which select tag submitted form?
<form method="POST" action="submit.php">
<select id="id1" name="sel1" onchange="this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
<select id="id2" name="sel2" onchange="this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
</form>
Non-jQuery solution is preferable, but not mandatory...
P.S. Problem is that selected="select" attribute is generated dynamically (i don't know which option would be selected as default - so i can't compare default with submitted)
The first thing that comes to mind is a hidden field with a value you set. Something like this should do.
<form method="POST" action="submit.php">
<input type="hidden" name="submitselect" value="" id="submitselect">
<select id="id1" name="sel1" onchange="document.getElementById('submitselect').value='sel1';this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
<select id="id2" name="sel2" onchange="document.getElementById('submitselect').value='sel2';this.form.submit()">
<option value="1">First</option>
<option value="2" selected="selected">Second</option>
</select>
</form>
Alternatively, you could have a default option chosen, e.g.
<option value="" selected>-</option>
That would never otherwise be chosen. That way, this option would remain unset in the selects that didn't cause the submit.

Javascript Specific Field reset with dropdown menu

Need some help with some javascript. Not too experience with javascript. Was wondering if anyone has some snippet for this.
workflow/overview:
4 fields
user enters data in field 2-4
user selects reset from dropdown menu in field 1
fields reset to default
- field 2 resets > Please select
- field 3 resets > blank
fields DOES Not reset
- field 4 DOES NOT rest > retains entered value
thanks for the help.
Code
</script>
<form name="testform" action="" method="get">
<fieldset>
<label>Field 1<font color="red">*</font>:</label>
<select name="select1" id="select1">
<option value="Reset">Reset</option>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br/>
<label>Field 2</label>
<select name="select2" id="select2">
<option value="Please select">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</br>
<label>Field 3</label>
<input type="text" name="text1" size="100"/>
</br>
<label>Field 4</label>
<input type="text" name="text2" size="100"/>
</fieldset>
</form>
</body></html>
You should read a little about javascript, because this is one of the basics (and check out jquery)
mainly to access an item from javascript you can do this : var element = document.getElementById('select2')
now when you have the element "element" that you can put a value in.
element.value = "Please select";
the final code is :
<select name="select1" id="select1" onchange="maybeReset()">
function maybeReset(){
element1 = document.getElementById('select1');
if (element1.value == "Reset")
{
var element = document.getElementById('select2');
element.value = "Please select";
...
}
}

Categories