Как передать данные из формы ввода в js на другой странице - PullRequest
Новая
       1

Как передать данные из формы ввода в js на другой странице

1 голос
/ 26 мая 2011

У меня есть страница, где пользователь вводит адрес и нажимает кнопку поиска. Пользователь должен перейти на следующую страницу, на которой должна быть карта Google с адресом, указанным пользователем. Как мне передать адрес из формы на странице 1, js на странице 2, где я могу манипулировать им с помощью API Google Maps? Я использую codeigniter кстати.

EDIT: Моим идеальным решением было бы использовать флэш-данные или передать адрес в URL-адресе способом codeigniter. Моя проблема в том, что я не уверен, как бы получить данные, если бы использовал один из этих методов.

Ответы [ 10 ]

4 голосов
/ 30 мая 2011

В представлении CodeIgniter для страницы 1: 

<form method="POST" action="getMap">
<input type="text" name="address" value="" />
<input type="submit" value="Map It!" />
</form>

В представлении CodeIgniter, загруженном методом getMap () контроллера (другими словами, на странице 2): 

<script>
address = "<?php echo htmlspecialchars($this->input->post['address']); ?>";
// create the map with the address here
</script>

Вы захотите позаботиться о проверке ввода пользователя.

3 голосов
/ 31 мая 2011

Почему бы вам просто не напечатать POST-информацию через PHP на странице назначения, используя синтаксис литералов Javascript?Например, если ваша форма отправляет следующее (как запрос GET, так и запрос POST): 

firstname=aaron&lastname=pink

, вы можете напечатать на целевой странице PHP: 

<html>
  <head>
    <script type="text/javascript">
      var fname = "<?php echo addslashes($_POST['firstname']); ?>";
      var lname = "<?php echo addslashes($_POST['lastname']); ?>";
    </script>
  </head>
  <body>
    ...
    <button onclick="alert(fname);">Say First Name!</button>
  </body>
</html>

Затем вы можете простоиспользуйте Javascript vars fname и lname, как вы хотите, так же, как мой пример кнопки при нажатии!

Я надеюсь, что это было полезно, даже если очень просто:)

3 голосов
/ 30 мая 2011

Хотите ли вы, чтобы пользователь мог сохранить URL-адрес?

Если вы этого не сделаете, просто используйте POST в поле ввода и извлеките данные на второй странице следующим образом (внутри javascript): 

var address = '<?=$this->input->post('address')?>'

В противном случае:

  1. В javascript, на первой странице, запретите действие по умолчанию при отправке формы и вместо этого перенаправьте пользователя на [URL второй страницы] / [материал, записанный в форме] (я могу дать вам пример jquery, если вы хотите );

  2. Во втором контроллере страниц (давайте представим, что функция называется get_map, и именно в контроллере maps вы получаете данные таким образом 

    function get_map($address = null)

  3. Теперь у вас есть входной адрес. Передайте его представлению, которое должно содержать карту.

3 голосов
/ 26 мая 2011
  1. Если вы используете jquery, вы можете использовать плагин $ .cookie для передачи информации между PHP и Javascript.

или 2. Отправка данных из 1. страницы за $ _GET или $ _POST и поймать данные в 2. страница 

<script>

  var myData = '<?php=htmlspecialchars($_POST['data_from_page1']);?>';

</script>
3 голосов
/ 26 мая 2011

Используйте переменные URL для достижения этой цели.Пример может выглядеть следующим образом: 

http://www.testurl.com/mappage.html?address=someaddress&city=somecity&state=ca&zip=12345

Вы можете подобрать значения этих URL-переменных в javascript и передать их на карту Google.

2 голосов
/ 31 мая 2011

@ Сом ты запутался.Цель сделать ваши URL "красивыми" и сделать их похожими на пути / файлы, а не на строки запроса, для SEO и удобства для пользователя.Вы не должны включать любой ввод формы в виде «симпатичного» URL.Отправьте данные своего адреса через глобальную переменную $ _POSTS или отправьте их в виде строки запроса.CI использует флаг [QSA] в своих определениях mod_rewrite в файле htaccess, так что вы вполне можете придерживаться (IMO) семантически правильной строки запроса в конце.*

На форме.php: 

<form action="map.php" method="get">
<input type="text" name="addr" />
</form>

На карте.php: 

<?php
$addr = $this->input->get('addr');
// or $addr = $_GET['addr'];

echo $addr;
?>
0 голосов
/ 31 мая 2011

Почему бы не сделать это полностью в JavaScript, используя API Карт Google?
Допустим, ваша карта инициализируется переменной var Map и геокодером в var Geocoder, а у вас <form id="searchForm">Address:<input /> <br /> <input type="submit" /></form>.
Я также предполагаю, что вы загрузили jQuery, поэтому: 

<script type="text/javascript">
    $('#searchForm').submit( function(e) {
        e.preventDefault();
        var searchString = $(this).find('input:first').val(); //  get the address
        Geocoder.geocode( { 'address': searchString}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                Map.setCenter(results[0].geometry.location);
              } else {
                alert("Geocode error: " + status + "\n" + "Try another address");
              }
            });
    });
