2013-11-24 3 views
0

У меня есть текстовое поле и кнопка. при нажатии кнопки страница перенаправляется на тот же URL-адрес, и я хочу, чтобы введенное поле оставалось привязанным в текстовом поле. Как я могу это сделать?связать введенный текст в текстовом поле

Код

<input type="text" size="25" style="background-color:#D8D8D8" id="to"/><br><br> 

<input type="submit" name="scheduleSubmit" value="Submit" id="scheduleSubmit" 
    <button class="btn btn-round btn-success" type="button"></button> 

кнопки OnClick событие

var textBox2 = document.getElementById('to'); 
value = "?from="+ textBox1.value ; 
location.href = "http://127.0.0.1:8000/new/reports/daily/" + value ; 
document.getElementById("to").value= textBox2.value; 
+0

Можете ли вы объяснить лучше "введенное поле остается связанным в текстовом поле"? – Sergio

+0

, когда кнопка нажата и переназначена, поле пуст, но я хочу отобразить предыдущий введенный текст –

ответ

0

Прежде имя для вашего текстового поля, что когда-нибудь вы want.for пример, я назвал текстовое поле, как TextField. затем проверьте, отправлен ли запрос из заданного текстового поля, и если да, сохраните привязанное значение. если нет, это сделает значение пустым. «Код, который я использую» здесь, это PHP, поэтому вам нужен сервер, например, wampserver, чтобы увидеть желаемый результат. в противном случае ничего не происходит »

<input type="text" name = 'textField' value =" if(isset($_REQUEST['textField'])) { echo $_REQUEST['textField'] } else { echo '' } " size="25" style="background-color:#D8D8D8" id="to"/><br><br> 
1

Вы можете разобрать строку запроса с помощью 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 элемент будет просто браузер «после»/«получить» данные на текущей странице.

Смежные вопросы