I would like to pick some of your brains on this matter...
I've got a large form where there are a lot of multiple selection choices. Some are radio groups and yet others are "select all that apply" checkbox groups.
I'm trying to figure out the best way to translate each of these selections within my XML tree to send to the SQL server.
For radio groups, that's easy... one is selected: option = id #
But for checkboxes, this is a little different... I'd like to stick to sending 1 or 0 for selected or not selected. But checkbox dont have a value and so I have to check to see whether or not it's selected: true or false/yes or no.
What do you think would be the best way to convey whether or checkbox within a group of checkboxes has been selected within the XML tree?
One way (and the simplest) would be to send only those checked and the server will assume the others are not checked. The other way would be to iterate over your form elements, select the checkboxes and see if they are checked or not, one by one. Something like:
var checkboxes = []; // assoc array of all checkboxes
function formValidate(form)
{
var list = form.getElementsByTagName('input')
for (var i in list)
{
var elem = list[i];
if (elem.type == 'checkbox')
checkboxes[elem.name] = elem.checked;
}
return true; // assuming this is an onSubmit event
}
and in your HTML:
<form onSubmit="return formValidate(this)" ...
Related
My HTML:
<div class="check" ng-repeat="point in dbs">
<input
name="db"
id="{{point.id}}"
ng-model="point.select"
ng-click="update($index, dbs)"
ng-checked="false"
type="checkbox"
ng-required="point.select" />
</div>
Whilst my update() function looks like:
$scope.update = function(position, dbs) {
angular.forEach(dbs, function(point, index) {
if (position != index)
point.select = false;
});
}
This works as with regards to tracking what the selected checkbox is, and sending into another controller that expects the value, all is working good.
However, when I go back from the resulting page, back to this search form again, somehow the checkbox I selected before, is preselected, and I don't want anything to appear, rather just have everything blank.
Would it be as easy as simply stating:
$scope.point.select = null;
as I can't seem to find a good solution for this, so that the checkbox is always blank / not pre selected when you arrive on this form.
Let me see if I get what you are doing. It looks like you are trying to make your list of checkboxes mutually exclusive. I might look at using a radio button list (a set of radio buttons with the same name attribute, HTML interprets this as a mutually exclusive list). If you create a variable which will hold the value of the selected option and pass that value around, you probably can achieve the same result with less code. Take a look here: https://jsbin.com/sunusihuse/edit?html,js,output
As for clearing the list of controls when you revisit the page, what I have described will do that too because the value of the variable which will hold the selected value is initialized to an empty string. Hope this helps.
I've doing some research about a problem I'm having with jQuery select2 plugin. The select2 sorts the selected items (no matter which order you choose them) when posting form. I know it may not be a select2 specific bug, but standard html select behaviour.
Now, how could I get the selected items IDs and then put them in a comma separated list in a hidden input so I can respect the order the items were chosen?
$("#formpacint").submit(function (event) {
var data = $('#campoprofesionales').select2('data');
$('#hidprofesionales').val(data);
});
The above code puts the selected items (in the order they were chosen) using its data property, into the hidden input, but the console.log shows them as objects (text+id I guess)..
I'd need to have: 35,14,29 (the ids of selected items as they were selected without sorting)
Thanks
Found a solution
var selections = (JSON.stringify($("#campoprofesionales").select2('data')));
var obj = $.parseJSON(selections);
$.each(obj, function() {
console.log(this.id);
// I here set a hidden field with the ids in the order they were selected
});
I need to be able to tell if the checkboxes are checked to do some basic validation. Problem: I don't have access to the PHP generating this. There is no class added, or the basic checked=checked that most forms have. What's the easiest way to target the checked boxes?
http://www.inpresence.in/event-registration?ee=4
EDIT: freak out!! here's the code, i just need to target the checked boxes, everything else is working. the :checked method of jquery uses checked=checked within the checkbox, which isn't there.
$(document).ready(function(){
//when the submit button is clicked...
$("input.btn_event_form_submit").click(function(){
//find the value of the drop down with one evening or four evenings
var priceOption = $("#price_option-4").val();
//match a string ending with "one evening" as the first numbers will be randomly generated by php
var oneEvening = /^\d{2}\|One Evening$/.test(priceOption);
//match a string ending with "four evenings" as the first numbers will be randomly generated by php
var fourEvenings = /^\d{2}\|Four Evenings$/.test(priceOption);
//HOW DO I GET THE CHECKED BOXES?!
var checkedBoxCount = $('#dates-1351733097 .valid').is(':checked').length;
//if one evening is selected make sure the checked boxes count does in fact equal one
if(oneEvening && checkedBoxCount != 1){
//if it doesn't alert the user and return false
alert('You must select one date');
return false;
}
//if one evening isn't selected, four is. make sure the count does indeed in 4
else if (fourEvenings && checkedBoxCount != 4){
//if it doesnt alert the user and return to the form
alert('You must select four dates');
return false;
}
//else, everything checks out!
else {
return;
}
});
});
Using this JavaScript code you can check if a checkbox is checked:
var isChecked = document.getElementById("my-checkbox").checked;
Or using jQuery:
var isChecked = $('#my-checkbox').is(':checked');
EDIT: Try this and tell me if it works:
var checkedBoxCount = $('#dates-1351733097 .valid:checked').length;
Have you tried using jquery to resolve this?
http://jquery-howto.blogspot.co.uk/2008/12/how-to-check-if-checkbox-is-checked.html
$('#edit-checkbox-id').is(':checked');
use the jquery :checked selector. http://api.jquery.com/checked-selector/
This will give you a boolean in javascript of what you want:
document.getElementById("Nov.12-4_1").checked
You can view source and find the elements to view whatever id's they have.
Other answers: the OP didn't specify that he wanted a jquery answer. If he hasn't used jquery for anything up to this point. I think adding it just for this would be a tad overkill.
I have 50 rows of data and i want users to give them points by 1 to 50. I put dropdown boxes near them with options 1/50. But all i want is when a user selects 15(for example) for a row, 15 will be deleted from all other select tags of other rows. I am not as good as you in JavaScript. How can i accomplish this?
Hi casablanca i couldnt make he script you sent work. I need it to work on just one select tag so i give select tag an ID and an ID for the form too. I edit the scripts getElementsByTagName with getElementsByTagID (select tag's ID) to effect only one select tag. But the function doesnt triggered?
This might not be a very good idea, because it is very difficult for the user to modify choices -- for example, if I want to give 15 to a different option, I need to change the old one to something else and then change the new one to 15. Also, once all points have been assigned, it's impossible to make any changes because all options are gone.
A better idea would be to let the user do whatever he/she wants and then validate the form in the end. You could do that like this:
function validate() {
var used = []; // This array stores already used options
var rows = document.getElementById('myForm').getElementsByTagName('select');
for (var i = 0; i < rows.length; i++) {
var points = rows[i].value;
if (used[points]) {
// This value was already used
alert('Please choose a different value.');
rows[i].focus();
return false;
} else {
// This value was not used before; mark it as used now
used[points] = true;
}
}
return true;
}
And call this function in the onsubmit handler of your form:
<form id="myForm" onsubmit="return validate();">
EDIT1: id -> class
give each option the class of the number it is
<option class="15">15</option>
<option class="16">16</option>
etc.
Then jquery can remove() an item by class
$('.15').remove();
obviously have to do an on change and get the value just set. "remove()" is nice in this instance because I believe it will yank every instance of that class.
EDIT3: upon further consideration the above method would be further complicated by the need to not remove the "selected" option. Not going to figure out the exact method but I think changing the class from "15" to "selected15" with a $(this).append() or something of the sort before calling the remove would get the job done fairly safely.
EDIT2:
As noted by casblanca below this is not an ideal user interface at all for this type of input. You may want to look into this: http://www.utdallas.edu/~jrb048000/ListReorder/
Allows user to drag and drop items in a list to reorder them. Much more natural.
Is it possible to check if all select values inside a div, inside a form equals 1?
I don't want to write hundreds of if statements.
Reason for this is that I am trying to validate the form, and want to check so that the user has selected something. Standard value in EVERY select list is 1 (not selected anything).
<form name="myform" onchange="return jsfunction();" etc...>
<div id="formdiv">
many many selects, all having a selected option value of 1
</div>
</form>
Not writing the code
Get all select elments using
document.getElementsByTagName ( 'select' );
which returns an array.
Loop through the array and get the selected value and check those.
To get the selected value you can use
document.getElementById ( elementinArrayIndex.id ).value;
where elementinArrayIndex is the select element in the current loop iteration.
If all the select elements that you want to check are inside the div element with id "formdiv" then you can use
document.getElementById ( "formdiv" ).getElementsByTagName ( "select" );
If you want to know if all of the boxes are checked, get them all with a
var selects = document.getElementsByTagName('select');
then loop through and count them
var checked = 0;
for(var i in selects)
{
checked += selects[i].value;
}
if checked is equal to the number of select boxes, they're all checked.
if(checked == selects.length)
{
//yay
}
beware of course that if there are lots of select boxes, this may take a while, but there isn't a great deal you can do about that. If you do run into a performance related problem, your selection system is possibly over complicated...