javascript change name of id element

Question

I've got a form which display's an input field in a for loop in php. It is a date field. So if the user clicks on the date field I want it to automatically input today's date. The problem I am having since I don't really know javascript is my input fields' name in php changes everytime in the for loop to myText1, myText2, etc., how do I change it in javascript? (Eg. document.getElementById("myText1"), document.getElementById("myText2")

Form Field

for ($x = 1; $x <= 15; $x++) {
    echo '<td><font size="1"><input id="myText' . $x . '" name="myText' . $x . '"' . ' type="text" value="" onClick="myFunction()"/></font></td>';
}

Javascript

<script>
function myFunction() {
    document.getElementById("myText").value = "Johnny Bravo";
}
</script>

Answer 1

You pass a reference to the element into the function. In the onclick , you have that reference as this , so:

for ($x = 1; $x <= 15; $x++) {
    echo '<td><font size="1"><input id="myText' . $x . '" name="myText' . $x . '"' . ' type="text" value="" onClick="myFunction(this)"/></font></td>';
    // >>-----------------------------------------------------------------------------------------------------------------------^^^^
}

Then

function myFunction(element) {
    element.value = "Johnny Bravo";
}

Answer 2

Premising that you should avoid to define inline event handlers and mix server-side code with markup, you could pass this parameter to the function you call at the click event

...onclick="myFunction(this)"

then use it as an argument inside your function

<script>
function myFunction(t) {
    t.value = "Johnny Bravo";
}
</script>

Answer 3

You need to pass id in your myFunction()

echo '<td><font size="1"><input id="myText' . $x . '" name="myText' . $x . '"' . ' type="text" value="" onClick="myFunction(this)"/></font></td>';

<script>
function myFunction(uid) {
    document.getElementById(uid).value = "Johnny Bravo";
}
</script>

Answer 4

You can bind same input using this

for ($x = 1; $x <= 15; $x++) {
    echo '<td><font size="1"><input id="myText' . $x . '" name="myText' . $x . '"' . ' type="text" value="" onClick="myFunction(this)"/></font></td>';
}

Script

<script>
function myFunction(obj) {
        obj.value = "Johnny Bravo";
}
</script>

Answer 5

ich would prefer to set a class for each input element you want to change by focus eg and bind an event for these types.

<table>
  <tr>
    <td>
      <input type="text" value="click me" class="change_js"/>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="click me" class="change_js"/>
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" value="click me" class="change_js"/>
    </td>
  </tr>
</table>

and the javascript code

var elements = document.getElementsByClassName('change_js')

for (var i = 0, len=elements.length;i<len;i++) {
  elements[i].addEventListener('focus',function(){
    this.value="Johnny Bravo";
  })

}

working example: http://jsfiddle.net/19uqca7z/

for detailed information about javascript code:

https://developer.mozilla.org/de/docs/Web/API/Document/getElementsByClassName

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 6

use the below code in your javascript

<script>
function myFunction() {
    this.value = "Johnny Bravo";
}
</script>

Now your function is independent of what you give in PHP code, this variable will always refers to the element that was clicked