Вы можете разобрать строку запроса с помощью javascript. Строка запроса сохраняется в объекте location.search
, а также включает ?
.
Во-первых, захват строки запроса, как то, что вы можете работать с:
var queryString = location.search.substr(1); // substr(1) will cut off the ? character
Затем разобрать фактическую строку в объект:
function parseQuery(str) {
var result = {}; // going to store the key-value (kvp) pairs in here
var pairs = str.split('&'); // break it up by the standard ampersand delimiter
for (var i = 0; i < pairs.length; i++) { // go through each of the pairs
var kvp = pairs[i].split('='); // parse the individual pair using = as the delimiter
result[kvp[0]] = kvp[1]; // kvp[0] contains the name of the field, kvp[1] contains the value
}
return result;
}
var parsedQueryString = parseQuery(queryString);
И теперь заселить форма входной элемент:
document.getElementById('to').value = parsedQueryString.to||'';
Разработка на предыдущей строке, parsedQueryString
в настоящее время o bject (result
из функции возврата выше). Поле ввода имеет имя to
, которое соответствует ключу в строке запроса. Мы можем получить к нему доступ через parsedQueryString.to
, однако, если он не был включен в строку запроса, мы хотим, чтобы он изящно потерпел неудачу (используя оператор или оператор ||
), назначив пустую строку ''
: parsedQueryString.to || ''
.
Вот рабочий пример:
<!doctype html>
<html>
<head>
<title>JS Form</title>
</head>
<body>
<form method="get">
<p><input type="text" size="25" id="to" name="to" /></p>
<p><input type="submit" value="Submit" id="scheduleSubmit" name="scheduleSubmit" /></p>
</form>
<script type="text/javascript">
function parseQuery(str) {
var result = {};
var pairs = str.split('&');
for (var i = 0; i < pairs.length; i++) {
var kvp = pairs[i].split('=');
result[kvp[0]] = kvp[1];
}
return result;
}
var queryString = location.search.substr(1);
var parsedQueryString = parseQuery(queryString);
document.getElementById('to').value = parsedQueryString.to||'';
</script>
</body>
</html>
Обратите внимание, что отсутствие action
атрибута в form
элемент будет просто браузер «после»/«получить» данные на текущей странице.
Можете ли вы объяснить лучше "введенное поле остается связанным в текстовом поле"? – Sergio
, когда кнопка нажата и переназначена, поле пуст, но я хочу отобразить предыдущий введенный текст –