Отправка параметра из формы в функцию в JavaScript

Question

Я пытаюсь отправить значение из формы в новое окно, которое открывается.В моей программе окно открывается, но значение val2 не отправляется, и вместо этого существует ноль.

Мой код:

function eq(value) {
  ViewImg = window.open('http://localhost/coord.php?' + value, 'ViewImg', 'width=<?php print $realWidthNewWindow; ?>,height=<?php print $realHeightNewWindow; ?>', 'status=no', 'titlebar=0');
}

<form id='testform_eq' name='testform_new'>
  <input type='text' id='val2' name='val2'>
  <input type='button' value='Submit' onclick='eq(document.getElementById(val2))'>
</form>

У кого-нибудь есть идеи, почему это так?Спасибо

Answer 1

function eq() {
  const value = document.getElementById('val2').value;
  ViewImg = window.open('http://localhost/coord.php?' + value, 'ViewImg', 'width=<?php print $realWidthNewWindow; ?>,height=<?php print $realHeightNewWindow; ?>', 'status=no', 'titlebar=0');
}

<form id='testform_eq' name='testform_new'>
  <input type='text' id='val2' name='val2'>
  <input type='button' value="Submit" onclick='eq()'>
</form>

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

Если вы действительно хотите передать что-то, вы можете передать сам идентификатор.

eq('val2')

Функция eq будет выглядеть так:

function eq(id){
  const value = document.getElementById(id).value;
  ....
}

Чем вы можете использовать эту функцию в других местах на других входах.

Answer 2

Вам необходимо использовать свойство value для ввода.

Обновить код

 <input type='button' value='Submit' 
 onclick='eq(document.getElementById(val2).value)'>

Answer 3

Если вы хотите передать значение ввода, вы должны принять во внимание две вещи:

1. getElementById принимает строку, но вы пытаетесь передать переменную, которая нене существует
2. Если вы хотите передать значение, а не элемент, вы должны добавить .value после элемента

И, наконец, вы должны иметь элемент input, напримерэто:

<input type='button' value='Submit' onclick='eq(document.getElementById("val2").value)'>

Вот живой пример:

<script>
function eq(value) {
  console.log(value);
  ViewImg = window.open('http://localhost/coord.php?' + value, 'ViewImg', 'width=<?php print $realWidthNewWindow; ?>,height=<?php print $realHeightNewWindow; ?>', 'status=no', 'titlebar=0');
}
</script>

<form id='testform_eq' name='testform_new'>
  <input type='text' id='val2' name='val2'>
  <input type='button' value='Submit' onclick='eq(document.getElementById("val2").value)'>
</form>

Другой вариант - получить значение внутри функции, как описано здесь .Этот способ хорош, если вы не собираетесь повторно использовать eq с другими значениями.Вы должны выбрать один из них в зависимости от вашего реального случая.

Answer 4

Поскольку вы должны делать это следующим образом: document.getElementById("val2").value

document.getElementById(val2) неверно, если вы хотите получить значение id=val2.

Исправить это можнозаменить eq(document.getElementById(val2) на eq(document.getElementById("val2").value)

function eq(value) {
  ViewImg = window.open('http://localhost/coord.php?' + value, 'ViewImg', 'width=<?php print $realWidthNewWindow; ?>,height=<?php print $realHeightNewWindow; ?>', 'status=no', 'titlebar=0');
  console.log(value);
}

<form id='testform_eq' name='testform_new'>
  <input type='text' id='val2' name='val2'>
  <input type='button' value='Submit' onclick='eq(document.getElementById("val2").value)'>
</form>

или просто введите идентификатор в вызов функции: eq(val2)

function eq(id) {
  ViewImg = window.open('http://localhost/coord.php?' + id.value, 'ViewImg', 'width=<?php print $realWidthNewWindow; ?>,height=<?php print $realHeightNewWindow; ?>', 'status=no', 'titlebar=0');
  console.log(id.value);
}

<form id='testform_eq' name='testform_new'>
  <input type='text' id='val2' name='val2'>
  <input type='button' value='Submit' onclick='eq(val2)'>
</form>