Как заполнить форму общими данными при нажатии кнопки в JavaScript?

Question

Я работаю над формой (здесь fiddle ), которая разработана через html / php.

Фрагменты 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

В приведенном выше коде и в скрипте в 1-й строке есть кнопка 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, чтобы при нажатии кнопки «Вставить ABC» заполнялись следующие значения.

Answer 1

В вашем 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 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

Вы должны использовать JavaScript для этого.

Добавьте «onClick» к кнопке, которая вызывает функцию.В функции установите значение этих входов.

Answer 4

Хорошо, я видел скрипку.В теории это должно работать.Проблема заключается в том, что JS Fiddle помещает код js в область, в которой ваша форма не может его найти.

Если вы откроете консоль, вы увидите сообщение «функция myFunction не существует».И если вы увидите, как JS Fiddle визуализировал ваш код, вы увидите, что function myFunction () находится внутри другой функции, которая помещает его НЕ в глобальную область, недоступную для любого html-элемента.

Если вам нужна рекомендацияЯ бы немного изменил HTML.например:

Удалите onclick="myFunction()" из html и вместо этого добавьте идентификатор для этой кнопки

<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-элементе, вместо этого вы связываете событие позже.

Если это все еще неработать, это потому, что кнопка может еще не существовать в DOM, когда вы делаете getElementById.Это потому, что 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

Answer 5

Если ваш вывод получен из 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/