condition for input field and checkbox - javascript

how can i create a condition for multiple checkbox!
Input Field ID =" INsrvOtr "
CheckBox ID = "INsrv"
let's say that the that the user has two options,either put a value on the input field or choose any value from the checkbox but he can only choose "ONE" of the two options
Checkbox:
<input id="INsrv" name="INopt" type="checkbox" value="1" />1<br>
Input field:
<input id="OUTsrvOtr" name="OUToptOtr" type="text" value="" onblur="valINP()"/><br><br>
if the user inputs a value in the input field this will happen
if "input field" is not empty, class of all the "checkbox" will not contain a value.
<script>
function valINP(){
$("#INsrv1").prop('class','text')
$("#INsrvOtr").prop('class','validate[required] text-input text')
}
}
</script>
or if the user chooses to check the checkbox this will happen
and if the "checkbox" is not selected,class of "input field" will not contain a value.
<script>
$(document).ready(function() {
$("input[name$='INopt']").click(function() {
$("#INsrv1").prop('class','validate[minCheckbox[1]] checkbox text')
$("#INsrvOtr").prop('class','text')
});
});
</script>
or if both is not selected
the script will contain this two:
$("#INsrv").prop('class','validate[minCheckbox[1]] checkbox text')
$("#INsrvOtr").prop('class','validate[required] text-input text')

