Cannot pass Array elements to restore a form - javascript

I am beginner in JavaScript. For exercise, I try to restore a form (at page closed / page reloaded) using cookies. I take the following steps:
Create an array with form selections
Convert to string
Create cookie
Retrieve cookie
Extract string
Convert to array
... Until here everything goes perfect. But the next step doesn't work anymore...
Pass array values to restore the form elements
Regardless the form selections (present correctly in the retrieved array) after reloading page I get every time only last the radio button checked (even if I increase or reduce the number of buttons) and all checkboxes checked.
I tried anything I know to find the error but no success. I also converted the string "true"/"false" values to Boolean, but no change.
The real situation:
frm[0]=true
frm[1]=false // for two radio buttons
frm[2]=false
frm[3]=false // for two checkboxes
document.getElementById("myradio1").checked=frm[0]
document.getElementById("myradio2").checked=frm[1]
document.getElementById("mycheckbox1").checked=frm[2]
document.getElementById("mycheckbox2").checked=frm[3] // pass the array values to the form elements
But, as I said, any values I pass I always get selected the last radio buttons and all checkboxes.
Probably this code doesn't follow the "best practices" of JavaScript, but before I change it I want to understand why it behaves like this. I thank you in advance for your comments, because I want very much to clarify this issue.

It happens because for a radio button, only one radio button can be clicked in a group of radio buttons.
And for the checkboxes, you are using the same ID twice, so the change isn't actually reflecting on the other checkboxes.

Related

How does angularjs binding work when copying objects?

I have several html checkbox that is either on/off based on the properties of an object inside of an array say: objectArray.get(i).isCheckBoxActive. Since the user can change the object properties I'm trying to implement a button that reset all changes. My idea was creating a copy of objectArray (say objectArrayOriginal) and when the button is clicked it calls a function that copies back objectArrayOriginal into objectArray. I would expect that if a checkBox is off in objectArrayOriginal then, after pressing the button, it should be off also in the html page. To copy the object I did:
var objectArrayOriginal = JSON.stringify(objectArray)
.....
function clickReset(){
vm.objectArray = JSON.stringify(objectArrayOriginal)
}
I checked and although the field objectArray.get(i).isCheckBoxActive gets reset to its original value; the checkboxes remain checked/unchecked. The solution I found to be working is iterating over objectArray and comparing the values one by one with objectArrayOriginal. I would like to understand why the previous method fails and if there's a better one. Thanks in advance for any help!

Javascript function activating input fields after hit checkbox

I inherited the old code and trying to add some new functions. For now there is large form in 2 column table, first column has checkbox (yes/no), second input fields / textareas with description.
At checkbox are on the onclick event to check the condition and according to him, activate or block the second column.
I removed all the if statements and made big function full of if which check checkbox state and changing by element id state of input fields.
I wonder if you have idea how write univesal function to activate inputs in td next to that in which the checkbox is.
Function consisting of dozens of conditions to check the condition of one field and changing the status of another is a bad practice thats why I am asking you guys how to bite it.

How to check all checkboxes representing a DB column in Oracle ApEx with one click?

I have a Tabular Form with a few columns, one of which is a numeric entry that has values 1 or 0, represented by a checkbox.
I'd like to create a "master-checkbox" that would check all the checkboxes in this column, but it wouldn't sumbit the page, the user would have to do it manually by "Apply Changes".
I figured out that I need to use apex.item and some javascript and unfortunately, that's as far as I got.
Actually, it wasn't as easy as the google results suggest.
Apex' checkbox appears to be just a cosmetic thing and the real thing is hidden.
My colleague helped me to do something like this:
$("td[headers=APPROVED] input[type=checkbox]").attr("checked", 1); // this is the "visual" part
$("td[headers=APPROVED] input[type=hidden]").val(1); // and this is he one that gets stuff done
"APPROVED" is the name of the column I am manipulating.

How do I create a clickable grid of hours in a week, saving clicks to MySQL?

Just wondering if there is a system out there that will basically allow for the following :
Displaying a grid of hours in a week that a user can click on to select and reclick to deselect and when the form is submitted it will send the blocks off to MySQL to store.
Since I havent done this before Im not sure on the best course of action, intial thoughts were to load up a pixel.gif and use onclick to tally clicks but before I reinvent the wheel as a square I thought it best to ask questions first to save trouble later.
You could create a table where the checked td's have one class and the unchecked td's have another class, and all of them have a unique ID. Then set the onclick action for each of the two classes to send the id of the td as an argument to a javascript function that uses ajax to update the database and changes the class of the td to selected or unselected.
The html would look like:
<td id='19_09_2011_12am' class='unselected_td'/></td>
<td id='19_09_2011_12am' class='selected_td'/></td>
The css would look like:
.unselected_td{background-color:blue;}
.selected_td{background-color:yellow;}
And the javascript:
$('.unselected_td').click(function(){
var cell = this.id;
$.ajax({
type:'post',
url:'path/file.php',
data:"cell="+cell+"&checked=1",
success:function(){
$(this).removeClass('unselected_td').addClass('selected_td');
}
});
});
And vice-versa for the selected ones, sending a 0 to the server instead. I'm not 100% sure about the syntax I used in the jquery, but the idea of this should work
I think the easiest way to achieve this would be to use buttons or checkboxes to represent the dates/hours selected. Checkboxes would be the simplest, since they could just be set to a value of '1', and only the selected checkboxes would show up as $_POST variables when you submit the form.
Buttons could have more style applied to them, but you would have to use some javascript code to toggle the value and style of the button when it's clicked. This is very easy to do in jQuery.

Problems with drop down list disabling

I have two drop-down select lists in my form as well as a textarea box.
The problem I am having is that, one a user creates a record, the record is then updated by another group but what I want to do, is prevent the other group from updating both select lists as well as the textarea box. I have disabled these items but when the user attempts to submit the form again, it looks like these items are not being posted and looks like the values are NULL.
I am using jQuery:
$('#DROP-DOWN1').attr("disabled", "disabled").addClass('itemDisabled');
$('#DROP-DOWN1').attr("disabled", "disabled").addClass('itemDisabled');
$('#TEXT-AREA').attr("disabled", "disabled").addClass('itemDisabled');
How I can prevent the user from modifying these items above but at the same time having the values posted?
Nice problem!
Can you hide them instead of disabling? Set visiblity to false
Another solution is to copy the values to an hidden input field. That one will get posted!
Work forward with this in mind: http://jsfiddle.net/uHQkx/
Instead of disabled try readonly.

Categories