Develop Reference

Get the text from label of Radiobutton

I have a couple of radio button below. I want to get the text from the radio button I have chosen. For example: House Espresso or Guest Espresso. I have tried to use getElementsByName and for loop to get the checked value but it seems to return nothing.
Here is my HTML code:
<div class="type">
<p>Type<p>
<input type="radio" id="houseEspresso" name="singleEspresso" checked="checked"onclick="addProduct(this)">
<label for="houseEspresso">House Espresso</label><br>
<input type="radio" id="guestEspresso" name="singleEspresso" onclick="addProduct(this)">
<label for="guestEspresso">Guest Espresso</label><br>
</div>
And here is my Javascript code:
var type = document.getElementsByName("singleEspresso")
for (var i=0; i<type.length; i++){
if(type[i].checked){
var title_type=type[i].innerText
console.log(title_type)
}
}
Can anyone give me an idea to fix it? Thank you!

The problem is that you're trying to get innerText from the <input>, which has none. You need to get the <label>'s text:
for (var i=0; i<type.length; i++){
if(type[i].checked){
var title_type=type[i].nextElementSibling.innerText
console.log(title_type)
}
}

You need to find a checked input, for that you can use :checked css selector. Then you can pick any value from input DOM element which ties it to label (in your case it's id). And basing on the id you can find corresponding label.
const selectedRadioInput = document.querySelector('[name=singleEspresso]:checked');
const inputId = selectedRadioInput.id;
const label = document.querySelector(`[for=${inputId}]`);
console.log(label.innerText);
Working demo: https://jsfiddle.net/yo18mx9k/2/

You can set a value to input radio: <input type="radio" value="1">
Then just get the buttons and see which one is checked, like this:
let house = document.getElementById('houseEspresso');
let guest = document.getElementById('guestEspresso');
if (house.checked) {
console.log(house.value);
} else if (guest.checked) {
console.log(guest.value);
}
However, I would recommend that you take a look at jQuery so you can make it easier:
$("input[name='singleEspresso']:checked").val();

Use image as a hyperlink and to save a textbox input value?

In my website, I have a textbox which I'm using to ask the user for their name. Below I have 2 images, a cancel "button" which is just an image which has an tag to take it back to the index, and a Go image which is linked to another HTML page where the input taken from the text box will be used to fill in a paragraph. This page is linked below:
I am fine with how the cancel image is functioning but is it possible for me to use the Go image to take me to my other HTML page as well as to store the data input into the "your name" text box?
<div class="name_input_box">
<input type="text" placeholder="Your name" id="name" required />
<label for="name" class="label_name">
</label>
</div>
my code for the input box^
<a href="Add_page.html">
<img src="assets/Go_button.png" img style="height:35%; width:35%;">
</a>
My code for the "go" image^
I appreciate this might seem simple but I can't find any video tutorials on how to tackle this, many thanks to anyone who takes the time to help me on Easter Sunday :)

Either use localStorage or just have a form
<form action="Add_page.html">
<div class="name_input_box">
<label for="name" class="label_name"><input type="text" placeholder="Your name" name="name" required /></label>
<input type="image" src="assets/Go_button.png" img style="height:35%; width:35%;">
</div>
</form>
and use the location.search to get the name.

If I understand your questions well, I think this is what you are looking for.
Local storage stores your data for your and you can get your data any time you need it.
try this out linking this script to your html code and making reference to the right id's.
// get data from the input tag/local storage value
var input_data = document.getElementById('input_data').value
//local storage key
var key_name = 'UserName';
// paragraph to fill input ..you can p tag for this
var result_screen = document.getElementById('result_screen')
// image link / button
var goBtn = document.getElementById('goBtn');
goBtn.onclick = function () {
// To check for empty input value
if (key_name && value) {
localStorage.setItem(key_name, input_data);
location.reload();
}
}
// loop through the input value entered by users
for (var i = 0; i < localStorage.length; i++) {
var key_name = localStorage.key_name(i);
var input_data = localStorage.getItem(key_name);
result_screen.innerHTML += `${key_name}: ${value}<br>`;
}

creating a selected dhtmlXCombo

I need to create a drop down list combo box using dhtmlx and populate it from a database with information instead of adding it in the code itself.
I can get as far as creating the dhtmlXCombo but it does not show up any information even if I put dummy text in to see and if the it does it crashes the program the moment you click on it.
I have tried several different variations of creating the selection process and then tried to create a new combo section in the DHTMLx but still it shows nothing.
//tDetailsGrid.cellById(0, 2).setValue('<select onchange="tbAddTrRegion "><option value="selTr" selected="selected">Cape Town</option></select>')//(this.option[this.selectedIndex].value);
//tDetailsGrid.cellById(0, 2).setValue('<select id = "tbAddTrRegion" onfocus="return checkTrEntryEditing();" style="width:100%"/><option></option><select/>');//<input id = "tbAddTrRegion" type="Text" value = "" onfocus = "return checkTrEntryEditing();" style="width:100%"/>
// tDetailsGrid.cellById(0, 2).setValue('<selection id = "tbAddTrRegion" type="Text" value="" onfocus="return checkTrEntryEditing();" style="width:100%"/><option><select/>');//<input id = "tbAddTrRegion" type="Text" value = "" onfocus = "return checkTrEntryEditing();" style="width:100%"/>
// tDetailsGrid.cellById(0, 2).setValue('<select onchange= "tbAddTrRegion" onfocus="return checkTrEntryEditing();" style="width:100%"/><option></option><select/>');//<input id = "tbAddTrRegion" type="Text" value = "" onfocus = "return checkTrEntryEditing();" style="width:100%"/>
I have currently commented them out at the moment but I only use one at time to find the suitable working one.
i then add:
TrRegion = new dhtmlXCombo('tbAddTrRegion', "Region", "100px");
TrRegion.attachEvent("onselect", function () { this.select(); });
$("#tbAddTrRegion").change(function () { region = $("#tbAddTrRegion option:selected").val(); });
I have created a somewhat a page method as I think that is the right way to go about doing it to get the info from the database per say but am not 100% sure.
PageMethods.GetTrRegionList(onGetTrRegionList);
this then goes to a function:
function onGetTrRegionList(result)
{
var $tbAddTrRegion = $("#tbAddTrRegion");
}
but at the moment the function is not connected to it at the moment because if the dummy values is not working then the function wont work either. The function would then send information to get the data back into the list so the user can select which ever one they would like.

pls use the below code to add options to the combo
var combo2=tDetailsGrid.getColumnCombo(2);
combo2.readonly(true,true);
combo2.addOption("selTr","Cape Town");
combo2.addOption("selTr1","Cape Town1");
combo2.setComboText("Cape Town");// for selected option
combo2.setComboValue("selTr");

Excel data into html output

I have managed to find out how to pull data from a excel file into HTML.
I am now trying to look how to search for values within a set of cells. Does anyone know how to achieve this?
Thanks in advance!

jQuery is likely going to help you with that. when building the HTML i would also add data-[somethingHelpfulWhenSearching] or add class values that could help.
then you can search for the item by class
$('.[searchableClassName]')
or by data attribute:
$('[data-[somethingHelpfulWhenSearching]') //only looking that the tag exists
$('[data-[somethingHelpfulWhenSearching]="something im looking for"') //only looking that the tag and checking the value
hope this helps

From the way you worded the question, it sounds like you have a table in your HTML, and you just want to loop over all of the cells to check which cells contain a given value, and return those DOM nodes that contain the provided search string within their text content. If that's an accurate interpretation, here is a Vanilla JS solution:
function findCells(str) {
var allCells = document.querySelectorAll("td");
var matchingCells = [];
for (var i = 0; i < allCells.length; i++) {
if (allCells[i].textContent.indexOf(str) !== -1) {
matchingCells.push(allCells[i]);
}
}
return matchingCells;
}

<html>
<script>
function mytest1() {
var Excel, Book; // Declare the variables
Excel = new ActiveXObject("Excel.Application"); // Create the Excel application object.
Excel.Visible = false; // Make Excel invisible.
Book = Excel.Workbooks.Add() // Create a new work book.
Book.ActiveSheet.Cells(2, 2).Value = document.all.my_textarea1.value;
Book.SaveAs("C:/temp/TEST.xls");
Excel.Quit(); // Close Excel with the Quit method on the Application object.
}
function mytest2() {
var Excel;
Excel = new ActiveXObject("Excel.Application");
Excel.Visible = false;
form1.my_textarea2.value = Excel.Workbooks.Open("C:/temp/TEST.xls").ActiveSheet.Cells(1, 1).Value;
Excel.Quit();
}
</script>
<body>
<form name="form1">
<input type=button onClick="mytest1();" value="Send Excel Data">
<input type=text name="my_textarea1" size=70 value="enter ur data here">
<br><br>
<input type=button onClick="mytest2();" value="Get Excel Data">
<input type=text name="my_textarea2" size=70 value="no data collected yet">
</form>
</body>
</html>

Since you're already using jQuery, try DataTables, which is a jQuery plugin and does a lot more than filtering for you. It allows for both client side and server side filtering, so it's not a problem if your table is large.

javascript: use getElementByID to populate multiple divs

is there a way to write the same thing clientside using javascript to multiple divs or multiple spots on a page?
I have a php script outputting rows from a database. To edit the contents, I would like to insert a checkbox before each row as with the iphone edit contacts and to do it quickly, I'm trying to use javascript to populate a div with a checkbox before each row using getElemenByID.
One problem is you cannot have more than one div of the same name on a page so I can't write once and have it populate multiple divs of the same name. If I give divs different names than I have to write multiple times which is not appealing especially as the number of rows may vary.
As a related question would checkboxes inserted using javascript even work?
Here is non working code:
js
function edit() }
var box = '<input type="checkbox name=num[]>';
var target = "checkbox";
document.getElementById(target).innerHTML = box;
return;
}//end function
html (generated by PHP from dbase)
<form action="edit.php" method="post">
<a href="javascript:void" onclick="edit()";>edit</a>
<div id="checkbox"></div>Row1 contents<br>
<div id="checkbox"></div>Row2 contents<br>
<form type = "submit" value="Edit">
</form>
Does anyone know a way to do this ie make boxes appear that can then be selected for submission?
Many thanks for any suggestions.

