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 modo ligula eget dolor.
Description (FR): Dans la bibliothèque des posants se trouvent le posant 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.

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 modo ligula eget dolor.
Description (FR): Dans la bibliothèque des posants se trouvent le posant 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.

• javascript
• php
• html
• forms
• button

Share Improve this question Follow edited Mar 13, 2019 at 20:51 Zobia Kanwal 4,77344 gold badges1717 silver badges3838 bronze badges asked Mar 13, 2019 at 16:20 johnjohn 11.7k4545 gold badges142142 silver badges267267 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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.

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/fh1xapru/10/

In your jsfiddle, you've used document.getElementsByName and it returns NodeList[] not the element. You may need to use document.getElementById to make that code work.

<a class="btn btn-primary" onclick="myFunction()" style="float:right;" role="button">Insert ABC</a>

function myFunction() {
 document.getElementById("title_en").value="Good Morning";
 document.getElementById("title_fr").value="Bonjour";
 document.getElementById("description_en").value="Bonjour";
 document.getElementById("description_fr").value="Bonjour";
 document.getElementById("program_id").value="6";

}

If your output es from PHP, just add this extra line in a script tag. Like this:

<script>
document.getElementsByClassName("ABC-Fill")[0].addEventListener("click",function(){
    let yourForm = document.getElementById("myform");
  yourForm.title_en.value = "Good morning.";
  yourForm.title_fr.value = "Bonjour";
  yourForm.description_en.value = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean modo ligula eget dolor.";
  yourForm.description_fr.value = "Dans la bibliothèque des posants se trouvent le posant Texte modèle qui vous pouvez faire glisser sur le plan de dessin.";
    yourForm.program_id.value = 6;
});
</script>

Also, give your button a specific class to work with it (Ex. class="ABC-Fill") like this:

<a class="btn btn-primary ABC-Fill" style="float:right;" role="button">Insert ABC</a>

Here is your fiddle with the code working:

https://jsfiddle/yw3c2xau/

Ok, I saw the fiddle. In theory it should work. The issue is that JS Fiddle is wrapping the js code in a scope where your form cannot find it.

If you open the console you will see the message "function myFunction does not exist". And if you see how JS Fiddle rendered your code, you will see that the function myFunction () is inside another function, which puts it NOT in the global scope, inaccessible to any html element.

If you want a remendation, I would change the html a bit. like this:

Remove the onclick="myFunction()" from the html and instead add an id to that button

<button id="btn-to-apply-defaults">...

Restructure the function to look like this:

document.getElementById("btn-to-apply-defaults").addEventHandler("click", function () {
    // here go the contents of the original myFunction()
});

This is what some would call "unobtrusive" js, which means, the js is not tied to the elements directly in the html element itself, instead, you bind the event afterwards.

If this still doesn't work, it is because the button might not yet exist in the DOM when you do the getElementById. This is because JS Fiddle is inserting the script above the html. You have two options:

1. tell JS Fiddle to put the js at the bottom of the file (see dropdown above the js editor)
2. bind the element like this (example is with jquery):

$(document).on("click", "#btn-to-apply-defaults", function () {
    // here go the contents of the original myFunction()
});

The event is bound to the document itself, which is sure to exist at that point, but only triggered when the "currentTarget" is #btn-to-apply-defaults