как получить значение радио и кнопки выбора, затем нажать на массив, при этом вызывая его - PullRequest
Новая
       2

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

0 голосов
/ 30 марта 2019

У меня есть эта программа, которая включает в себя ввод вашей информации, и после нажатия кнопки «Отправить» информация затем помещается в массив и отправляется на консоль ... Затем пользователь может выполнить поиск, например, по фамилии, и, если у него есть совпадение, он покажет другая информация, которая пришла с ним после отправки, например возраст, пол, дата рождения, адрес и т. д.

Я пытаюсь добиться того, чтобы можно было передать значение радио в массив, то же самое касается тега select, а затем сохранить его в консоли после отправки.

Html: 

<td id="gender">Sex<br>
<input type="radio" value="Male">Male
<input type="radio" value="Female">Female</td>
<tr><td>Age<br>
<select id="age">
<option default="1" style="color: black;">
Select Below</option><option value="10">10</option>
<option value="11">11</option><option value="12">12</option><option value="13">13
</option><option value="14">14</option><option value="15">15</option>
<input type="submit" value="Submit" class="sub" onclick="that();">
</td></tr>
<button class="ss" onclick="idnum()" title="Search..">IdNumber..</button>
<p id="age"><!--ageGoesHere--></p><p id="sex"><!--sexGoesHere--></p>
//othercodes

Кажется, я не могу обдумать другие ответы, связанные с получением значения радио, и выбрать из-за того, как должна работать моя программа. так что я попытаюсь обобщить это ... получить значение радио и выбрать - нажать на массив - отправить на консоль - вызов. постскриптум помощь (вот скриншот веб-страницы) enter image description here

Ответы [ 2 ]

0 голосов
/ 30 марта 2019

Есть простой способ сделать это, но форму нужно обернуть в элемент <form>, а элемент <input type="radio"> должен иметь имя, что является обычной практикой.

Вот оно: 

var arr = []

function logArr() {
  var formElements = document.getElementById("form-id").elements

  arr.push({
    name: formElements["name"].value,
    sex: formElements["sex"].value
  })
  
  console.log(arr)
}
body{
  height: 300px
}
<form id="form-id">
<p>
    Name: <input type="text" name="name">
<p>
    Sex:<br>
    <input type="radio" name="sex" value="Male" checked> Male<br>
    <input type="radio" name="sex" value="Female"> Female<br>
</p>
</form>
<button onclick="logArr()">Submit</button>

Это то, что вы хотели?

0 голосов
/ 30 марта 2019

Вот способ сделать это с Vue.js:

https://vuejs.org/v2/guide/forms.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <title>Document</title>
 </head>
 <body>
 <div id="root">
 <td id="gender">Sex<br>
   <input type="radio" v-model="checked" value="Male">Male
   <input type="radio" v-model="checked" value="Female">Female</td>
   <tr><td>Age<br>
   <select id="age">
   <option default="1" style="color: black;">
   Select Below</option><option value="10">10</option>
    <option value="11">11</option><option value="12">12</option><option value="13">13
     </option><option value="14">14</option><option value="15">15</option>
    <input type="submit" value="Submit" class="sub" onclick="that();">
    </td></tr>
    <button class="ss" onclick="idnum()" title="Search..">IdNumber..</button>
   <p id="age"><!--ageGoesHere--></p><p id="sex"><!--sexGoesHere--></p>
  //othercodes
    <span>Checked names: {{ checked }}</span>
   </div>
  </body>

   <script>

   new Vue({
   el: '#root',
   data: {
   checked: [],

   }
   })

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

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

...