javascript - 如何在单击 javascript 中的按钮时使用通用数据填充表单？

Question

我正在处理一个通过 html/php 设计的表单(这里是 fiddle)。

属于表单的html/php代码的片段是:

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

在上面的代码和 fiddle 中，第一行有Insert ABC按钮。单击该按钮时，表单应自动采用如下通用数据:

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)

问题陈述: 我想知道我应该在上面的 php 代码中进行哪些更改，以便在点击 Insert ABC 按钮时填充以下值。

Answer 1

你应该为此使用 JavaScript。

向调用函数的按钮添加“onClick”。在函数中设置这些输入的值。