Я работаю над внутренним проектом, который, скорее, над головой, с точки зрения кодирования. Я учил себя, когда я собираюсь создать ресурс для сотрудников для сотрудников как доказательство концепции более крупного проекта, и у меня практически нет опыта работы с 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>
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>
Теперь это должно сработать.