I'm trying to make a simple time in/out app for some teens as part of a training program we have.
More or less what it should look like
When the user presses "ADD ANOTHER ROW", another row appears with a "Delete" button at the end. When the user clicks "Review" at the bottom, I'd like to disable all buttons above so the encoded info isn't accidentally edited before submitting, then Yes/No appear. If No is selected, the buttons are enabled again for editing. My problem is I can disable everything except for the "Delete Row" buttons.
function finalCheck() {
document.getElementById("review-button").disabled = true;
document.getElementById("add").disabled = true;
document.getElementById("wala").disabled = true;
var wala = document.getElementsByClassName("minus").length;
for(i = 0; i < wala.length; i++){
wala[i].disabled = true;
}
var final = document.getElementById("last-check").content;
var copy = document.importNode(final,true);
document.getElementById("bigGuy").appendChild(copy);
var totalHours = 0;
for (i = 0; i < content.length; i++){
totalHours = totalHours + content[i][3];
console.log(totalHours);
}
document.getElementById("total-hours").innerHTML = totalHours;
}
Here's the HTML template:
<template id="shift" class="data">
<tr class="data-body" id="extra-row">
<td>
<input type="text" class="datepicker" required>
</td>
<td>
<input type="text" class="timepicker" name="clockIn" required>
</td>
<td>
<input type="text" class="timepicker" name="clockOut" required>
</td>
<td class="calced-hours"></td>
<td text-align: center>
<button class="btn waves-effect waves-light minus red lighten-2" name="remove">Delete row</button>
</td>
</tr>
</template>
I should note, the DELETE ROW button itself does work; it will delete the relevant row.
Classname of the Delete buttons is "minus." I tried it without the var; I tried forEach (but I really don't understand fully how to use forEach...). I'm guessing the problem is because the Delete buttons are added by template, but if I try to get the length of the array for var "wala", it gives me a result. So I know the function is able to detect those buttons. I just can't get them disabled.
Related
So I have a list of items, on html page, in fact in form, something like this:
ITEM 1 - ID - "checkbox" "number box"
ITEM 2 - ID - "checkbox" "number box"
I have around 400 items like this, and I found a code to copy selected items (where checkbox is selected) to clipboard and paste them where I want. But I can't make it work with quantity. So basicaly what I would like to achieve is to copy selected items with quantity to clipboard.
Can someone please help me about this problem?
<input type="button" id="prikaz" value="show" onclick="displayMaterial();" /> button for the script
<form id="myFrm" name="myFrm"> - form id
<div id="materialValues"></div> - this shows the selected item, where you can copy it
<ul id="myUL"> - ignore this this is just how i made a list
<li><span class="item"><div class=""><table><tr> <td> ARC 4012718 P2-HD-RXR-SA </td> <td> 160771 </td> <td> <input type="checkbox" id=" 160771 " name=" 160771 " value=" 160771 | ARC 4012718 P2-HD-RXR-SA "> </td> </tr></table></div></span></li>
this is just one item from my list
</ul>
and the code: (this is not my code, i found it somewhere and it works for this purpose, but I woud like to add quantity as well, but I don't have enaught knowledge to place part of the script that would handle that, somwhere around tha IF selected part.
<script type="text/javascript">
function displayMaterial()
{
var str = '';
var elem = document.getElementById('myFrm').elements;
for(var i = 0; i < elem.length; i++)
{
if(elem[i].checked)
str += elem[i].value +"<br>";
}
document.getElementById('materialValues').innerHTML = str;
}
</script>
I'm using a bootstrap modal to add some content to products. There's a button to open a modal, which sends some of the products info thru html5 data-attributes (data-product="product name", data-product-id="99", etc).
How to open different modals based on the button you are clicking on? It should get product NUMBER and NAME and, based on the button (add, move, remove), open different fields on modal.
HTML TABLE
<tr id="1">
<td>Product A NUMBER</td>
<td>Product A NAME</td>
<td><a data-id="add" type="button" data-target="#Inventory" data-toggle="modal">Add</a></td>
<td><a data-id="move" type="button" data-target="#Inventory" data-toggle="modal">Move</a></td>
<td><a data-id="add" type="button" data-target="#Inventory" data-toggle="modal">Remove</a></td>
</tr>
<tr id="2">
<td>Product B NUMBER</td>
<td>Product B NAME</td>
<td><a data-id="add" type="button" data-target="#Inventory" data-toggle="modal">Add</a></td>
<td><a data-id="move" type="button" data-target="#Inventory" data-toggle="modal">Move</a></td>
<td><a data-id="add" type="button" data-target="#Inventory" data-toggle="modal">Remove</a></td>
</tr>
MODAL DIV
<div id="Inventory" class="modal">
<...>
<div id="FIELD-TO-SHOW-TO-ADD-BUTTON">
<label for="message-text" class="col-form-label">ADD</label>
<input type="text" name="add">
</div>
<div id="FIELD-TO-SHOW-TO-MOVE-BUTTON">
<label for="message-text" class="col-form-label">MOVE</label>
<input type="text" name="move">
</div>
<div id="FIELD-TO-SHOW-TO-REMOVE-BUTTON">
<label for="message-text" class="col-form-label">MOVE</label>
<input type="text" name="move">
</div>
</div>
JS
$('#Inventory').on('show.bs.modal', function (event) {
if (action === "add") {
$("div[id=add-inventory]").show();
$("div[id=move-inventory]").hide();
$("div[id=remove-inventory]").hide();
} else if (action == "move") {
$("div[id=add-inventory]").hide();
$("div[id=move-inventory]").show();
$("div[id=remove-inventory]").hide();
} else if (action == "remove") {
$("div[id=add-inventory]").hide();
$("div[id=move-inventory]").hide();
$("div[id=remove-inventory]").show();
};
But I don't know how JS can catch the product's data-id or if there's an better way to do that. Thanks in advance! I'm sorry, this is my very first post, although I use stackoverflow for a long time! :)
EDIT:
I think I didn't explained properly. What I need:
BUTTON A [data-tag="X", data-tag2="Y", data-tag3="Z"]
BUTTON B [data-tag="X", data-tag2="Y", data-tag3="Z"]
It doesn't matter what button I hit, it's gonna open a MODAL with a form, but I need to keep those datas from the button pressed, to be inserted as a field, so I can get all the infos from the BUTTON pressed + all the infos from the form that opens on modal.
EDIT 2 [SOLVED]:
I had 3 buttons for each product shown. One for ADD, one for MOVE and another one for REMOVE. After button clicked, a modal pops up with a form. As soon as you submit it, the JS responsible for opening the modal should get the data from this form, but it wasn't getting, until I found the solution to add something like this:
if (action === "add") {
product_amount = modal.find('#amount1').val();
} else if (action == "move") {
product_amount = modal.find('#amount2').val();
userToMove = modal.find('#userToMove').val();
} else if (action == "remove") {
product_amount = modal.find('#amount3').val();
}
Where each #amount ID refers to the button pressed to open the modal.
Thanks a lot for everyone who helped and I'm sorry I wasn't able to explain the issue properly due to my limitations with the language [english]. Thanks! :)
I don't know if this is what you need but I needed to explain more than just a comment:
to show/hide based on data attribute:
$('div[data-product="product name"]').show();
$('div[data-product="product name"]').hide();
to get the data attribute of the div:
$(".someClass").data('product');
to get any attribute you like:
$(".someClass").attr('something-product');
UPDATE on your comment:
var tag = $(".someClass").data("tag1"); //data-tag1 value of the button
$('input').attr("data-tag1",tag); //set input's data-tag1 to buttons data-tag1
make sure you specify which input you want it to be assigned to. just to make sure so it doesn't assign to any other unwanted inputs
I need help with adding a controll that checks that atleast one on the textareas is filled so that people wouldnt save blank forms. so it should controll that at least on element is checked and filled, otherwise it should give an error and wouldnt save. If anyone would have an idea how to do so, I would greatly appreciate it. The code that Im working with is down below (actually have more textareas but they are the same only with another names).
<tr>
<td valign="top" style='width: 300px;'>Family members help</td>
<%
elemText = xml.getElementFromXPath("//nursing_care/family_help/tekst");
%>
<td valign="top"><input <%=(elemText==null?"checked=\"checked\"":"") %> value="0" onclick="javascript:showText(this);" name="//nursing_care/family_help" type="radio" checked="checked">Valimata
<input <%=(elemText!=null?"checked=\"checked\"":"") %> value="1" onclick="javascript:showText(this);" name="//nursing_care/family_help" type="radio">Määratud</td>
<td>
<textarea style='width: 350px' style="display:<%=(elemText==null?"none":"block") %>" id="//nursing_care/family_help/tekst" name="//nursing_care/family_help/tekst"><%=(elemText!=null?elemText.getText():"") %></textarea>
</td>
<td><input style="display:<%=(elemText==null?"none":"block") %>" type="text" class="txt_left" id="//nursing_care/family_help/date" name="//nursing_care/family_help/date" value="<%=xml.getText("//nursing_care/family_help/date")%>" maxlength="10" size="10"
onchange="gnlDateValid(this,event); if(event.returnValue != false);" onfocus="gnlGotFocus(getCurrentDate(),this); inputChanged(this);" onkeydown="gnlKeyDown('00.00.0000',this,event);" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><input type="submit" class="button_save button" value="Salvesta" />
<input type="button" class="button" value="Sulge" onclick="window.close()" /></td>
</tr>
</tfoot>
And here is the function that shows/hides the textareas (just in case)
function showText(obj){
var elements = document.getElementsByName(obj.name);
var element = getNode(obj.name + "/tekst");
if (elements[0].checked)
element.style.display="none";
else
element.style.display="block";
var element = getNode(obj.name + "/date");
if (elements[0].checked)
element.style.display="none";
else
element.style.display="block";
}
Something like this should work.
Extend the submit button like this.
<input type="submit" class="button_save button" value="Salvesta" onclick="return submitCheck()"/>
and implement this function in your javascript file.
function submitCheck(){
var form = document.forms[0];
var textareas = form.getElementsByTagName("textarea");
for(var textarea in textareas){
if(textarea.value !== ""){
return true;
}
}
return false;
}
BTW i would recommend you to use jQuery when working with the HTML DOM ;-)
I'm creating an order form that when a button is clicked it displays an image in a separate div. The code works successfully for check boxes but with radio buttons doesn't hide the previously clicked image.
function displayImage(id) {
var el = document.getElementById(id);
if (el.style.display == "inline") {
el.style.display = "none";
} else {
el.style.display = "inline";
}
}
<tr>
<td>
<input type="radio" name="cheese" id="chkcheese" value="Yellow American" onclick="displayImage('imgamerican');" />
<label for="chkcheese">Yellow American</label>
</td>
<td>
<input type="radio" name="cheese" value="Pepper Jack" id="pepperjack" onclick="displayImage('imgjack');" />
<label for="chkjack">Pepper Jack</label>
</td>
<td>
<input type="radio" name="cheese" value="Mozzarella" id="chkmozz" onclick="displayImage('imgmozz');"/>
<label for="chkmozz">Mozzarella</label>
</td>
</tr>
<div class="cheese">
<img id="imgamerican" src="images/american-cheese-slice.png" style="display:none"/>
<img id="imgcheddar" src="images/agedcheddar.png" style="display:none"/>
<img id="imgjack" src="images/pepperJack.png" style="display:none" />
<img id="imgswiss" src="images/swisscheese.png" style="display:none" />
The click event only happens on the radio that was clicked.
You'll need to iterate the radio buttons and make sure that the deselected ones have their corresponding image hidden, or just iterate the images and hide them before showing the one that had its radio clicked.
function displayImage(id) {
var imgs = document.querySelectorAll(".cheese > img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.display = "none";
}
document.getElementById(id).style.display = "inline";
}
It looks like your problem is that you're expecting the click event to fire when a radio button becomes unchecked. But it doesn't. You'll need to specifically change the display of the last-shown cheese, but only when it's a radio button that was clicked.
This solution is kind of a hack, but it should work in this situation:
JavaScript:
var lastUnique;
function displayImage(id, unique) {
var el = document.getElementById(id);
if (unique) {
if (lastUnique) {
lastUnique.style.display = 'none';
}
lastUnique = el;
}
el.style.display = 'block';
}
Radio buttons (note the added true):
<tr>
<td><input type="radio" name="cheese" id="chkcheese" value="Yellow American" onclick="displayImage('imgamerican', true);" />
<label for="chkcheese">Yellow American</label></td>
<td><input type="radio" name="cheese" value="Pepper Jack" id="pepperjack" onclick="displayImage('imgjack', true);" />
<label for="chkjack">Pepper Jack</label></td>
<td><input type="radio" name="cheese" value="Mozzarella" id="chkmozz" onclick="displayImage('imgmozz', true);" />
<label for="chkmozz">Mozzarella</label></td>
</tr>
So, the JavaScript keeps track of the last element shown with the unique argument being truthy, and hides it when another call with unique == true happens.
Aside:
You might look into how event handling is done in the modern world. This is the old way of doing it, and it's not exactly manageable.
Also, consider looking into modularization and encapsulation techniques.
I have a working form that generates a string, and by clicking on a button it places the string inside a text area box.
I also have a reset button that suppose to reset all fields but not the text area with the strings.
Here is some of my code.
HTML:
<form>
<!--some more code and inputs-->
</tbody> </table> </p> <p> <input value="Generate URL" onclick="createURL1();" type="button">
<input name="result" size="70" class="clearit" type="text" ></input>
<input type="button" value="Add The Link" onClick="addtext();"></p>
<textarea id="t5" style="width:600px;" name="outputtext" ></textarea><br><br>
</p> </td> </tr> </tbody> </table>
<input type="reset" value="Clear" id="reset" ></input>
JavaScript:
$(document).ready(function(){
$('#reset').on('click',function(e){
e.preventDefault();
$('.clearit').val("");
});
});
I gave all the inputs that I want to reset a class (clearit) and the reset button got an ID: reset. The only field I didn't want to be reset got a different id.
it's supposed to work and its not.. Please Help :)
use this javascript function and exclude the element with id you dont want to reset and you can specify the way to reset either by left input blank or dropdown equal -1
and it works on IE and fire fox tesed
function resetLabels()
{
//mainForm is the name of form
var cells = document.mainForm.elements;
for (var i= 0; i < cells.length; i++) {
if(cells[i].name !='txtName')//for example to not reset by name
cells[i].value='';
// cells[i].className = '';
// cells[i].style.color = 'black';
// or cells[i].value='-1' for drop down
// or cells[i].name= ''; name and id to compare and exclude specific elements
// or cells[i].id= '';
//and i suggest to name like txt... and ddl...to
//know the type by name and id or just check the type
//of element by using cells[i].type
}
}