Syntax for Displaying name of a textbox with alert

Question

How can i show the name "First Textbox Name", I have tried a multitude of things but nothing seems to work.

This is the text box among other textboxes.

<td>FirstTextbox Name: 
   <input id="box1" name="box1" class="nosonly" type="text" oninput="calculate()" /></td> 
</td>    

<script>
       var x =  document.getElementById("box1").WhatwouldGohere?

       alert(x);

</script>

Answer 1

Textboxes don't have a closing tag and therefore cannot have any innerHTML.

But, you can access other aspects of a textbox. Also, don't use inline HTML event attributes (onclick, onmousover, etc.). Even though you see them used everywhere, it's only because a lot of new JavaScript folks pick up bad habits. There are many reasons not to use them.

// Get a reference to the textbox
var tb = document.getElementById("box1");

// Set up the event handler in JavaScript, not HTML
tb.addEventListener("input", calculate);

function calculate(){
  // You can access HTML attributes as object properties:
  console.clear();
  
  // To get the content of the parent element, use the parentElement property
  // Then, access the textContent of that element to only get text (and not
  // nested child elements). Finally, strip off any leading or trailing 
  // spaces from that value (if desired) with .trim()
  var parentText = this.parentElement.childNodes[0].textContent.trim();
  
  alert("The text that preceeds the textbox is: " + parentText);
  console.log("The name of the textbox is: " + box1.name);
  console.log("There are " + this.value.length + " characters in the box.");
  console.log("The value of the box is: " + this.value);
}

<td>FirstTextbox Name: 
   <input id="box1" name="box1" class="nosonly" type="text"> 
</td>

But, your question has asked about the textbox's "label" and it turns out that there is actually a <label> element that you can and should use because it creates a more accessible UI and makes this even easier:

// Get a reference to the textbox and the label
var tb = document.getElementById("box1");
var lbl = document.querySelector("label[for=box1]");

// Set up the event handler in JavaScript, not HTML
tb.addEventListener("input", calculate);

function calculate(){
  // You can access HTML attributes as object properties:
  console.clear();  
  alert("The text that preceeds the textbox is: " + lbl.textContent);
  console.log("The name of the textbox is: " + box1.name);
  console.log("There are " + this.value.length + " characters in the box.");
  console.log("The value of the box is: " + this.value);
}

<td>
   <label for="box1">FirstTextbox Name:</label> 
   <input id="box1" name="box1" class="nosonly" type="text"> 
</td>

Answer 2

Well, you do a basic mistake which many people does having no experience with the DOM model. Keep in mind that the code should be executed after the DOM is initialised, so if you want to show the name of the textarea do the following as it's visible that you are using jQuery:

<td>
  <label>Label for Box 1</label>
  <textarea id="box1"></textarea>
</td>

<script>
$(function() {
   alert("My box name is "+ $('#box1').prevAll('label').html());
});
</script>

if no label tag (which is not very clever BTW):

<td>FirstTextbox Name: 
   <input id="box1" name="box1" class="nosonly" type="text" oninput="calculate()" /></td> 
</td> 

<script>
$(function() {
   alert("My box name is "+ $('#box1').parent().text());
});
</script>

Your initial code was showing that you are using jQuery.

This is a simple representation of your html combined with the code above:

alert($('<div>').html('<td>FirstTextbox Name: <input id="box1" name="box1" class="nosonly" type="text" /></td>').find('#box1').parent().text());

alerts FirstTextbox Name:

Answer 3

Try this

<script>
function calculate() {
   var x =  $('#box1').val();
   alert(x);
}
</script>

Answer 4

<script>
   function calculate() {
      var x =  $('#box1').attr('name')
      alert(x);
   }
</script>

That would alert the name of your textbox.

Or given your edit you could do:

<script>
   function calculate() {
     var x =  document.getElementById("box1").getAttribute('name');
     alert(x);
   }
</script>