2

Как получить данные из формы, чтобы они отображались в alert при нажатии на кнопку

<form class="js-form hidden" id="something">
    <div class="block-div">
        <p><b>Ваше имя:</b><br>
            <input type="text" name="name">
        </p>
        <p><b>Пол:</b><br>
            <input type="radio" name="gender" value="male">Мужской<Br>
            <input type="radio" name="gender" value="female">Женский<Br>
        </p>
        <p><b>Дата рождения:</b><br>
            <input type="date" name="date">
        </p>
        <p><b>Любимый цвет:</b><br>
            <select name="color">
                <option>Зеленый</option>
                <option>Красный</option>
                <option>Синий</option>
            </select>
        </p>
        <p><b>Согласен на обработку данных:</b>
            <input type="checkbox" name="checkbox">
        </p><br>
        <input class="btn js-show-anketa" onclick="someFunc()" id="quantity" type="submit" value="Показать анкету">
    </div>

</form> 


<script>
    function someFunc(){
    alert(document.getElementById("something"));
    }
</script>  

Буду очень благодарен

3
  • 3
    Проще всего через document.forms
    – user300864
    14 авг 2018 в 16:09
  • 1
    @IgorRudnev , вам зачем данные в alert? Если форму отправить - можно использовать FormData или jquery serialize().
    – zhurof
    14 авг 2018 в 16:38
  • @ГеннадийЖуров по заданию на форме располагается кнопка "показать анкету" - по нажатию происходит следующее: 1) показывается alert, в нем сообщение вида: имя: %введенное_имя% пол: %выбранный_пол% дата рождения: %выбранная_дата% любимый цвет: %выбранный_цвет% согласие на обработку данных: %да_или_нет% 14 авг 2018 в 16:41

2 ответа 2

1

var form=document.getElementById('something');
form.addEventListener('submit',function(e){
  e.preventDefault();
  var data = new FormData(this),
      result = 'Имя:'+data.get('name')+'; Пол: '+data.get('gender')+'; Дата рождения: '+data.get('date')+'; Любимый цвет: '+data.get('color')+'; Согласие на обработку данных: '+(data.get('checkbox')?'Да':'Нет');
   console.log(result);

})
label,input,select{
  display:block;
}
p,label{
  margin:0 0 1em;
} 
[type=checkbox],
[type=radio]{
  display:inline-block;
}
<form class="js-form hidden" id="something">
	<label>
		<span>Ваше имя:</span>
		<input type="text" name="name">
	</label>
	<p>Пол:</p>
	<label>
		<input type="radio" name="gender" value="male">
		<span>Мужской</span>
	</label>
	<label>
		<input type="radio" name="gender" value="female">
		<span>Женский</span>
	</label>
	<label>
		<span>Дата рождения:</span>
		<input type="date" name="date">
	</label>
	<label>
		<span>Любимый цвет:</span>
		<select name="color">
			<option>Зеленый</option>
			<option>Красный</option>
			<option>Синий</option>
		</select>
	</label>
	<label>
		<span>Согласен на обработку данных:</span>
		<input id="agreement" type="checkbox" name="checkbox" >
	</label>
	<input class="btn js-show-anketa" id="quantity" type="submit" value="Показать анкету" >
</form>

0

Создаем поле ввода

<input type="text"/>

Теперь нам нужно как-то сделать его уникальным. Чтобы по какому-то ключевому слову мы могли знать, что это, точно, оно... Хм... А может так?

<input id="tratata" type="text"/>

Точно, мы можем дать ему идентификатор (id) для работы с ним.

Отлично.

Теперь пишем кусок скрипта

<script>
function getMeTratata(){

}
</script>

А как нам получить содержимое элемента? Может сохранить его в переменную? Хм..

<script>
function getMeTratata(){
   var variableContent;
}
</script>

Контент элемента мы можем получить с помощью знания Id и знания команды по управлению html. В нашем случае :

document.getElementById('tratata');

Чтобы получить значение элемента мы можем обратиться к полю value нашей команды

document.getElementById('tratata').value

теперь когда нам удалось получить значение элемента мы можем положить его в переменную

<script>
function getMeTratata(){
   var variableContent = document.getElementById('tratata').value;
}
</script>

Через команду

alert();

мы можем отобразить полученную переменную

<script>
 function getMeTratata(){
   var variableContent = document.getElementById('tratata').value;
   alert(variableContent );
}
</script>

Чтобы вызвать функцию мы привяжем ее к кнопке

Весь код :

<input id="tratata" type="text"/>
<button onclick="getMeTratata()">click me</button>
<script>
 function getMeTratata(){
   var variableContent = document.getElementById('tratata').value;
   alert(variableContent);
}
</script>
2
  • а как отобразить в одном alert данные из нескольких полей input? 14 авг 2018 в 16:37
  • @IgorRudnev примерно так: ... onclick="(function(){const f = document.forms[0]; alert([...Array(6).keys()].map(i => { return !f[i].value ? undefined : f[i].value; }))})();"
    – user300864
    14 авг 2018 в 17:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.