try optimize your code, some useful optimization for selecting controls
http://api.jquery.com/category/selectors/ or http://api.jquery.com/attribute-contains-prefix-selector/
using some thing like
$("#id|="INsrv"]').prop('class','')
sorry if the syntax goes wrong.

// Use this for INsrv([0-9]+)
$('[id^="INsrv"][id!="INsrvOtr"]').each(function() {
});
// Or if you only want to call `prop`
$('[id^="INsrv"][id!="INsrvOtr"]').prop('yourprop', '');
Then you can just call $('#INsrvOtr') separately.

Related

PHP / JS Change values of form dropdown with previous answer with database

I'm trying to fill a dropdown box in a form with items from a database.
But it only has to fill with the data from a database that is equals to the previous input field.
Let's pretend that i have a database that looks something like this:
and my from looks like this:
<body>
<form>
<input id="nummer">
<span></span>
<select name="name">
<option>name</option>
</select>
</form>
</body>
i have already found a way to fill the dropdown boxes with data with this js code but this is without a database:
$(document).ready(function()
{
$nummer = $("select[name='nummer']");
$name = $("select[name='name']");
$input = $(this).val();
$('#nummer').bind('input', function()
$(this).next().stop(true, true).fadeIn(0).html('[input event fired!]: ' + $(this).val());
if ($(this).val() == "123")
{
$("select[name='categorie'] option").remove();
$("<option>Pieter</option>").appendTo($categorie);
$("<option>Steven</option>").appendTo($name);
}
});
});
When i enter 123 in the number input field i need the dropdown box filled with peter and steven
Is this possible?
Program the input field's onblur event to look for a dropdown item with the matching value. If found, mark the found dropdown value as selected.
$(document).ready(function(){
$(document).on('#inputfield', 'blur', function(){
$.ajax(
//Properties
//Current value of the input field should be sent to the server
data:{inputValue:$('#inputfield').val()}, //Use this in where clause in the server
success:function(){
// Populate the data into the dropdown
}
);
}
})
Here I have outlined what you need to do.
If I fill out the rest, it will be Me programming for you. And the necessary information is also not there for me to fill out the rest.

Data attribute turns into true after event call in AngularJS

I have this input:
<input type="checkbox" ng-model="area.id" data-id="{{area.id}}"/>
and some ng-click action above, I'm trying to collect all selected checkboxes id's but after check action data-id attribute turns to true/false, why?
Function from controller:
collectSelectedAreas($event) {
let selectedArea = $event.currentTarget.querySelectorAll('input:checked');
let areaIds = [];
[selectedArea].forEach((el) => {
console.log(el.attributes['data-id'].value);
});
}
Option 1:
You could select another property to track the checkbox value (true/false) like this:
<input type="checkbox" ng-model="area.selected" data-id="{{area.id}}"/>
area.selected = true in case of checkbox is selected
Then in your function, iterate over your area's Array, lets suppose you have an arrayOfAreas, the same array that you are iterating in your ng-repeat
collectSelectedAreas() {
let areaIds = [];
arrayOfAreas.forEach((el) => {
if (el.selected){
areasId.push(el);//Add selected element to array
console.log(el.id);
}
});
}
Option 2:
<input type="checkbox" ng-model="area.selected" data-id="{{area.id}}" ng-true-value="area.id" ng-false-value="'NO'"/>
It means that when checkbox is checked area.selected will take the area.id value, otherwise the string 'NO';
You need not to access DOM for getting selected checkbox. You can check this by checking the model value area.id . It will contain true for if checkbox is selected. Then you can traverse through area object, where you can get key to identified the id of selected checkbox.For Eg.
<input type="checkbox" ng-model="area.id" />
where
$scope.area.id==true if checkbox is selected.

Check for checkboxes in form and get attribute instead if value

I have a form which is saved to Local Storage as a String. My form however has few checkboxes, radio buttons and so on that use attribute instead of value. How can I perform such a check and pass on right "values" to the Local Storage in my dataSave function?
function dataSave(){
var mngrFields = {};
$(".mngr-field").each(function(){
if ($(".mngr-field").is("checkbox")){
mngrFields[this.id] = this.attr("checked");
} else {
// Default method to get input-text values
mngrFields[this.id] = this.value;
}
});
localStorage.setItem('fieldString', JSON.stringify(mngrFields));
}
The default method to get input-text values is working just fine on it's own, but when the checkbox checker is included, it breaks the whole application because of an error.
Any ideas on how can I build up a good checker that I might be able to use for radio buttons as well?
In general all you need to do is just to check the type of input fields and to detect checked attribute for radio and checkbox ones - both of them have true/false for it. Here is the example with all basic HTML types:
<input class="mngr-field" type="radio" id="field-01" checked> Checked radio<br>
<input class="mngr-field" type="radio" id="field-02"> Unchecked radio<br>
<input class="mngr-field" type="checkbox" id="field-03" checked> Checked checkbox<br>
<input class="mngr-field" type="text" id="field-04"> Comment on how it went?<br>
<select class="mngr-field" id="field-05">
<option value="">Rate</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select> Rate it<br>
<textarea class="mngr-field" id="field-06">Area text</textarea><br>
<input type="button" value="Save to LS" onclick="dataSave()">
<script>
function dataSave() {
var mngrFields = {};
$('.mngr-field').each(function () {
if(this.type == 'radio' || this.type =='checkbox')
mngrFields[this.id] = this.checked;
else
mngrFields[this.id] = this.value;
});
localStorage.setItem('fieldString', JSON.stringify(mngrFields));
console.log(JSON.parse(localStorage.getItem('fieldString')));
}
</script>
Console log output:
Object {field-01: true, field-02: false, field-03: true, field-04: "Input text", field-05: "2", "field-06":"Area text"}
field-01: true
field-02: false
field-03: true
field-04: "Input text"
field-05: "2"
field-06: "Area text"
I'm sure you know how to proceed with localStorage string after that. :)
It seems this line if ($(".mngr-field").is("checkbox")){ is the culprit. jQuery is checks for the conformance of an element with a selector, and "checkbox" does not seem to be a valid selector for a checkbox. Try if ($(".mngr-field").is(":checkbox")){ instead.

How to check select statement choice before submission

I have a select area for the user:
<select class="span12" placeholder="Enquiry Type" name="enquiry" id="enquiry">
<option value='' selected></option>
<option value='cv'>Submit CV</option>
<option value='vacancy'>Submit Vacancy</option>
</select>
I have a hidden field in the form which allows the user to upload their cv. I now need it so that if the user selects submit cv, the field will display itself.
<input type="file" name="cv" accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" style="display:none;">
I know that i would be able to check the user input of the select using an on click function. Is there a way of doing it without that (there and then)? And then if that option is selected, display the hidden file upload.
Try this:
$('#enquiry').on('change', function(e) {
if($(this).val() === "cv") {
$('input[name="cv"]').show();
}
});
This works:
http://jsfiddle.net/dL8evt33/
:)
You can achieve this by hooking to the change event of the select and checking the selected value. You can then use toggle() to hide or show the input as needed. Try this:
$('#enquiry').change(function() {
$('input[type="file"]').toggle($(this).val() == 'cv');
});
Example fiddle
remove display: none; first now do write this code.
$("[id$=fileupload]").hide();
if("[id$=enquiry]").val('cv')
{
$("[id$=fileupload]").show();
}
else
{
$("[id$=fileupload]").hide();
}
On change event you can display the input type file using its id. Give 'file' as id to hidden field -
$('#enquiry').on('change', function() {
if("cv" == this.value){
jQuery("#file").show(); // or jQuery("#file").toggle();
}
});

is there a defaultValue property for radio select?

I am wondering if there is a way to reset a radio to it's originally selected option. I know of defaultValue for inputs but is there a way to make it so that I can reset the radios back to their originally selected value on page load?
I am not wanting to simply unselect all radios. I am trying to put them back to their originally selected value.
Thanks for any info.
Yes, radio inputs do have defaultValue property, but what you are looking for is the defaultChecked property:
$('input[type=radio]').prop('checked', function() {
return this.defaultChecked;
});
That being said, if you want to reset the form you can use the reset method of the HTMLFormElement object:
$('#formElement').get(0).reset();
I think you want this
<form action="">
<input type="radio" name="gender" value="male" checked="true"/>Male
<input type="radio" name="gender" value="female"/>Female
<input type="reset" value="reset"/>
</form>
Any time you will reset the form, the male radio button will be selected.
I will rather make a jQuery plugin like this:
$.fn.defaultVal = function (checked) {
if(checked === true || checked === false) {
$(this).attr("data-default", checked);
return;
}
if(!$(this).attr("data-default")) {
console.log("No default value assigned!");
return;
}
return $(this).attr("data-default");
}
JSFIDDLE LINK UPDATE
Working Demo is here: JSFIDDLE

Categories

Resources