</script>

Демо здесь: http://jsfiddle.net/toxik/Xjy3S/embedded/result/

0 голосов
/ 30 мая 2011

отметьте это 

// JavaScript function function abc(pram1, pram2) {    alert(pram1 + pram2); } // end of JS function

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

<a name="search" href="javascript:void(0)" onclick="abc('param1','param2')> search </a>
0 голосов
/ 30 мая 2011

Codeigniter сессий будет проще всего работать.

Как только вы получите отправленный адрес, установите некоторые пользовательские данные, например, так. 

  
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Mycontroller extends CI_Controller {
    function __construct()
    {
        parent::__construct();
    }

    function index()
    {       
        if($_SERVER['REQUEST_METHOD'] == "POST")
        {
            //do something from post
            $this->session->set_userdata('street', $this->input->post('street'));  
            $this->session->set_userdata('city', $this->input->post('city'));  
            $this->session->set_userdata('state', $this->input->post('state'));  
            $this->session->set_userdata('zip', $this->input->post('zip')); 

            //then redirect to the next page
            redirect('mycontroller/map');   
        }
        else
        {
            //load the form
            $this->load->view('address_form');
        }
    }

    function map()
    {   
        $data = array(
            "street" => $this->session->userdata('street'),
            "city" => $this->session->userdata('city'),
            "state" => $this->session->userdata('state'),
            "zip" => $this->session->userdata('zip')
        );
        $this->load->view('map' $data);
    }

}

Установите значения в скрытом вводе.Просто сделайте, чтобы javascript захватил значение этого входного идентификатора ...

0 голосов
/ 26 мая 2011

Вы можете использовать sessionStorage в современных браузерах для хранения ваших данных между страницами в одном сеансе просмотра. Для старых браузеров вы можете использовать хакерское решение, которое позволит вам хранить данные в окне. Name 

if( typeof sessionStorage !== 'undefined' ){
  myStorage = sessionStorage;
}else{
  myStorage = {
    setItem:function(key,val){
      this.removeItem(key);
      window.top.name+=(window.top.name.length?'&':'')+escape(key)+'='+escape(val);
    }
    ,getItem:function(key){
      var r = window.top.name.match(new RegExp('(^|&)'+escape(key)+'=([^&=]*)($|&)'));
      return r?unescape(r[2]):null;
    }
    ,removeItem:function(key){
      window.top.name = window.top.name.replace(new RegExp('(^|&)'+escape(key)+'=([^=&]*)(?=$|&)'),'');
    }
  };
}

Теперь вы можете использовать myStorage.setItem('key',value) с каждым из полей формы, которое вы хотите сохранить, и получить их на следующей странице с помощью myStorage.getItem('key')

Это не сложнее, чем использование файлов cookie, и позволяет не передавать данные cookie в каждом заголовке запроса.

Надеюсь, что это поможет ..

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...