i tried this codes but it seems not working. my problem is how will i enabled the button when the two textbox is equal the value? the selected textbox is automatic will change depend on the quanity of item selected in multiple select.
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
function getCount(){
var comboBoxes = document.querySelectorAll("#tags");
var selected = [];
for(var i=0,len=comboBoxes.length;i<len;i++){
var combo = comboBoxes[i];
var options = combo.children;
for(var j=0,length=options.length;j<length;j++){
var option = options[j];
if(option.selected){
selected.push(option.text);
}
}
}
$('#selected').val(selected.length);;
}
</script>
<script>
function disableSubmit(){
var firstValue = $("#quantitytotransfer").val();
var secondValue = $("#selected").val();
if ((firstValue == secondValue)) {
$("#submit").attr("disabled", false);
}else{
$("#submit").attr("disabled", true);
}
}
$("#selected").on("keyup", disableSubmit);
$("#quantitytotransfer").on("keyup", disableSubmit);
</script>
<input name="imei" placeholder="quantity" id="quantitytotransfer">
<input name="numberselected" readonly id="selected">
<select id="tags" onchange="getCount()"multiple style="width: 200px;">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<button id="submit" id="submit" disabled type="button">Get Values</button>
<script>
</script>
It's very easy here is the code
<input name="imei" placeholder="quantity" id="quantitytotransfer">
<input name="numberselected" readonly id="selected">
<select id="tags" multiple style="width: 200px;">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<button id="submit" disabled type="button">Get Values</button>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
$(function() {
$("#tags").on("change", function(e) {//Whenever tags are changed it will be called
$('#selected').val($(this).find('option').filter(":selected").length);//this will set the count or length of selected length
$("#submit").prop("disabled", !$("#quantitytotransfer").val() || !$("#selected").val() || ($("#quantitytotransfer").val() != $("#selected").val()));//this will disable or enable depending on equal value
});
var delay = (function() {// a delay function
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
$('#quantitytotransfer, #selected').keyup(function() {//both text box are binded to event
delay(function() {
$("#submit").prop("disabled", !$("#quantitytotransfer").val() || !$("#selected").val() || ($("#quantitytotransfer").val() != $("#selected").val()));//this will disable or enable depending on equal value
}, 1000 );//a 1 second delay used you can change to more less
});
});
You can compare value entered in input tag and selected from select tag in the following way:
Here how does it work:
Listen to input on input.
Listen to change on select tag.
When user enter a value in input, run logic enable button.
When user select a value in select, run logic enable button.
Logic enable button, compare value entered and selected from input and select tag. If both values match, button is enabled otherwise is disabled.
When a value change on select tag, show value in read-only input tag/
(function() {
var elmQuantity = $('#quantitytotransfer'),
elmTags = $('#tags'),
elmSubmit = $('#submit'),
elmSelected = $('#selected'),
findTagsSelected = function() {
return elmTags.find(':selected').text();
},
enableBtn = function() {
if (elmQuantity.val() === findTagsSelected()) {
elmSubmit.prop('disabled', false)
} else {
elmSubmit.prop('disabled', true)
}
};
elmQuantity.on('input', function() {
enableBtn();
}),
elmTags.change(function(value) {
enableBtn();
elmSelected.val(findTagsSelected());
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="imei" placeholder="quantity" id="quantitytotransfer">
<input name="numberselected" readonly id="selected">
<select id="tags" multiple style="width: 200px;">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<button id="submit" id="submit" disabled type="button">Get Values</button>
Related
so I have this form
<div class="container">
<form class="form">
<div class="rangeOfChanges">
<label for="range">Range of changes</label>
<input type="text" step="1" id="range" class="range" name="range" pattern="/(\d+-\d+|\d+)/g"/>
</div>
<div class="changeManyDevices">
<div class="changeManyDevicesDesc">
deviceType
</div>
<select name="device" id="device">
<option value="a"></option>
<option value="b"></option>
<option value="c"></option>
<option value="d"></option>
<option value="e"></option>
</select>
</div>
<div class="changeManyWiresType">
<div class="changeManyWiresTypeDesc">
CableDim
</div>
<select name="cable" id="cable">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</select>
</div>
<div class="changeManyWiresLength">
<div class="changeWiresLengthDesc">
CableLen
<input type="text" id="anotherInput" />
</div>
<div class="updateManySegmentsData">
<button type="submit" class="submitChanges">Submit</button>
</div>
</form>
</div>
and now via javascript ( without using jQuery ) I would like to handle my form.
My goal is to detect which input and/or select field has changed, and based on input.range apply changes to my array. So I have to have input.range filled and check in which other field changes were made, and if any apply those changes to array when submit button is clicked. I have tried doing that, my solution only works to apply changes to all attributes, not only for those who were changed.
function processData(e) {
if (e.preventDefault) {
e.preventDefault();
}
const input = document.getElementById(`range`).value;
const arrayOfInputRanges = input.replace(/\s/g, "").split(`,`);
const regex = /(\d+-\d+|\d+)/g;
const checkIfRegExp = regex.test(input);
const deviceSelect = document.getElementById(`changeManyDevices`);
const wireSelect = document.getElementById(`changeManyCables`);
const wireInput = document.getElementById(`manyCablesInputChange`).value;
const deviceSelectValue = deviceSelect.options[deviceSelect.selectedIndex].value;
const wireSelectValue = wireSelect.options[wireSelect.selectedIndex].value;
if (!checkIfRegExp) {
alert(`wrong input`);
return false;
} else if (checkIfRegExp) {
arrayOfInputRanges.forEach((element) => {
if (element.indexOf(`-`) > -1) {
//splitting array and sorting data.
const splitRange = element.split(`-`).sort();
for (let i = splitRange[0]; i <= splitRange[splitRange.length - 1]; i++) {
systemData.bus[i].deviceName = deviceSelectValue;
systemData.bus[i].cableType = wireSelectValue;
systemData.bus[i].cableLen_m = wireInput;
}
} else if (element.indexOf(`-`) === -1) {
console.log(element);
}
// parseInt(element);
// console.log(element);
});
}
return false;
}
function submitChanges() {
const submitFormButton = document.querySelector(`.changesForm`);
submitFormButton.addEventListener('submit', processData);
}
I know that in my solution I just take whatever value is holded in both select elements, same with both inputs. Maybe the solution is to just clear form inputs and selects every time user submits form so he has to put those values once again, and if he does not provide those just keep whatever value is in array?
I have a form with textarea, input type: text, radio and checkbox. Also it has select option and disable submit button at first.
An idea is if all fields are filled in then the submit button will be enable.
Everything is working as expected, but it seems like my code ignores select option. That means the submit button is enable before I do select option.
Below is my code for select option:
var pickOne = $('#pickone option:selected').length === 0;
if (pickOne) {
console.log("pickOne: " + pickOne);
filled = false;
}
I wonder if I miss something. Please take a look at my sample in jsfiddle
HTML
<form action="" method="post" id="subnewtopicform" />Title:
<input type="text" name="title"> <br />
Name:
<input type="text" name="name">
<br/>Description:
<textarea name="description"></textarea>
<br/>Category:
<ul class="list:category categorychecklist form-no-clear" id="categorychecklist">
<li id="category-19">
<label class="selectit">
<input type="radio" id="in-category-19" name="category" value="19">Animation</label>
</li>
<li id="category-20">
<label class="selectit">
<input type="radio" id="in-category-20" name="category" value="20">Anime</label>
</li>
</ul>
<div class="fieldText" id="multi-select">
<lable>
<input class="item" name="item1" type="checkbox">Item 1
</lable>
<lable>
<input class="item" name="item2" type="checkbox">Item 2
</lable>
</div>
<p>
<select name="pickone" id= "pickone" required>
<option selected="selected" value="">Select one</option>
<option value="a">aktif</option>
<option value="l">terkunci</option>
<option value="b">blokir</option>
</select>
</p>
<input type="submit" value="Submit Topic" class="button-primary" name="subnewtopic" id="subnewtopic" disabled="disabled" />
</form>
JS
//function check() {
$('#subnewtopicform').on("keyup change", function() {
var inputs = $("input");
var textareas = $("textarea");
var filled = true;
var oneChecked = false;
var multiChecked = false;
//var pickOne = $('#pickone option:selected').length === 0;
//var pickOne = false;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type === "text" && !inputs[i].value) {
filled = false;
}
if (inputs[i].type === "radio" && inputs[i].checked) {
oneChecked = true;
}
if (inputs[i].type === "checkbox" && inputs[i].checked) {
multiChecked = true;
}
}
if (!oneChecked) {
filled = false;
}
if (!multiChecked) {
filled = false;
}
var pickOne = $('#pickone option:selected').length === 0;
if (pickOne) {
console.log("pickOne: " + pickOne);
filled = false;
}
for (var j = 0; j < textareas.length; j++) {
if (!textareas[j].value) {
filled = false;
}
}
if (filled) {
$("#subnewtopic").removeAttr('disabled');
} else {
$("#subnewtopic").prop('disabled', 'disabled');
}
}
)
/* window.addEventListener("keyup", check);
window.addEventListener("click", check); */
but it seems like my code ignores select option
No. Your code is not ignoring the select option.
<select name="pickone" id= "pickone" required>
<option selected="selected" value="">Select one</option> //This is selected by default
<option value="a">aktif</option>
<option value="l">terkunci</option>
<option value="b">blokir</option>
</select>
"Select one" is a valid option and is selected by default, so this code:
$('#pickone option:selected').length
Will return 1 even if "Select one" is the selected option.
In my opinion the best thing you can do is validate the select by it's value being !== '' considering that's the value of "Select one" option which are your "invalid" option.
I have 3 links they fill the selectfield with different option. If are the textlabel is active and somebody click the link selectlist1 or other it must activate the selectlabel. How i can do that?
<!doctype html>
<html>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<script>
var selectData = {
"sel1":{
"100":"select100", // selectdaten
"101":"select101",
"102":"select102",
"103":"select103",
"104":"select104"
},
"sel2":{
"201":"select201",
"202":"select202",
"203":"select203",
"204":"select204",
"205":"select205"
},
"sel3":{
"301":"select301",
"302":"select302",
"303":"select303",
"304":"select304",
"305":"select305"
}
};
jQuery(document).ready(function ($) {
$(document).on('click', '.selectin', function (event) {
event.preventDefault();
var b = $(this),
buttonId=b.attr('id'),
selectSet = selectData[buttonId],
selectField = $('#selectin');
selectField.empty();
if(selectSet){
$.each(selectSet,function(k,v){
selectField.append($('<option>', {value:k, text:v}));
});
}
return false;
});
});
</script>
<li>Selectlist1</li>
<li>Selectlist2</li>
<li>Selectlist3</li>
<form method="post" name="multiform" id="form8" action="" onchange="toggleRadio();">
<label for="radio1">INPUT Text</label>
<input id="radio1" type="radio" name="select" checked />
<label for="radio2">SELECT from</label>
<input id="radio2" name="select" type="radio" />
<label id="textLabel" for="textin">Formular
<input id="textin" type="text" placeholder="test1" />
</label>
<label id="selectLabel" for="selectin">Items
<select id="selectin">
<option selected></option>
<option value="6">item 6</option>
<option value="7">item 7</option>
<option value="8">item 8</option>
<option value="9">item 9</option>
</select>
</label>
</form>
<script>
function toggleRadio() { // will activate when the form will change.
var radio1 = document.getElementById('radio1'); // radio 1
var radio2 = document.getElementById('radio2'); // radio 2
if (radio1.checked == true) { // if the first checked display input and hide select
document.getElementById('textLabel').style.display = 'block';
document.getElementById('selectLabel').style.display = 'none';
document.getElementById('selectin').selectedIndex = 0; // clear selected option
}
else { // because you got only 2 option you don't have to use another condition
document.getElementById('textLabel').style.display = 'none';
document.getElementById('selectLabel').style.display = 'block';
document.getElementById('textin').value = ''; // clear input
}
}
toggleRadio(); // call the function
</script>
</body>
</html>
I have 3 links they fill the selectfield with different option. If are the textlabel is active and somebody click the link selectlist1 or other it must activate the selectlabel. How i can do that?
Insert this code on your selectin click;
var radio2 = document.getElementById('radio2');
if(radio2.checked == false){
radio2.checked = true;
toggleRadio();
}
This would check if radio2 is checked, if not, it will toggle it and call your function for displaying the select fields. Run the snippet, thanks.
<!doctype html>
<html>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<script>
var selectData = {
"sel1": {
"100": "select100", // selectdaten
"101": "select101",
"102": "select102",
"103": "select103",
"104": "select104"
},
"sel2": {
"201": "select201",
"202": "select202",
"203": "select203",
"204": "select204",
"205": "select205"
},
"sel3": {
"301": "select301",
"302": "select302",
"303": "select303",
"304": "select304",
"305": "select305"
}
};
jQuery(document).ready(function($) {
$(document).on('click', '.selectin', function(event) {
var radio2 = document.getElementById('radio2');
if (radio2.checked == false) {
radio2.checked = true;
toggleRadio();
}
event.preventDefault();
var b = $(this),
buttonId = b.attr('id'),
selectSet = selectData[buttonId],
selectField = $('#selectin');
selectField.empty();
if (selectSet) {
$.each(selectSet, function(k, v) {
selectField.append($('<option>', {
value: k,
text: v
}));
});
}
return false;
});
});
</script>
<li>Selectlist1</li>
<li>Selectlist2</li>
<li>Selectlist3</li>
<form method="post" name="multiform" id="form8" action="" onchange="toggleRadio();">
<label for="radio1">INPUT Text</label>
<input id="radio1" type="radio" name="select" checked />
<label for="radio2">SELECT from</label>
<input id="radio2" name="select" type="radio" />
<label id="textLabel" for="textin">Formular
<input id="textin" type="text" placeholder="test1" />
</label>
<label id="selectLabel" for="selectin">Items
<select id="selectin">
<option selected></option>
<option value="6">item 6</option>
<option value="7">item 7</option>
<option value="8">item 8</option>
<option value="9">item 9</option>
</select>
</label>
</form>
<script>
function toggleRadio() { // will activate when the form will change.
var radio1 = document.getElementById('radio1'); // radio 1
var radio2 = document.getElementById('radio2'); // radio 2
if (radio1.checked == true) { // if the first checked display input and hide select
document.getElementById('textLabel').style.display = 'block';
document.getElementById('selectLabel').style.display = 'none';
document.getElementById('selectin').selectedIndex = 0; // clear selected option
} else { // because you got only 2 option you don't have to use another condition
document.getElementById('textLabel').style.display = 'none';
document.getElementById('selectLabel').style.display = 'block';
document.getElementById('textin').value = ''; // clear input
}
}
toggleRadio(); // call the function
</script>
</body>
</html>
I am using knockoutJS in my project. Following is the code snippet:
<input class="form-control" id="name" type="text" style = "width:100%" placeholder = "Enter name" data-bind="event:{keyup: checkDetails}">
<select class="form-control" id="type" style = "width:100%">
<option>Type 1</option>
<option>Type 2</option>
<option>Type 3</option>
<option>Type 4</option>
</select>
<input class="form-control" id="date" type="date" style = "width:100%" data-bind="event:{click: checkDetails}">
<button type="button" class="btn btn-primary" id = "add_goal" data-bind = "enable:formFilled">Add Goal</button>
<script type="text/javascript">
function myViewModel() {
var self = this;
self.formFilled = ko.observable(false);
self.checkDetails = function(){
console.log("hello");
if($("#name").val() != "" && $("#date").val() != ""){
self.formFilled = ko.observable(true);
}
};
console.log(self.formFilled());
}
ko.applyBindings(new myViewModel());
</script>
There are three fields and i want to activate the "Add Goal" button only when all fields are filled up. The doubts are: Which event should I add to the HTML5 calender and why is the button not getting activated when I am setting it to true inside "checkDetails" function.
formFilled is an observable so you need to set it like a function.
if($("#name").val() != "" && $("#date").val() != ""){
self.formFilled(true);
}
else {
self.formFilled(false);
}
Also your data-bind="event:{click: checkDetails}"> is looking for click events, i guess this should change to keyup.
Im here again... Jquery noob. So I have this form that works with jQuery. The problem is that it has a different behaviour after clicking "Add".
https://jsfiddle.net/h4exrmdz/6/
Just try this to understand quickly:
Select "Other" in the first select. You can see that a new form appears.
Select "Option 1" now. You can see the form disappears.
Click "Add".
Select "Other" again in the first select. The new form doesnt appear anymore, even if you click "Remove". (It should work like before).
HTML
<table>
<th>
<p>Select <select autocomplete="off" name="custom_material_floor" id="custom_material_floor">
<option value="1" selected="selected">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
<option value="Other">Other</option>
</select>
<div id="custom_material_floorValue">
Custom:
<form name="custom_material_floorValue" id="custom_material_floorValue">
<input type="text" size="4">
<input type="text" size="4">
<input type="text" size="4">
<input type="text" size="4">
<input type="text" size="4">
<input type="text" size="4">
</form>
</div>
</th>
<th>
<div class="input_fields_wrap">
<button class="add_field_button">Add</button>
</div>
</th>
</table>
Script jQuery
$(document).ready(function()
{$("#custom_material_floor").change(function()
{if($(this).val() == "Other")
{$("#custom_material_floorValue").show();}
else
{$("#custom_material_floorValue").hide();}});
$("#custom_material_floorValue").hide();
});
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div></p>Name<input name="nombre" type="text" onkeyup="update()" maxlength="16" />\
Select <select name="username">\
<option value="1">Option1</option>\
<option value="2">Option2</option>\
<option value="3">Option3</option>\
<option value="4">Other</option>\
</select><form class="custom_material" id="custom_material" style="display:none">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4"></form>\
Remove</div>'); //add form
$("select").off("change");
$("select").on("change", function(e){
var selEl = $(e.currentTarget);
var inputSel = "form.custom_material";
if (e.currentTarget.value == 4) {
selEl.parent().find(inputSel).show();
} else {
selEl.parent().find(inputSel).hide();
}
});
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
$(document).ready(function() {update();});
})
});
I suppose its easy but I dont know whats happening. Any idea?
If you see the code, you have a second onChange event at the lower part that fires for all the select controls that you have. Onload, it triggers the First onChange event, but after Add, the event triggered is now the second onChange event.
First onChange event:
$("#custom_material_floor").change(function() {
if ($(this).val() == "Other") {
$("#custom_material_floorValue").show();
} else {
$("#custom_material_floorValue").hide();
}
});
Second onChange event:
$("select").on("change", function(e) {
var selEl = $(e.currentTarget);
var inputSel = "form.custom_material";
if (e.currentTarget.value == 4) {
//alert("other clicked");
selEl.parent().find(inputSel).show();
} else {
//alert("option clicked");
selEl.parent().find(inputSel).hide();
}
});
Here is the code working properly if any interested:
https://jsfiddle.net/h4exrmdz/10/
Script jQuery
$(document).ready(function()
{$("#custom_material_floor").change(function()
{if($(this).val() == "Other")
{$("#custom_material_floorValue").show();}
else
{$("#custom_material_floorValue").hide();}});
$("#custom_material_floorValue").hide();
});
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div></p>Name<input name="nombre" type="text" onkeyup="update()" maxlength="16" />\
Select <select class="additional_custom" name="username">\
<option value="1">Option1</option>\
<option value="2">Option2</option>\
<option value="3">Option3</option>\
<option value="4">Other</option>\
</select><form class="custom_material" id="custom_material" style="display:none">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4">\
<input type="text" size="4"></form>\
Remove</div>'); //add form
$(".additional_custom").off("change");
$(".additional_custom").on("change", function(e){
var selEl = $(e.currentTarget);
var inputSel = "form.custom_material";
if (e.currentTarget.value == 4) {
//alert("other clicked");
selEl.parent().find(inputSel).show();
} else {
//alert("option clicked");
selEl.parent().find(inputSel).hide();
}
});
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
$(document).ready(function() {update();});
})
});