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

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

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

Если ваш вывод исходит из 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/

Возможно, вы можете сгенерировать атрибуты 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/

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

}

Хорошо, я видел скрипку. В теория должно работать. Проблема в том, что 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