Автозаполнение формы при нажатии на кнопку

Я прочитал много статей здесь, в StackOverflow о том, что мне нужно, и я также реализовал метод, который я нашел здесь. Ну, это не работает, как должно, и я надеюсь, что кто-то скажет мне, почему.Автозаполнение формы при нажатии на кнопку

У меня есть форма с 7 полями ввода. Мне нужна кнопка, и если кто-то нажимает на кнопку, форма будет автозаполнена, всегда с тем же текстом в каждом поле. Я должен работать что-то вроде этого:

Форма: Input 1: пусто, Input 2: пусто, Input 3: пусто, Input 4: пусто, Input 5: пусто, Input 6: пусто, Вход 7: пуст,

Итак, семь полей ввода пустые. Теперь, если кто-то нажимает на кнопку, входные поля должны все получить такое же значение, и оно должно выглядеть следующим образом:

Input 1: AUTOFILLED, Input 2: AUTOFILLED, Input 3: AUTOFILLED, Input 4: AUTOFILLED , Input 5: AUTOFILLED, Input 6: AUTOFILLED, Input 7: AUTOFILLED

Позвольте мне показать вам, что я сделал. Я создал следующую кнопку:

<a class="btn btn-warning" href="#" onClick="autoFill('Suppenbuffet'); return false;" role="button">Suppenbuffet</a>

Тогда я написал следующий JS код:

<script> 
     function autoFill(vorspeise) { 
      document.getElementById('vorspeise').value = vorspeise;   
     } 
    </script>

А потом я вошел Ид = «vorspeise» для всех моих полей ввода, как это:

<div class="form-group"> 
<label class="control-label col-md-3 col-sm-3 col-xs-12">Input 1: </label> 
    <div class="col-md-9 col-sm-9 col-xs-12"> 
    <input type="text" name="vorspeise-traditionell-montag" id="vorspeise" class="form-control" value="<?php echo $yy ?>" required> 
    </div> 
</div> 

<div class="form-group"> 
<label class="control-label col-md-3 col-sm-3 col-xs-12">Input 2: </label> 
    <div class="col-md-9 col-sm-9 col-xs-12"> 
    <input type="text" name="vorspeise-traditionell-dienstag" id="vorspeise" class="form-control" value="<?php echo $yy ?>" required> 
    </div> 
</div> 

<div class="form-group"> 
<label class="control-label col-md-3 col-sm-3 col-xs-12">Input 3: </label> 
    <div class="col-md-9 col-sm-9 col-xs-12"> 
    <input type="text" name="vorspeise-traditionell-mittwoch" id="vorspeise" class="form-control" value="<?php echo $yy ?>" required> 
    </div> 
</div>

Моя проблема в том, что если я нажму кнопку, ТОЛЬКО первое поле ввода будет автозаполнено, а не все семь полей ввода. Может ли кто-нибудь сказать мне, как мне нужно изменить код, чтобы это повлияло на все поля ввода с id = "vorspeise"?!

Спасибо, Chris

источник

2015-08-28 Christoph C.

да, потому что вы даете тот же идентификатор для всех полей ввода, Идентификаторы должны быть уникальными для каждого элемента! –

ID должен быть уникальным, иначе он будет возвращает только первый согласованный элемент.Изменение идентификатора в определении класса так:

HTML

<div class="form-group"> 
<label class="control-label col-md-3 col-sm-3 col-xs-12">Input 1: </label> 
<div class="col-md-9 col-sm-9 col-xs-12"> 
    <input type="text" name="vorspeise-traditionell-montag" class="form-control vorspeise" value="<?php echo $yy ?>" required> 
</div> 
</div> 

<div class="form-group"> 
<label class="control-label col-md-3 col-sm-3 col-xs-12">Input 2: </label> 
<div class="col-md-9 col-sm-9 col-xs-12"> 
<input type="text" name="vorspeise-traditionell-dienstag" class="form-control vorspeise" value="<?php echo $yy ?>" required> 
</div> 
</div> 

<div class="form-group"> 
<label class="control-label col-md-3 col-sm-3 col-xs-12">Input 3: </label> 
<div class="col-md-9 col-sm-9 col-xs-12"> 
<input type="text" name="vorspeise-traditionell-mittwoch" class="form-control vorspeise" value="<?php echo $yy ?>" required> 
</div> 
</div>

function autoFill(vorspeise) { 
    $('.vorspeise').val(vorspeise);   
}

DEMO

источник

2015-08-28 07:30:51

Вот и все! Спасибо вам @Norlihazmey Ghazali! Еще один вопрос: как должна выглядеть моя функция JS, если я хочу сделать то же самое с проверкой флажка? Поэтому включите автозаполнение в текстовые поля, оно должно быть проверено на флажках –

JS зависит от вашей структуры HTML, вы можете использовать '.prop()', чтобы проверить эти флажки. –

Можете ли вы добавить демонстрацию для флажка к вашему JSfiddle? Я бы очень признателен, что –

идентификаторы: уникальны (или должны быть), поэтому вы должны адресовать их классом, или уникальным идентификатором: ами

Пример:

function autoFill(vorspeise) { 
      document.getElementById('vorspeise1').value = vorspeise;   
      document.getElementById('vorspeise2').value = vorspeise;   
      document.getElementById('vorspeise3').value = vorspeise;   
     }

Или вы можете добавить их по имени:

document.getElementsByName("vorspeise-traditionell-mittwoch")[0].value = "bla" 
document.getElementsByName("vorspeise-traditionell-dienstag")[0].value = "bla" 
document.getElementsByName("vorspeise-traditionell-montag")[0].value = "bla"

источник

2015-08-28 07:28:57 BobbyTables

О, ладно, но мне уже нужен мой класс внутри кнопки ввода, поэтому, я думаю, я не могу создать второй класс, и мне нужно создать уникальные идентификаторы, верно? –

вы можете указать их по классу или по имени или по id =) У вас может быть несколько классов, подобных этому классу = «form-control vorspiese-class» – BobbyTables

@ChristophC. добавленный пример с уникальными именами – BobbyTables

это не очень хорошая идея использовать несколько полей с тем же идентификатором. Это создаст проблемы CSS, Scripting и т. Д.

Либо использовать тот же класс для всех входных данных.

Или другим способом может быть использование разных идентификаторов для каждого входа.

Я надеюсь, что это помогает :)

источник

2015-08-28 07:33:21

Автозаполнение формы при нажатии на кнопку

ответ

Смежные вопросы