Javascript function to fill text box on button click

Question

I want to write a javascript function in order to fill the text boxes taking values from the variables from21, from22, .... The text boxes whose values are not available (say from11, from12,... etc) should remain blank. Actually if add value='$from21', then the boxes will be filled onload. But I want the boxes to remain empty onload. These should be filled only on button click.

<?php
for ($rn = 2; $rn <= 4; ++$rn) {
    for ($slot = 1; $slot <= 5; ++$slot) {
        ${"from" . $rn . $slot} = $slot + $rn;
        ${"no" . $rn . $slot}   = $slot - $rn;
    }
}
?>

    <html>
    <script type="text/javascript">

    function fun()
    {


    }

    </script>
    </html>
    <?php
echo "<body>
     <input type='text' id='from11'/> <input type='text' id='no11'/>  <br/>
     <input type='text' id='from12'/> <input type='text' id='no12'/>  <br/>
     <input type='text' id='from13'/> <input type='text' id='no13'/>  <br/>
     <input type='text' id='from14'/> <input type='text' id='no14'/>  <br/>
     <input type='text' id='from15'/> <input type='text' id='no15'/>  <br/>
     <input type='text' id='from16'/> <input type='text' id='no16'/>  <br/>

     <input type='text' id='from31'/> <input type='text' id='no31'/>  <br/>
     <input type='text' id='from32'/> <input type='text' id='no32'/>  <br/>
     <input type='text' id='from33'/> <input type='text' id='no33'/>  <br/>
     <input type='text' id='from34'/> <input type='text' id='no34'/>  <br/>
     <input type='text' id='from35'/> <input type='text' id='no35'/>  <br/>
     <input type='text' id='from36'/> <input type='text' id='no36'/>  <br/>
      ";
?>
     <html>
     <input type="button" value="Fill" id="fun1" onclick="fun( )"/>

       </html>
       <?php
echo "</body>";
?>

Instead of variables, you should use object and store these value in it — Rajesh Dixit
– Rajesh Dixit, Commented Jan 12, 2016 at 9:41

Daniel PurPur · Accepted Answer · 2016-01-13 09:21:02Z

2

jQuery would be much easier. you can store the values in hidden inputs and on click populate all the inputs store here:

<input type="hidden" id="value1" value="<?php echo $value1?>" name="value1">

populate here:

<input type="text" id="input1" value="" name="input1">

here are the javascript ones:

you have two choices, either collect the text on click within the function or pass the text to the function. 1- collect the text within the function

function populateTextarea() {
    //get the text by id or predefined or however you wish or passed to function
    var txt = document.getElementById("result").value;

    document.getElementById("ID of the textarea").value = txt;
 }
<input type="button" value="xxxxx" name="jajaj" onclick="populateTextarea()">

OR 2- pass the text to the function

function populateTextarea(txt) {
        //get the text by id or predefined or however you wish or passed to function


        document.getElementById("ID of the textarea").value = txt;
     }


<input type="button" value="xxxxx" name="jajaj" onclick="populateTextarea(document.getElementById('inputID').value)">

You can do this in million ways but below is how I would approach it for someone with your experience:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">

  </style>
</head>
<body>
  <?php
    $value1 = 'this is value 1';
    $value2 = 'this is value 2';
  ?>
  <form>

      <div id="hiddenfieldsDiv">
        <input type="hidden" id="value1" value="<?php echo $value1; ?>" name="value1">
        <input type="hidden" id="value2" value="<?php echo $value2; ?>" name="value2">
      </div>

      <div id="visiblefieldsDiv">
        <input type="text" id="input1" value="" name="input1">
        <br/>
        <input type="text" id="input2" value="" name="input2">
      </div>

      <input type="button" value="Populate" name="button" onclick="populateTextarea()">

  </form>


  <script type="text/javascript">
    function populateTextarea() {

      var element = document.getElementById("hiddenfieldsDiv");
      var numOfChildren = element.childElementCount;

      for (var i=1; i <= numOfChildren; i++) {

        txt = document.getElementById('value'+i).value;
        document.getElementById('input'+i).value = txt;
      }

    }

  </script>

</body>
</html>

edited Jan 13, 2016 at 9:21

answered Jan 12, 2016 at 9:52

Daniel PurPur

5293 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Baptu Over a year ago

Not clear to me. Not getting the reference of 'result', 'ID of the textarea', 'inputID'

Daniel PurPur Over a year ago

do you know "document.getElementById" function in javascript? if not i suggest you read through that function in W3School. this is one of the most important functions of javascript. and mark my answer correct if it is so please.

Daniel PurPur Over a year ago

I just posted the whole code at the end of my answer.

Baptu Over a year ago

I am facing problem as I have multiple text values. How to populate all possible boxes with one button

Daniel PurPur Over a year ago

Check my updated code that should do it. I have done it in a way that matches your experience. do not forget to mark it correct please.

|

Collectives™ on Stack Overflow

Javascript function to fill text box on button click

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related