Should be generated using PHP instead, but...
HTML
I'm guessing that you want to use a span element (not a div) for your checkbox placeholder, otherwise you'd have a checkbox on one line, and then "Row1 contents" below the checkbox, versus having the checkbox next to the text.
[X]
Row 1 Contents
versus (span)
[X] Row 1 Contents
<form action="edit.php" method="post" name="frmRows" id="frmRows">
edit
<span class="checkbox"></span>Row1 contents<br>
<span class="checkbox"></span>Row2 contents<br>
<input type = "submit" value="Edit">
</form>
JavaScript
It's not recommended to use .innerHTML in JavaScript unless absolutely necessary (not supported in all browsers, and there are better ways to accomplish the same task.)
function edit() {
var newCb;
var i;
var checkboxList = document.getElementsByClassName( 'checkbox' );
for ( i = 0; i < checkboxList.length; i++ ) {
newCb = document.createElement( 'input' ); // Create a new input element
newCb.setAttribute( 'type', 'checkbox' ); // Set attributes for new element
newCb.setAttribute( 'value', 'SomeValueHere' );
newCb.setAttribute( 'name', 'checkboxName' );
newCb.setAttribute( 'id', 'checkbox-' + i );
checkboxList[i].appendChild( newCB ); // Add checkbox to span.checkbox
}
}

