заполнить поля в формах кнопкой onclick - PullRequest
Новая
       0

заполнить поля в формах кнопкой onclick

0 голосов
/ 12 января 2020

У меня проблема: мне нужно заполнить два поля в форме различными значениями, и я хотел бы сделать это с помощью кнопки onClick.

Я генерирую кнопки, и результат выглядит следующим образом: 

<button class="btn btn-primary" type="button" onclick="fillsquare(test, 1)">1</button>
<button class="btn btn-primary" type="button" onclick="fillsquare(test2, 3)">1</button>

Теперь я хочу заполнить свою форму значениями первого значения, которое я хочу поместить в первое field id="areaname_fill", и значение звука должно заполнить field id="squarename_fill".

Просто чтобы уточнить: если я нажму на первую кнопку, id="areaname_fill" должен установить значение "Test" И id="squarename_fill" должен установить значение 1. 

<div class="form-group">
    <label>fyll i område</label>
    <input type="text" name="areaname_fill" id="areaname_fill" class="form-control" value="" />
</div>

<div class="form-group">
    <label>fyll i rutans nummer</label>
    <input type="text" name="squarename_fill" id="squarename_fill" class="form-control" value="" /> 
</div>

Я придумал этот JS, но я не могу заставить его работать, иды? 

function fillsquare(area,square)
{
    var area = area;
    var square = square;

    document.getElementById(areaname_fill).value = area;
    document.getElementById(squarename_fill).value = square;
}

Ответы [ 4 ]

0 голосов
/ 12 января 2020

Обычно рекомендуется избегать использования встроенного javascript, например onClick="foo"

Если возможно, следует изменить разметку, чтобы включить значения в разметку кнопки , а затем добавить щелкните прослушиватель событий , чтобы извлечь данные и использовать их в форме. Вот пример этого. 

const buttons = document.querySelectorAll("button");
const areaField = document.getElementById("areaname_fill");
const squareField = document.getElementById("squarename_fill");

buttons.forEach(button => {
  button.addEventListener("click", () => {
    areaField.value = button.dataset.area;
    squareField.value = button.dataset.square;
  });
});
<div class="form-group">
  <label>fyll i område</label>
  <input
    type="text"
    name="areaname_fill"
    id="areaname_fill"
    class="form-control"
    value=""
  >
</div>
<div class="form-group">
  <label>fyll i rutans nummer</label>
  <input
    type="text"
    name="squarename_fill"
    id="squarename_fill"
    class="form-control"
    value=""
  >
</div>

<button class="btn btn-primary" type="button" data-area="test" data-square="1">
  First button
</button>
<button class="btn btn-primary" type="button" data-area="test2" data-square="3">
  Second button
</button>
0 голосов
/ 12 января 2020

Попробуйте приведенный ниже код. Кавычки отсутствуют в onclick и в document.getElementById, поскольку test и test2 являются строками, а document.getElementById ожидает строковый аргумент (идентификатор элемента). 

 function fillsquare(area, square) {
        var area = area;
        var square = square;

        document.getElementById("areaname_fill").value = area;
        document.getElementById("squarename_fill").value = square;
      }
<body>
    <button
      class="btn btn-primary"
      type="button"
      onclick="fillsquare('test', 1)"
    >
      1
    </button>
    <button
      class="btn btn-primary"
      type="button"
      onclick="fillsquare('test2', 3)"
    >
      1
    </button>

    <div class="form-group">
      <label>fyll i område</label>
      <input
        type="text"
        name="areaname_fill"
        id="areaname_fill"
        class="form-control"
        value=""
      />
    </div>
    <div class="form-group">
      <label>fyll i rutans nummer</label>
      <input
        type="text"
        name="squarename_fill"
        id="squarename_fill"
        class="form-control"
        value=""
      />
    </div>
0 голосов
/ 12 января 2020

Вы можете добиться этого таким образом 

document.getElementById("areaname_fill").value=area;
document.getElementById("squarename_fill").value=square;

А здесь 

<button class="btn btn-primary" type="button" onclick="fillsquare('test', 1)">1</button>
<button class="btn btn-primary" type="button" onclick="fillsquare('test2', 3)">1</button>


function fillsquare(area,square)
{
    document.getElementById("areaname_fill").value = area;
    document.getElementById("squarename_fill").value = square;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form-group">
     <label>fyll i område</label>
     <input type="text" name="areaname_fill" id="areaname_fill" class="form-control" value="">  
</div>
<div class="form-group">
    <label>fyll i rutans nummer</label>
     <input type="text" name="squarename_fill" id="squarename_fill" class="form-control" value="">  
</div>

<button class="btn btn-primary" type="button" onclick="fillsquare('test', 1)">1</button>
<button class="btn btn-primary" type="button" onclick="fillsquare('test2', 3)">1</button>
0 голосов
/ 12 января 2020

document.getElementById ("areaname_fill"). Value = area; document.getElementById ("squarename_fill"). value = square;

Вы должны добавить двойные кавычки, чтобы исправить это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...