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

Question

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

html/php代码属于表单的sn-ps为：

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”。在函数中设置这些输入的值。

Answer 2

也许你可以生成 data-x 属性，然后用这些数据填充输入值

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，以 JQuery 为例：

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

小提琴： https://jsfiddle.net/fh1xapru/10/

Answer 3

在您的jsfiddle 中，您使用了document.getElementsByName，它返回NodeList[] 而不是元素。您可能需要使用 document.getElementById 才能使该代码正常工作。

<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";

}

Answer 4

如果您的输出来自 PHP，只需在 script 标记中添加这一额外行。像这样：

<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 commodo ligula eget dolor.";
  yourForm.description_fr.value = "Dans la bibliothèque des composants se trouvent le composant Texte modèle qui vous pouvez faire glisser sur le plan de dessin.";
    yourForm.program_id.value = 6;
});
</script>

另外，给你的按钮一个特定的类来使用它（例如 class="ABC-Fill"），如下所示：

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

这是你的代码工作的小提琴：

https://jsfiddle.net/yw3c2xau/

Answer 5

好的，我看到了小提琴。 理论上它应该可以工作。问题是 JS Fiddle 将 js 代码包装在表单无法找到的范围内。

如果您打开控制台，您将看到消息“函数 myFunction 不存在”。如果你看到 JS Fiddle 是如何渲染你的代码的，你会看到 function myFunction () 在另一个函数中，这使它不在全局范围内，任何 html 元素都无法访问。

如果您需要推荐，我会稍微更改一下 html。像这样：

从 html 中删除 onclick="myFunction()" 并为该按钮添加一个 id

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

将函数重构为如下所示：

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

这就是有些人所说的“不显眼”的js，也就是说，js不直接绑定到html元素本身的元素上，而是事后绑定事件。

如果这仍然不起作用，那是因为当您执行getElementById 时，该按钮可能还不存在于 DOM 中。这是因为 JS Fiddle 是在 html 上插入脚本。你有两个选择：

1. 告诉 JS Fiddle 将 js 放在文件底部（参见 js 编辑器上方的下拉菜单）
2. 像这样绑定元素（以jquery为例）：

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

事件绑定到document本身，此时肯定存在，但仅在“currentTarget”为#btn-to-apply-defaults时触发