I have one notification on the web, when I click on it, it will open new popup, the save button is default disable, this popup is one kind of window that composed from many elements (list of radio check boxes of many id of goods have just imported to my shop, from that I can choose one or multiple id to attach them to one shelf, and I can do the second time to attach other/others to another shelf, the name of shelf will display under the name of kind of ids...and many others elements).
Question is, how can I inspect that there is any data change (there is any id already attached or cancel attach) in order to enable the button again by Javascript.
.
Thank you!
if what you want is to "enable" the button just add the code to the onClick event of the "list radio check" controls, something like:
<form action="">
<input type="radio" onclick="activate()" name="good1" value="1">12345746<br/>
<input type="radio" onclick="activate()" name="good2" value="2">456548765<br/>
<input type="radio" onclick="activate()" name="good3" value="3">54654654546<br/>
<button id="saveButton" disable> save</button>
</form>
<script>
function activate(){
document.getElementById("saveButton").disabled = false;
//the code that enable your button, what ever serve you better...
</script>
or add an event listener to the click event on all the radio buttons, which will do the same (because is "the same")
let rb = document.getElementsByTagName("input");
for(let idx=0; idx<rb.length; idx++){
if(rb[idx].getAttribute("type") == "radio"){
rb[idx].addEventListener("click", function(){
document.getElementById("saveButton").disabled = false;
}
}
}
which again, do the same ;)
Hope it helps.
Related
I am unable to disable a button using the getElementById() method. I am looking for inspiration as to what I am doing wrong because I use it to enable a button but I cannot seem to be able to disable it.
I have tried calling the method in different ways:
document.getElementById('wsSubmit').disabled = false;
document.getElementById("wsSubmit").disabled = false;
document.getElementById('#wsSubmit').disabled = false;
document.getElementById("#wsSubmit").disabled = false;
document.getElementById(buttons[0]).disabled = false;
Button in question:
<input class="button" type="button" id="wsSubmit" onclick="closeWindowDWSC();" value="Submit" disabled>
I want the button to become enabled.
You need to remove the attribute.
document.getElementById('wsSubmit').removeAttribute('disabled');
As mentioned in the comments, a duplicate Id would case this functionality to fail.
Visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state.
A small demo:
<!-- Checkbox enables/disables the button -->
<label for="checkbox"><input type="checkbox" id="checkbox" label="Enable button" onclick="document.getElementById('buttRemove').disabled = ! this.checked">Enable/Disable the button</label>
<hr>
<button id="buttRemove" label="Remove All" disabled="true">Button</button>
Back to your example. The first 2 example of code which is really same, if I don't consider the '' and "".. You want it to be set as true, when want to enable them like:
document.getElementById('wsSubmit').disabled = true;
document.getElementById("wsSubmit").disabled = true;
This should work. If doesn't work, then probably your page has duplicate ID to another element which comes after this <button> element in the DOM.
I am using a MEAN stack for my web project. The front end is a simple registration form that asks for several user inputs. For example, it says "how many products are you buying?" The next question is a radio button. It says is this product large or small? My question is the following: the calculation to get the cost of the order is #products*42+(12 if large is selected) or #products*42+(0 if small is selected). How do I code this in javascript(I am using node in my backend). In other words, how do I tell my calculation code that when user selects a radio button you need to add a following number and how do I pass on the number of products typed to my formulas? I have started by assigning value=1 for small and value=2 for large radio button option. Just a general example would be helpful as I can code the details and update the formulas once I get around this problem. Thank you
If you want to do the calculation on the client side and the elements are in an HTML form like:
<h1>Radio Buttons</h1>
<form name="catch-radio" method="post">
<div class="input">
<span class="label">How many products are you buying?</span>
<input id="product-count" type="text" name="product_count" value="0"/>
<br/>
<span class="label">Is this product large or small?</span>
<br/>
<span class="label">Large</span>
<input type="radio" name="product-size" value="12" checked="checked"/>
<br/>
<span class="label">Small</span>
<input type="radio" name="product-size" value="0"/>
</div>
</form>
<div>
<h2>Cost of order:</h2>
<p id="calculation"></p>
</div>
with an input for the number of products (with an id of 'product-count') and radio buttons corresponding to the product size (named 'product-size'), you can calculate the cost and output it to an element on the page (with an id of 'calculation') by adding event handlers to the form fields to register a change in the form, and then from those handlers calling a function to perform the calculation and update the page accordingly like so:
// Cost is the count of products purchased multipled by 42 then added
// to 12 in the case that the product is large, and zero in the case
// that the product is small
function calculate_cost() {
let count = parseInt(document.getElementById('product-count').value);
if (count > 0) {
let size = 0;
for (var i = 0 ; i < document.getElementsByName('product-size').length; i++) {
if (document.getElementsByName('product-size')[i].checked) {
size = parseInt( document.getElementsByName('product-size')[i].value);
break;
}
}
let cost = count * 42 + size
document.getElementById('calculation').innerHTML = cost;
}
}
// handlers for form input change
// call calculate_cost() on change
// note that the text input is an on-change event but for radio buttons
// an onclick handler is needed for each button
for (var i = 0 ; i < document.getElementsByName('product-size').length; i++) {
document.getElementsByName('product-size')[i].onclick = function() {
calculate_cost();
}
}
document.getElementById('product-count').onchange = function() {
calculate_cost();
}
I put up a quick demo of this on CodePen here: http://codepen.io/P1xt/pen/yOKqXP/
The particularly interesting bit is that for the radio buttons, you need to add a click handler for each button separately (and it must be a click not a change handler, and to figure out which radio is currently selected, you need to explicitly check each one to see if it's 'checked'.
Note: If you're looking to do your calculations on the server-side, you'd need to submit the form, then collect the product-count and product-size from the submitted form elements in order to perform the calculation.
Why not use 0 and 12 as the values for the radio buttons, then the backend can just add the selected value?
Hey guys so I am creating input elements within a div when I click on a specific radio button with a javascript function.
It works great but when I first load the form the input elements dont appear in the div because the radio button has not been "clicked yet" although one of the radio buttons is default checked.
Basically if its checked I want them to appear, so on body load I have to call a function that checks the radio button I want default and I have to manually display the corresponding input elements that would appear if I had clicked the radio button.
This seems like a dumb work around of what I am trying to achieve, any ideas?
<body onload="startup()">
<input type="radio" name="type" onclick="createInput()" id="testradio" value="test">test</input>
<div id="area">
</div>
</body>
function startup()
{
document.getElementById("testradio").checked = true
createInput();
}
function createInput()
{
var testinput = "<input name='options' value='testing' type='checkbox'>test<br>"
document.getElementById("area").innerHTML = testinput
}
You should set the default value and then call the event. (say onchange)
something like this:
document.getElementById('elID').onchange();
this will then let your event listener fire as if the value where changed in the ui not in code.
I am in the middle of this site here http://offline.raileisure.com/
the booking section on the right hand side, I need to be able to disable the book now button until the date,duration and adult and children numbers are set..
I can't work out how to do it..
Any ideas ??
Thanks
Lee
You can bind to the change handler on all your form elements... for example:
$(':input').change(function() {
var complete;
// check if your form is complete here
// assumes the id of the button is 'bookNowButton'
if (!complete) $('#bookNowButton').attr('disabled', true);
else $('#bookNowButton').removeAttr('disabled');
});
To simplify the enable/disable functionality I'd also perhaps suggest changing your "Book Now" button to an <input type="image" /> instead.
I'm looking for a jQuery script or idea on how to create a similar window to the one facebook uses when you invite friends to an event.
So basically a dialog window that has a list of people inside and when you select your friends it changes the background color and checks the checkbox of that friend so when they submit the form I can collect the data.
Thanks,
How about something like this? Oversimplified, but this should get the point across...
Markup:
<div class="member">
<span class="member_name">Mike</span>
<input type="checkbox" class="member_checkbox" />
<input type="hidden" value="002" class="member_id" />
</div>
Member Select javascript:
// .member-selected would set a new background color
$(".member").click(function() {
$(this).addClass("member-selected");
// Find the checkbox
var checkbox = $(this).find('.member_checkbox');
// If the checkbox is checked, uncheck it, and
// if it's not, then check it
if( $(checkbox).attr("checked") != true) {
$(checkbox).attr("checked", true);
} else {
$(checkbox).attr("checked" false);
}
});
Form submission javascript:
// Create an array to hold ID numbers to submit
var add_members = [];
$(".member").each(function() {
if( $(this).find('.member_checkbox').is(":checked") ) {
add_members.push( $(this).find('.member_id').val() );
}
});
You would end up with an array of member IDs that you could then post using AJAX.
** EDIT **
In the click function (see above) there should be additional lines that check or uncheck the checkbox based on its current state.
EDIT: I made a JSBIN out of Mike's suggestion. May help you solve your problem. When a checkbox is clicked its class is alerted then changed (member-selected is added or removed, I'm using toggleClass()) and then its class is alerted again. Check it out: jsbin.com/uxuxu3/4/edit
I don't know how facebook's 'invite friends to an event' window looks these days, but I believe you will find Facebox a similar modal. Check Facebox and other, perhaps even better options, at 19 jQuery Modal Boxes to improve your UI.