I have a form with a 'Reset' button. When i select my radio button the data from my DataTable is passed and pre-pops my fields. This working fine and does in fact pre-populate the relevant radio button
JQuery
if (modifyRecordData.startTime == 'Anytime') {
$('#anyTimeRadioButton').attr('checked', true);
$('#specificTimeRadioButton').removeAttr('checked');
$('#startEndTimeFields').hide();
} else {
$('#anyTimeRadioButton').removeAttr('checked');
$('#specificTimeRadioButton').attr('checked', true);
$('#startEndTimeFields').show();
$('#startTimeHr').val(modifyRecordData.startTimeHr);
$('#startTimeMin').val(modifyRecordData.startTimeMin);
$('#endTimeHr').val(modifyRecordData.endTimeHr);
$('#endTimeMin').val(modifyRecordData.endTimeMin);
}
Data returned
Page loaded
Now the issue, if the user, after data load goes to update the details and selects the other radio button the hidden fields are displayed (again correct)
Then user clicks the 'Reset' button and it fails in the correct function
$('#resetButton').mousedown(function (event) {
buttonclicked = "Reset";
event.stopImmediatePropagation();
modifyRadioButtonSelection(modifyRecordData);
})
and then goes back to the initial loaded data and it does drop in the IF code above
Debuging
Then it re-hides the hidden section (which is correct) but it does not re-tick the radio button as expected.
If i dont have the following code in the IF it leaves the previously selected one checked although the data falls in the IF
$('#specificTimeRadioButton').removeAttr('checked');
No idea whats going wrong at all. I even tried adding the following the 'Reset' button function but it just will not re-check the correct `radio button
$('#anyTimeRadioButton').removeAttr('checked');
$('#specificTimeRadioButton').removeAttr('checked');
Historically, there's been a lot of ambiguity and confusion between three related but different concepts:
The value of the HTML attribute in the source code.
The value of the HTML attribute in DOM tree.
The value of the JavaScript property.
To address that, jQuery/1.6.1 introduced the prop() method, which I suggest you adopt.
Related
I have an html page where clicking on a checkbox causes a new section of the page to become visible. The HTML looks like this:
<input id="formcheck" ng-model="collapseform" type="checkbox">Fill in the Test Form
<div id="mainformdiv" class="wizard-div" ng-show="collapseform">
<div>
<div class="main-block">
...and so on
</div>
</div>
</div>
This part works fine - by default that part of the page is hidden, and when I select the checkbox, the rest of the page appears. When I deselect it, the rest of the page is hidden again.
Further down on that same page there is a table, and when you select a node in that table it calls a controller function that causes some internal values to be set - this part works as well, so the controller seems to be set up correctly and all the functions can be called.
The problem I'm seeing is this: I want to add a bit to the controller function that gets called when the table node is selected, and what I want it to do is, in addition to setting the internal values (which it does correctly), also check the checkbox, and cause the hidden part of the page to be displayed in response. I thought if I checked the checkbox through the javascript that would accomplish this, so I added this to the internal value setting function:
if (document.getElementById("formcheck").checked == false) {
document.getElementById("formcheck").checked = true;
}
That kind of works - the checkbox does get checked off when that piece of code is called, however, unlike when I click the checkbox with a mouse, it does not seem to trigger the ng-show, and so the hidden part of the page is not made visible. Is there something else I need to do in order to make this work?
Thanks!
You should be able to change the value of the model. Since NgModel provides two-way binding, it watches the $scope variable as well.
For example do
$scope.collapseform = false
instead of
if (document.getElementById("formcheck").checked == false) {
document.getElementById("formcheck").checked = true;
}
I am building a web page where one must select an input from a list and then hit a button which takes to you a new page based on that selection. If nothing from the list is selected and this button is pressed, I want the user to be alerted that they must select from the list before proceeding.
So my initial HTML has a blank href:<a id="Button" href="">Start</a>
Then I add this href via js after list selection:
choice.mousedown(function(){
if (this.data('fullname')=='X'){
document.getElementById('Button').href = '/newpageX';}}
This all works fine and adds the href to the button exactly as desired. The problem comes when I next try to add the alert when the href is still emtpy. So after the js code above, in order to alert the user if this href is still blank (ie nothing chosen from list) and they hit the button, I added a check as follows (using jquery):
document.getElementById('Button').onclick = function () {
if ($('Button').attr('href') === undefined) {
alert('Please select an option from list above');}}
This does seem to work fine when nothing has been selected, but if a user does select something from list, this alert still shows anyway before it then correctly proceeds to the new page based on list selection (newpageX)! This is my main problem. So it's as if the condition of the href (defined/undefined) isn't re-checked via the jquery if statement after the href is defined via the list choice - and beause of this the alert still shows anyway. What am I doing wrong? How can I prevent the alert from showing if in fact the href is now defined based on the list selection? Is there a better overall strategy here?
Also, separately - when href is in fact empty and the button is pushed, after one hits 'ok' on the alert, the page is reloaded. I don't believe this is necessary - how can I just have the alert show, but not reload the page? I tried to add 'return false;' after the if statement, but then it won't proceed to new page when a list selection is made.
Thanks in advance for any assistance guys...
Okay, the comments above gave me part of the answer, but the complete solution was to change the first line of jquery if statement to:
if ($('#Button').attr('href') == '') {
So I needed to add the # before Button, but also change from === undefined to == ''
Just adding the # before Button without changing the second part killed the alert altogether. I was then also able to add return false; after the alert to prevent the page from reloading upon empty button click.
I have two submit buttons namely "Approve" and "Reject". Both of them go to one controller file so I set the controller file on the action tag of the form.
What I want is that when I click Approve, it sets the value of the hidden field named 'Decision' with 'Approved' and when I click 'Reject', the value of the hidden field will be 'Rejected' then the form will continue to submit to the designated controller.
However, the form continues to the controller but the decision field is empty.
Also, when I tried to put an 'alert' on the javascript function, it is not showing everytime I click the submit buttons eventhough I used the onClick tag.
Can someone suggest a working code for this? Thank you. :)
So I believe form actions have precedence over javascript and other stuff like animations.
To answer your question: you can make the submit buttons just normal buttons like so:
<input id='accept-button' type='button' name='accept' value='Accept' />
and add an event listener to it that changes the value of the hidden field when clicked then submits the form:
document.getElementById('accept-button').addEventListener("click", function () {
var hiddenid = document.getElementById('hidden');
var formid = document.getElementById('form-id');
hiddenid.value = 'Accepted';
formid.submit();
});
After a quick search I found a better solution from this question's accepted answer. It uses jquery though.
I am trying to write a custom magento module and i've got it all complete and working perfectly except one problem.
The module is a form with 4 radio buttons. They are all blank on the checkout page and I have them set up so that when you click one it submits the form and reloads the cart page with the "additional fees" in the subtotal.
My problem is that I need the first option to "auto submit" on page load. But I've tried ALOT of different things and can't come up with a way to use the jquery .submit() function to ONLY submit the form once. as it is now it works how I want it, except it loads the page in an endless loop.
Any way to say submit() only once?
I'd set the default radio button server-side rather than having an extra submit/refresh cycle, but if you insist on doing it client-side...
I assume on subsequent refreshes the previous selection will be retained (because your server-side code echoes back the previously selected values?), so can you perhaps test whether any radios are checked and if not assume that that is the first and only time to auto-submit?
$(document).ready(function() {
var $radios = $('#yourFormId input[name="yourRadioButtonGroupName"]');
if (!$radios.is(":checked")) {
// No radios currently checked, so check the first and submit
$radios.eq(0).prop("checked",true);
$("#yourFormId").submit();
}
});
The .is() method will "Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments."
I have a page where a series of checkboxes are displayed next entries from a database, they each have an onClick event to do an Ajax write of their value to the database.
I want to have a button on the form that toggles all the checkboxes, so I used the following function/jQuery:
function toggle_chk_links(){
$(".chk_user_link").click();
};
It works fine visually, the only problem is that although it triggers the onClick event as required the checkbox is read with it's old value, so the database gets the opposite value to the one required! This is the line reading the checkbox in its' onClick event:
active=Number($("#chk_brandlink"+brand_ID).prop("checked"));
I need users to be able to manually click on each checkbox, as well as toggle them all, ideally using one onClick function call. Any suggestions?
The easiest solution is to handle the onchange event instead of the onclick event.
$(".chk_user_link").change(function() {
// your change handler
});
Example: http://jsfiddle.net/7zHRm/1/