The ID attribute must be unique on each page. You could use the class attribute like this:
<div class="checkbox"></div>Row1 contents<br>
<div class="checkbox"></div>Row2 contents<br>
and then you can use
var check = getElementsByClassName('checkbox');
for (var i=0; i< check.length; i++) {
check[i].innerHTML = box;
}
But... this will not work in IE < 9. If you are using a framework like jQuery they already implemented a workaround for this but with pure JS you have to implement this yourself.
jQuery example
HTML
<div class="checkbox"></div>Row1 contents<br>
<div class="checkbox"></div>Row2 contents<br>
JS
var box = '<input type="checkbox" name="num[]" />';
$(".checkbox").html(box);

The HTML
The first thing to do is to update the generated HTML. In HTML element id attributes should be unique just like field names inside a form. To classify multiple elements as similar you should use the class attribute.
Here is an example of how you could structure the HTML.
<form action="edit.php" method="post">
edit
<div id="row1Identifier" class="editCheckbox"></div>Row1 contents</br>
<div id="row2Identifier" class="editCheckbox"><?div>Row2 contents</br>
<input type="submit" value="Submit">
</form>
The javascript
Using document.getElementsByClassName will return a list of elements with the matching class.
​function edit () {
// set up the variables used in this function
var checkboxDivs = document.getElementsByClassName('editCheckbox'),
i,
loopDiv;
// make the change to each div
for (i = 0; i < checkboxDivs.length; i += 1) {
loopDiv = checkboxDivs[i];
loopDiv.innerHTML = '<input type="checkbox" name="' + loopDiv.id + '">';
}
}​

Even if you could do it with a single line (using jQuery, for exemplo), you would actually be running a loop through all the divs (that's the only way to change something in various elements: change it in each one).
So you can do this with pure JavaScript using a loop to run the modifications in all the divs, getting them by id (the faster way):
for(var i = 0; i < numberOfDivs; i++){
document.getElementById("myElement" + i).innerHTML = box; //concatenating i to a base id
}
You could also use another slower techniques to get elements by tag name or class, or even use a lib such as jQuery.

If you use jquery:
function edit() {
// box = '<input type="checkbox name=num[]>';
var target = "checkbox";
$(".cb").html(box);
return;
}//end function
<form action="edit.php" method="post">
edit
<div class="cb" id="checkbox">aa</div>Row1 contents<br>
<div class="cb" id="checkbox">bb</div>Row2 contents<br>
</form>