Попытка использовать запись формы для установки переменных, которые используются для создания пользовательского URL

0

Я работаю над внутренним проектом, который, скорее, над головой, с точки зрения кодирования. Я учил себя, когда я собираюсь создать ресурс для сотрудников для сотрудников как доказательство концепции более крупного проекта, и у меня практически нет опыта работы с JavaScript.

Я пытаюсь разрешить людям использовать форму для ввода/выбора значений для переменных vara, varb и varc. После ввода этой информации я хочу, чтобы они могли просматривать список элементов, которые я разрешаю им фильтровать, и когда они находят тот, который им нужен, они нажимают на кнопку, которая объединяет переменные в строке запроса с некоторыми дополнительный текст между ними и идет на этот веб-сайт.

URL-адрес с строкой запроса должен выглядеть так:

http://www.websiteurl.com/website.aspx?T=12345&J=8&p=vara&d=varb%20varc

У меня есть это до сих пор, но я довольно запутался в объединении информации. Жесткая часть, которую я нахожу, состоит в том, что каждый элемент, который человек может выбрать из списка, будет иметь другое значение T = #.

<script>
      var vara = document.getElementById("PPL");
      var varb = document.getElementById("DT");
      var varc = document.getElementById("TM");

</script>

Это HTML-форма, которую я создал в теле страницы:

<FORM onkeypress="return event.keyCode != 13;">
<Select TYPE="TEXT" NAME="PPL">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
</Select>
<INPUT id="DT" TYPE="TEXT">
<SELECT id="TM" TYPE="TEXT">
    <option selected="selected" value="8:00 PM">8:00 PM</option>
    <option value="8:30 PM">8:30 PM</option>
    <option value="9:00 PM">9:00 PM</option>
    <option value="9:30 PM">9:30 PM</option>
    <option value="10:00 PM">10:00 PM</option>
</Select>
</FORM>

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

EDIT: Я выяснил ссылку, которая открывает страницу, и, похоже, правильно нарисовала элементы, но я вижу в целевом URL, что я получаю нулевые значения для переменных, которые я пытался определить с помощью формы.

<a href="#" onclick="window.open('http://www.websiteurl.com/website.aspx?T=12345&J=8&p='+vara+'&d='+varb+'%20'+varc);return false;">

Редактирование (11/28/2013): я попытался немного изменить подход к коду и использовал функцию ниже, причем нижнюю строку HTML вызывать ее. Он работает, чтобы поднять правильную страницу на веб-сайте, на который я ссылаюсь, и число, которое я передаю функции, работает правильно, но другие переменные все еще показывают нам как "неопределенные" в заполненном URL-адресе.

    function OTCheck(IDnum)
{
u = 'http://www.website.com/websites.aspx?T='+IDnum+'&J=8&p='+vara+'&d='+var+'%20'+varc
return u
}

Элемент, с которого я связываюсь, находится в таблице (отсюда и теги):

<td><a href="javascript:location.href=OTCheck('21790')">Link</a></td>
Теги:
variables
url
concatenation

1 ответ

0
Лучший ответ

document.getElementById() получает только элемент, а не значение внутри него. Fix:

  var vara = document.getElementById("PPL").value;
  var varb = document.getElementById("DT").value;
  var varc = document.getElementById("TM").value;

  document.getElementById("link").onclick = function() {
    window.open('http://www.websiteurl.com/website.aspx?T=12345&J=8&p='+vara+'&d='+varb+'%20'+varc);
    return false;
  }

Затем измените свой html на это:

<form onkeypress="return event.keyCode != 13;">
<select id="PPL">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
</select>
 <input id="DT" type="text" />
 <select id="TM" type="text">
 <option selected="selected" value="8:00 PM">8:00 PM</option>
 <option value="8:30 PM">8:30 PM</option>
 <option value="9:00 PM">9:00 PM</option>
 <option value="9:30 PM">9:30 PM</option>
 <option value="10:00 PM">10:00 PM</option>
</select>
</form>

 <a href="#" id="link">This is link</a>

Теперь это должно сработать.

  • 0
    Спасибо за быстрый ответ. Я добавил .value к каждому из операторов переменных, но теперь вместо того, чтобы получить «NULL» в полученном URL, я получаю «undefined». Нужно ли мне выполнять функцию для извлечения значений из формы, или достаточно иметь определения переменных?
  • 0
    Это может быть потому, что вы используете его онлайн-JavaScript. Пожалуйста, смотрите мое редактирование.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню