How to populate form with generic data on clicking a button in javascript?

Question

I am working on a form (here is the fiddle) which is designed through html/php.

The snippets of the html/php code belonging to the form is:

echo '<table class="table table-striped"><thead class="thead-dark"><tr><th scope="col"><a class="btn btn-primary" style="float:right;" role="button">Insert ABC</a></th></tr></thead><tbody><tr><td width="*" valign="top">';   

    echo '<form action="add.php" id="myform" method="post">';  // Form START
    echo '<input name="wdate" type="hidden" id="wdate" value="'.$this_date.'">';

        echo '<div class="form-row">';
        // Titles
        echo '<div class="form-group col-md-6"><label for="title_en">Title (EN)</label><input name="title_en" type="text" id="title_en" value="" class="form-control"></div>';
        echo '<div class="form-group col-md-6"><label for="title_fr">Title (FR)</label><input name="title_fr" type="text" id="title_fr" value="" class="form-control"></div>';
        echo '</div>';
        echo '<div class="form-row">';

        // Descriptions
        echo '<div class="form-group col-md-6"><label for="description_en">Description (EN)</label><textarea rows="3" name="description_en" id="description_en" class="form-control"></textarea></div>';
        echo '<div class="form-group col-md-6"><label for="description_fr">Description (FR)</label><textarea rows="3" name="description_fr" id="description_fr" class="form-control"></textarea></div>';
        echo '</div>';
        echo '<div class="form-row">';

        // Program
        echo '<div class="form-group col-md-6"><label for="program_id">Program</label><select class="form-control" id="program_id" name="program_id">';
        $programs_list = programList();
        foreach($programs_list as $prog){
            echo '<option value="'.$prog['program_id'].'">'.$prog['title_en'].' (ID#'.$prog['program_id'].')</option>';
        }
        echo '</select></div>';
        echo '</div>';
        echo '<div class="form-row">';

        // Time selection
        date_default_timezone_set('America/Toronto');
        $time = date('H:i');
        echo '<div class="form-group col-md-3 bootstrap-timepicker timepicker"><label for="air_date">Air Date (24 hr)</label><input id="air_date" name="air_date" type="text" class="form-control input-small" value="'.$time.'"><span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>';
        ?>
        '
        '
        '
        '
        '
        echo '</form>'   // Form END

In the code above and in the fiddle, there is Insert ABC button on the 1st line. On clicking that button, the form should automatically take the generic data as follows:

Title (EN): Good Morning.
Title (FR): Bonjour
Description (EN): Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Description (FR): Dans la bibliothèque des composants se trouvent le composant Texte modèle qui vous pouvez faire glisser sur le plan de dessin.
Program: ABC (ID#6)

Problem Statement: I am wondering what changes I should make in the php code above so that on hitting Insert ABC buttom, the following values get populated.

Answer 1

You should use JavaScript’s for this.

Add an “onClick” to the button that calls a function. In the function set the value of those inputs.

Answer 2

Maybe you can generate the data-x attributes, and then fill the input values with those data

HTML:

<form>
  First: <input data-default="First def" class="put-def" type="text"/>
  Second: <input data-default="Second def" class="put-def" type="text"/>
</form>
<button onClick="fill();">
Fill!
</button>

JS, with JQuery for example:

function fill(){
    $(".put-def").each(function(){
        $(this).val($(this).data('default'));
    });
}

Fiddle: https://jsfiddle.net/fh1xapru/10/