I have a table with 3 x 3 cells. Each cell contains a button in 1-9, when clicking on any button, the value will be appended to an input textbox.
I tried to trigger the onmouseout event in the table but that did not work. I also tried to add a div outside the table, to capture the onmouseout event.
How can I use JavaScript to trigger whether the client cursor is still over the table?
What I want is after the user clicks something in the buttons and the mouse leaves the table, I need to validate what the client clicked.
If you set the OnMouseout event on the table it will be triggered when you move the cursor over an object within the table since the cursor is no longer over the table directly.
I'm not sure what you want to do here. Do you want to raise an event when you click a button or do you want to raise an event when the cursor moves outside the table?
Edit:
The following code will raise an event every time a button is clicked.
The myClickEvent function will know which button was clicked:
<html>
<head>
<script>
function myClickEvent(obj) {
document.getElementById("myTextBox").value += obj.value;
}
</script>
</head>
<body>
<table>
<tr>
<td><input type="button" value="1" onClick="myClickEvent(this);"></input></td>
<td><input type="button" value="2" onClick="myClickEvent(this);"></input></td>
<td><input type="button" value="3" onClick="myClickEvent(this);"></input></td>
</tr>
<tr>
<td><input type="button" value="4" onClick="myClickEvent(this);"></input></td>
<td><input type="button" value="5" onClick="myClickEvent(this);"></input></td>
<td><input type="button" value="6" onClick="myClickEvent(this);"></input></td>
</tr>
<tr>
<td><input type="button" value="7" onClick="myClickEvent(this);"></input></td>
<td><input type="button" value="8" onClick="myClickEvent(this);"></input></td>
<td><input type="button" value="9" onClick="myClickEvent(this);"></input></td>
</tr>
</table>
<input type="text" id="myTextBox"></input>
</body>
</html>
try to add onmouseout event for the control that you want to validate and also you can use hover css style to solve that.
Related
I am working on angularjs application. I have a radio buttons, based on the selection of radio button I need to show the results.
Issue is when I change the radio button, it's not calling the js code.Unable to trace the error/issue and no errors are shown on the console.
Below I'm sharing the entire code, any suggestions would be helpful.
html:
<table>
<tr>
One <input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'> <br>
Two: <input type="radio" ng-model="value" value="bar" ng-change='newValue(value)'>
</tr>
</table>
Angular doesn't recognize your ng-model or ng-change because your <tr> doesn't contain any <td>. Simply wrap your inputs in a <td> and it should work:
<tr>
<td>
ALL <input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'> <br>
Laptop,desktop,server: <input type="radio" ng-model="value" value="bar" ng-change='newValue(value)'>
</td>
</tr>
I was trying to have a submitting button to set a radio input field before submitting the form. It sets correctly the check on the radio btn, but when it submits the form, it doesn't take the value of the radio field.
Here is some code I am using:
$('.groupAttributeBtn').click(function(){
$(this).closest('.radioContainer').find('.attribute_radio').prop("checked", true);
getProductAttribute();
});
And the HTML is made of rows of a table with N buttons
<tr class="radioContainer">
<td style="width:40%;">
<span>Package 2 kg</span>
<input type="radio" class="attribute_radio" name="weight" value="2" />
</td>
<td><span class="costoAttributo">23</span></td>
<td style="width:40%;text-align:right;">
<button type="submit" name="Submit" class="exclusive btn btn-outline-inverse groupAttributeBtn">
<span>Add to cart</span>
</button>
</td>
</tr>
Any suggestion? How can I have the radio correctly set and then the button submit THAT value?
It now takes the previously selected one.
I should probably mention that I am operating on the product.tpl template page of a Prestashop installation.
<button type="button" name="Submit" class="exclusive btn btn-outline-inverse groupAttributeBtn">
use button type instead of submit
html:
<tr id="head-58">
<td style="width:150px;">
<input type="button" name="delete" class="delete_person" value="58" />name<button type="button" style="margin: 1px 35px 5px;" name="delete" value="58" class="delete_icon button_style">Delete</button>
</td>
<td>
<input type="checkbox" name="first_aid" id="id_first_aid" />FirstAid
</td>
<td>
<input type="checkbox" name="sick_bay" id="id_sick_bay" /Sick bay
</td>
<td>
<input type="checkbox" name="ambulance" id="id_ambulance" />Ambulance
</td>
</tr>
Here onclicking the delete_person class,i want to show the hidden button with class delete_icon.Since class delete_icon can have more than one,i need to show the hidden button form clicked element.I tried with $this.closest('tr').find(".delete_icon").toggle(); which is not working.
Use:
$this.parents('tr').find(".delete_icon").toggle();
Your delete button is not a child of tr. Move it into tr, or use:
$(this).closest('tr').next('.delete_icon')
There is no $this variable unless you create it yourself. this refers to the target of the event, so use it in the jQuery function to create a jQuery object containing it:
$(this).closest('tr').find(".delete_icon").toggle();
However, you also need to move the button inside the table row for that to work. Now it looks like it's inside the table but outside any table cell, which is invalid HTML. (Some browsers may put it inside some table cell, other may move it outside the table entirely. The result is unpredictable, so unless you move the button inside a cell, it's not possible to write code that accesses it.)
Since the button is after the <tr>...</tr>
Use:
$(this).parent().next().toggle()
I have a table that I need to make focusable by tabbing. Right now as I tab through my page it will jump over the table entirely. I have added a href="#" and that allows tab focus on the element I put that on, but that breaks my onclick Javascript that I have. Is there any other way to do this other then doing tab indexing?
I didn't understand your questions entirely but if you are talkinf about form fill ups then use this method, and tab the input fields with a tab.. You can also change tab numbers accordingly,
<form>
<table>
<tr>
<td><input tabindex="1" name=""/></td>
<td><input tabindex="3" name=""/></td>
</tr>
<tr>
<td><input tabindex="2" name=""/></td>
<td><input tabindex="4" name=""/></td>
</tr>
</table>
I want to disable a set of checkbox based on selection of one textbox and enable the disabled ones if the checkbox is unchecked.
In the code below. If someone checks the checkbox for project cost under change this parameter then checkbox for project cost under Generate simulated value for this param
should be disabled and all the checkboxes under change this parameter should be disabled except for checked one. Similarly this should be done each parameter like Project cost,avg hours,Project completion date, hourly rate etc.
One way i could think of was of on the click function disable each checkbox by the id. Is there a better way of doing it?
<table>
<tr>
<td></td>
<td></td>
<td>Change this parameter</td>
<td>Generate simulated value for this param</td>
</tr>
<tr>
<td>Project cost</td>
<td><input type ="text" id ="pc"/></td>
<td><input class="change" type="checkbox" name="chkBox" id="chkBox"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1" id="chkBox1"></input></td>
</tr>
<tr>
<td>Avg hours</td>
<td><input type ="text" id ="avghrs"/></td>
<td><input class="change" type="checkbox" name="chkBoxa" id="chkBoxa"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1a" id="chkBox1a"></input></td>
</tr>
<tr>
<td>Project completion date</td>
<td><input type ="text" id ="cd"/></td>
<td><input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1b" id="chkBox1b"></input></td>
</tr>
<tr>
<td>Hourly rate</td>
<td><input type ="text" id ="hr"/></td>
<td><input class="change" type="checkbox" name="chkBoxc" id="chkBoxc"></input></td>
<td><input class="sim" type="checkbox" name="chkBox1c" id="chkBox1c"></input></td>
</tr>
</table>
Thanks
Prady
If you use a naming convention for either your id or name attributes, you can probably use the various attribute substring selectors to select the checkboxes. For instance:
$(":checkbox[name^=foo]").attr("disabled", true);
...will disable all checkboxes whose name starts with "foo" (so, "foo1", "foo2", whatever). Or of course, you could use a class, etc.
You might be able to make that a bit more efficient if you can contain it to the table:
$("selector_for_table").find(":checkbox[name^=foo]").attr("disabled", true);
For instance, if you added a "checkboxTable" id to the table:
$("#checkboxTable").find(":checkbox[name^=foo]").attr("disabled", true);
More about attribute selectors:
jQuery docs
CSS3 docs (jQuery supports nearly all of CSS3, and then some)
Alternately, I can't quite tell from your question (you seem to mention checkboxes that aren't shown in the given markup), but if all of the checkboxes you want to act on are within the same table row as the one that was clicked, you can use traversal within the row to find the checkboxes to enable/disable.
For example, this change handler will disable all other checkboxes on the same table row as the one that fired the event:
$("selector_for_checkboxes").change(function() {
var $this = $(this),
row = $this.parents("tr");
row.find(":checkbox").not($this).attr("disabled", this.checked);
});
Live copy
This one will do the same thing, but skipping any checkboxes that are already checked:
$(":checkbox").change(function() {
var $this = $(this),
row = $this.parents("tr");
row.find(":checkbox:not(:checked)").not($this).attr("disabled", this.checked);
});
Live copy
Ok, so if #chkBox is checked then you want to disable all checkboxes with the class "change" and the one for "sim" on the same row.
$('#chkBox').click(function(){
var paramChangeBoxes = $('input:checkbox.change');
if ($(this).is(':checked')) {
paramChangeBoxes.attr('disabled', 'disabled');
$('#chkBox1').attr('disabled', 'disabled');
}
else {
paramChangeBoxes.removeAttr('disabled');
$('#chkBox1').removeAttr('disabled');
}
});