Блог

Главная - Вопросы по программированию - Передача данных формы в javascript

Передача данных формы в javascript

#javascript #html #forms

#javascript #HTML #формы

Вопрос:

Итак, у меня проблема, я хочу передать очень простой пользовательский ввод в функцию javascript, чтобы javascript затем обрабатывал эту информацию, я действительно хочу передавать только строки, однако я просто хочу изучить концепцию. Ниже показано, как я (ДУМАЮ) вы бы это сделали, но это не работает, и я не уверен, почему. Может кто-нибудь показать мне, как это сделать просто и правильно.

 <body>

<form id="frm1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="button" onclick="myFunction(fname, lname)" value="Submit">
</form>

<script>
function myFunction(fname, lname) {
  console.log(fname);
  console.log(lname);
}
</script>

</body>

Комментарии:

1. привет, возможно myFunction(this.form.fname.value, this.form.lname.value)

2. @IronMan Откуда this взялся?

3. да. ` <тип ввода =»кнопка» onclick=»Моя функция (this.form.fname.value, this.form.lname.value)» значение =»Отправить»>` работает

Ответ №1:

Вот альтернативный подход, который может помочь:

Вы можете увидеть часть следующего кода в действии по этой ссылке: https://jsfiddle.net/m85yLoca /

 <html>
<head></head>
<body>
<form id="frm1">
  First name: <input type="text" name="fname" id="fname"><br>
  Last name: <input type="text" name="lname" id="lname"><br><br>
  <input type="button" onclick="myFunction()" value="Submit">
</form>

<script>
function myFunction() {
  let fname = document.querySelector('#fname').value;
  let lname = document.querySelector('#lname').value;
  console.log(fname);
  console.log(lname);
}
</script>
</body>

Я позаботился о том, чтобы добавить id="" настройки для fname lname входных данных формы и. Это может помочь нам индивидуально указать, к каким входным данным мы хотим получить доступ для последующего использования.

Этот подход используется document.querySelector() для точного определения того, к какому вводу формы вы хотите получить доступ. Я получаю значение ввода через .value часть в конце document.querySelector() строк, а затем присваиваю их отдельным переменным fname и lname .

Затем вы можете получить доступ к отдельным fname и lname переменным в вашей функции.

Ответ №2:

Это можно сделать следующим шагом.

  1. получение всего входного значения DOM с помощью document.querySelectorAll() . Я не добавлял id в каждый из входных данных. Вместо этого я выбираю их все
  2. выберите каждый из них и присвоите значение переменной.
 <form id="frm1">
  First name: <input type="text" name="fname" ><br>
  Last name: <input type="text" name="lname" ><br><br>
  <input type="button" onclick="myFunction()" value="Submit">
</form>

<script>
function myFunction() {
   const inputValues = document.querySelectorAll('#frm1 input')
   const fname = inputValues[0].value;
   const lname = inputValues[1].value;

   console.log(fname, lname);
}
</script>

Если позже вам потребуется отправить данные на сервер. Просто добавьте onsumbit атрибут.

 <form onsubmit="sendData()">
   //input and other structure

   
   <input type="submit" value="Submit">
</form>


<script>
function sendData(){
   //pack all your input value
   //make the ajax call here    
}
</script>