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>
Related
I cannot get the input value to go into my invitation on submit. After pressing submit the values are stored as I have checked the values in my array using
document.getElementById("volunteersName" + index).value;
all the values are storing properly.
however when I check the innerHTML using
document.getElementById("name" + index).innerHTML;
It still shows empty even though they should equal as I have set them to equal each other using
document.getElementById("name" + index).innerHTML = document.getElementById("volunteersName" + index).value;
Please help me see the light in what I'm doing wrong. Thanks
* Partial code below *
HTML
<section id="pageForm">
<form action="#">
<label for="numberOfVolunteers">Number Of Volunteers:</label>
<input id="numberOfVolunteers" type="number" onkeypress = "event()" name="numberOfVolunteers" placeholder="Enter Number Of Volunteers" />
<p id="newFields"></p>
<br>
<br>
<input class="visibility" onclick="invite()" type="button" value="Submit">
</form>
</section>
<div id="test">
</div>
<script type="text/javascript" src="js/main.js"></script>
JS
function invite() {
var volunteersName = [];
var name = [];
for (index = 1; index < volunteersName.length; index++) {
document.getElementById("name" + index).innerHTML = document.getElementById("volunteersName" + index).value;
}
}
You have a couple of issues here:
The code inside the loop in invite() will never execute because index (1) will always be more than the length of volunteersName (0)
The syntax for creating the span where the name will go is wrong. If you want to use string interpolation, you need to use ... id="name${index}" ... inside the backticks
For the first problem I suggest you use the input value from the first input to set the closing condition for the for loop:
var numberOfVolunteers = document.getElementById("numberOfVolunteers").value;
for (index = 1; index <= numberOfVolunteers; index++) {
For the second, your code should look something like the following:
inviteForm.innerHTML = `Hello <span id="name${index}"> Volunteers Name </span>!
<br/>
<br/> You have been invited to volunteer for an event held by <span id='organizationName2'>Organizations Name</span> on <span id='eventDate2'>Event Date</span>. Please come to the following website: <span id='websiteURL2'>Website URL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id='hostName2'>Hosts Name</span>`;
I am trying to create button labels based off of user input by inserting a span with the label text via js. The id's of all my buttons are numbers in a sting format so id="0", id="1", etc.
The following function will only label the first button with id="0".
gearInputs = document.getElementsByClassName('Box');
for (i=0; i<gearInputs.length; i++) {
var gearName = gearInputs[i].value,
gearButton = document.getElementById(i);
if(gearName && gearName != ''){
gearButton.innerHTML = '<span class="resultsButtons">' + gearName + '</span>';
}
}
My buttons:
<button id="0" class="buttonshowHide" onclick="showHide(this.id)"></button>
My input box:
<input placeholder="Enter Camera/Lens Model" class="Box" type="text" id="gearInput1"/>
I have also tried i.toString(); with no luck. If I enter 0 as the id in document.getElementById it will label the first button but if i put 1, 2 etc it fails whether I enter it as 1, "1", or i.toString(); where i is 1.
I am sure this is simple and I am just overlooking something.
I'm not sure if I'm reading the question wrong, excuse me if that is the case. It sounds to me like you have html elements like this:
<input class="gearInput" id ="gearInput0" value="test1">
<input class="gearInput" id ="gearInput1" value="test2">
<input class="gearInput" id ="gearInput2" value="test3">
<button class="someClass" id="0"> </button>
<button class="someClass" id="1"> </button>
<button class="someClass" id="2"> </button>
And you are wanting the output of this function to be:
<button class="someClass" id="0"> test1 </button>
<button class="someClass" id="1"> test2 </button>
<button class="someClass" id="2"> test3 </button>
And so on. The array spanHtml is useless, as it always only contains one item, since you clear it in each block of the loop. The gearNames array is also not needed unless you are using it for some other function.
I would do something like this:
gearInputs = document.getElementsByClassName('gearInput');
for (i=0; i < gearInputs.length; i++){
var gearName = gearInputs[i].value,
gearButton = document.getElementById(i);
if(gearName && gearName != ''){
gearButton.innerHTML = '<span class="resultsButtons">' + gearName + '</span>';
}
}
The if block only being to ensure they put a value into the input remove that if you don't care about that.
Heres what that would look like. Hope this helps.
https://jsfiddle.net/edh4131/70v551qp/
edit: spacing
I figured this out. I had to change the button id's from id="0", id="1", etc to id="btn0", id="btn1" etc. After I did that edh4131's solution worked fine.
I'm trying to add the rows dynamically plus auto-increment of a counter.I want to start with 1 then 2 then 3 and so on . I have added my code on plunker ,in which every time the max value is getting in first column like 4 then 1,1,2,3.Where am i going wrong ?i Want it to be 1,2,3,4.
Here is the plunker link http://plnkr.co/edit/GuDbJ3SHOPvWkHfNfd8E?p=preview
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder1").appendChild(oClone);
document.getElementById("myVal").value=_counter;
}
<div id="placeholder1">
<div id="template">
<div>
Value:<input type="text" id="myVal" placeholder="1">
Quantity:<input type="text" placeholder="Qty">
<input type="button" onClick="Add()" value="Click! ">
</div>
</div>
I think it is because you have multiple divs with the id="myVal". The id attribute should be unique on the page. If not, your page will still load, but you may have unexpected behavior.
You are changing the id of the template div, but not the myVal div.
I assume you are looking for something like this:
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder1").appendChild(oClone);
oClone.getElementsByClassName("myVal")[0].value = _counter;
}
<div id="placeholder1">
<div id="template">
<div>
Value:
<input type="text" class="myVal" placeholder="1">Quantity:
<input type="text" placeholder="Qty">
<input type="button" onClick="Add()" value="Click! ">
</div>
</div>
</div>
In your original you are cloning your template with the same id for the input. So when you do document.getElementById("myVal").value=_counter;, you only get the first input. I changed it to use class instead and get the input with the appropriate class that is a child of the cloned node.
I'm building a simple shopping cart where visitors can select a few items they want, click on the "Next" button, and see the confirmation list of things they just selected. I would like to have the confirmation list shown on each line for each item selected.
HTML selection
<div id="c_b">
<input type="checkbox" value="razor brand new razor that everyone loves, price at $.99" checked>
<input type="checkbox" value="soap used soap for a nice public shower, good for your homies, price at $.99" checked>
<input type="checkbox" value="manpacks ultimate choice, all in 1, price at $99">
</div>
<button type='button' id='confirm'>Next</button>
HTML confirmation list
<div id='confirmation_list' style='display:none;'>
<h2>You have selected item 1</h2>
<h2>Your have selected item 2 </h2>
</div>
JS
$(function(){
$('#confirm').click(function(){
var val = [];
$(':checkbox:checked').each(function(i){
val[i] = $(this).val();
});
});
});
I ultimately want to replace the words 'Your have selected item 2' in h2s with the values selected from each check box. With the code above I'm able to collect the values of each checkbox into an array val, but having difficulty looping through and displaying them.
Any advice would be appreciated.
Try
$(function () {
$('#confirm').click(function () {
var val = [];
var els = $('input:checkbox:checked').map(function (i) {
return $('<h2 />', {
text: 'You have selected item \'' + this.value + '\''
})
}).get();
$('#confirmation_list').empty().append(els).show()
});
});
Demo: Fiddle
Try this
<div id="c_b">
<input type="checkbox" value="razor brand new razor that everyone loves, price at $.99" checked>
<input type="checkbox" value="soap used soap for a nice public shower, good for your homies, price at $.99" checked>
<input type="checkbox" value="manpacks ultimate choice, all in 1, price at $99">
</div>
<button type='button' id='confirm'>Next</button>
<div id='confirmation_list' style='display:none;'>
</div>
Your JS code should be
$(function () {
$('#confirm').click(function () {
$("#confirmation_list").empty();
$('input:checkbox:checked').each(function (i) {
$("#confirmation_list").append("<h2>You have selected item '" + $(this).val() + "'</h2>");
});
$("#confirmation_list").show();
});
});
Fiddle
Hi all I have a form in which I dynamically add in a new row consisting of a text box and check button on button press. However I need some sort of way to know which checkbuttons were pressed in the post data and therefore need a value field consisting of an ID on each of the the check buttons, code is seen below:
<div id='1'>
<div class="template">
<div>
<label class="right inline">Response:</label>
</div>
<div>
<input type="text" name="responseText[]" value="" maxlength="400" />
</div>
<div>
<input type="radio" name="responseRadio[]" value="" />
</div>
</div>
<div>
<input type="button" name="addNewRow" value="Add Row" />
</div>
</div>
JS to add new row:
var $template = $('.template');
$('input[type=button]').click(function() {
$template.clone().insertAfter($template);
});
can anyone suggest a good way to help me know in the post data which text field, links to which check button, and to know if it was pressed?
at the moment if you were to add 3 rows and check row 3 I have no way of identifying that row three was the button pressed - This is my issue
after you cloned it, change the name so you know about this input
also it's good to have a counter for naming:
like : 'somename[myInput' + counter + ']'
update:
var counter = 0;
var $template = $('.template');
$('input[type=button]').click(function() {
counter++;
$template.clone().attr('name' , 'somename[myInput' + counter + ']').insertAfter($template);
});
now you have array named:somename which you can have a loop over its content on your form handler.