堆栈内存溢出
  简体   繁体   English

如何将数据从输入表单传递到另一个页面上的js

[英]How to pass data from input form to js on another page

 原文  2011-05-25 21:39:45  5   10    php/ google-maps/ codeigniter

问题描述

I have a page where a user enters an address and clicks search.我有一个页面，用户输入地址并单击搜索。 The user should be taken to the next page which should contain a google map with the address the user specified.用户应该被带到下一个页面，该页面应该包含一个谷歌 map 和用户指定的地址。 How should I pass the address from the form on page 1, to js on page 2 where I can manipulate it with the google maps api?我应该如何将第 1 页上的表单中的地址传递到第 2 页上的 js，在那里我可以使用谷歌地图 api 对其进行操作？ I'm using codeigniter btw.我正在使用 codeigniter 顺便说一句。

EDIT: My ideal solution would be to use flash data or pass the address in the url the codeigniter way.编辑：我理想的解决方案是使用 flash 数据或以 url codeigniter 方式传递地址。 My problem is i'm not sure how I would retrieve the data if I used either of these methods.我的问题是如果我使用这些方法中的任何一种，我不确定如何检索数据。

10 个解决方案

解决方案1
 4 已采纳  2011-05-29 21:37:11

In the CodeIgniter view for page 1:在第 1 页的 CodeIgniter 视图中：

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

In the CodeIgniter view loaded by getMap() method of the controller (in other words, in page 2):在 controller 的 getMap() 方法加载的 CodeIgniter 视图中（换句话说，在第 2 页中）：

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

You'll want to take care to do some validation on the user input.您需要注意对用户输入进行一些验证。

解决方案2
 3  2011-05-25 21:42:59

Use url variables to accomplish this.使用 url 变量来完成此操作。 An example might look like this:一个示例可能如下所示：

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

You can pick up the values of these url variables in javascript and pass it to the google map.您可以在 javascript 中获取这些 url 变量的值并将其传递给 google map。

解决方案3
 3  2011-05-25 21:45:48

  1. If you are using jquery, you can use the $.cookie plugin to transfer informations between PHP and Javascript.如果您使用的是 jquery，您可以使用 $.cookie 插件在 PHP 和 Javascript 之间传输信息。

or 2. Send data from 1. page per $_GET or $_POST and catch the data in 2. page或2. 每个 $_GET 或 $_POST 从 1. page 发送数据并捕获 2. page 中的数据

<script>

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

</script>

解决方案4
 3  2011-05-30 17:22:14

Do you want the user to be able to save the url?您是否希望用户能够保存 url？

If you don't, just use POST in the input field and retrieve the data in the second page this way (inside the javascript):如果不这样做，只需在输入字段中使用 POST 并以这种方式检索第二页中的数据（在 javascript 内部）：

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

Otherwise:否则：

  1. In javascript, in the first page, prevent the default action on form submit and instead redirect the user to [url of the second page]/[stuff written in the form] (I can give you a jquery example if you want);在 javascript 中，在第一页中，阻止表单提交的默认操作，而是将用户重定向到 [第二页的 url]/[表单中写入的内容]（如果你愿意，我可以给你一个 jquery 示例）；

  2. In the second page controller (let's pretend the function is called get_map and it is in the maps controller you get the data in this way在第二页 controller 中（假设 function 被称为get_map并且它在maps controller 中，您可以通过这种方式获取数据

    function get_map($address = null)

  3. Now you have the input address.现在你有了输入地址。 Pass it to the view that should contain the map.将其传递给应包含 map 的视图。

解决方案5
 3  2011-05-31 14:26:54

Why don't you simply print the POSTed information via PHP on the destination page using Javascript literals syntax?为什么不使用 Javascript 文字语法在目标页面上简单地通过 PHP 打印发布的信息？ As an example, if your form POSTs the following (both GET or POST query):例如，如果您的表单发布以下内容（GET 或 POST 查询）：

firstname=aaron&lastname=pink

you can print in a destination PHP page:您可以在目标 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>

Then, you can simply use fname and lname Javascript vars as you wish, just as my sample button does on click!然后，您可以根据需要简单地使用 fname 和 lname Javascript vars，就像我的示例按钮在单击时所做的那样！

I hope it was helpful, even if very simple:)我希望它有帮助，即使很简单:)

解决方案6
 2  2011-05-31 17:52:38

@Catfish you're getting all confused. @Catfish，您感到很困惑。 The objective of making your urls "pretty" and having them resemble paths / files rather than query strings is for SEO & user friendliness.使您的网址“漂亮”并使它们类似于路径/文件而不是查询字符串的目的是为了 SEO 和用户友好性。 You shouldn't really be including any form input in as a "pretty" url.您不应该将任何表单输入作为“漂亮”的 url 包含在内。 Either send your address data via the $_POSTS global or send it as a query string.通过 $_POSTS 全局发送您的地址数据或将其作为查询字符串发送。 CI uses the [QSA] flag in its mod_rewrite definitions in the htaccess file so you're totally fine to stick on a (IMO) semantically correct query string on the end. CI 在 htaccess 文件的 mod_rewrite 定义中使用 [QSA] 标志，因此您完全可以在最后坚持使用（IMO）语义正确的查询字符串。

Anyway, to the code.无论如何，到代码。

On form.php:在 form.php 上：

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

On map.php:在 map.php 上：

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

echo $addr;
?>

解决方案7
 0  2011-05-25 22:11:40

You can use sessionStorage on modern browsers to stock your datas between pages inside the same browsing session.您可以在现代浏览器上使用 sessionStorage 在同一浏览器 session 内的页面之间存储数据。 For older browser you can use an hacky solution that allow you to stock datas inside the window.name对于较旧的浏览器，您可以使用一个 hacky 解决方案，允许您在 window.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)+'=([^=&]*)(?=$|&)'),'');
    }
  };
}

Now you can use myStorage.setItem('key',value) with each of the form fields you want to keep and retrieve them on the next page with myStorage.getItem('key')现在您可以将myStorage.setItem('key',value)与要保留的每个表单字段一起使用，并在下一页使用myStorage.getItem('key')检索它们

It's not more complicated than using cookies, and have the benefits to not transfer the cookie datas in each request header.它并不比使用 cookies 更复杂，并且好处是不会在每个请求 header 中传输 cookie 数据。

Hope this help..希望这有帮助..

解决方案8
 0  2011-05-31 08:33:27

Why not do it entirely in JavaScript, using the Google Maps API?为什么不使用谷歌地图 API 完全在 JavaScript 中完成它？
Let's say that your Map is initialized with the variable var Map and the Geocoder in the var Geocoder and that you have an <form id="searchForm">Address:<input /> <br /> <input type="submit" /></form> .假设您的 Map 已使用变量var Map和var Geocoder Geocoder 中的地理编码器进行初始化，并且您有一个<form id="searchForm">Address:<input /> <br /> <input type="submit" /></form> 。
I'm also assuming you have jQuery loaded, so:我还假设您已加载 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>

Demo here: http://jsfiddle.net/toxik/Xjy3S/embedded/result/此处演示： http://jsfiddle.net/toxik/Xjy3S/embedded/result/

解决方案9
 -1  2011-05-29 21:35:46

Codeigniter sessions would be the easiest to work with. Codeigniter 会话将是最容易使用的。

Once you get the address submitted, set some userdata like so.获得提交的地址后，像这样设置一些用户数据。

  
<?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);
    }

}

Set the values in a hidden input.设置隐藏输入中的值。 Just have javascript grab the value of that inputs ID...只需让 javascript 获取输入 ID 的值...

解决方案10
 -2  2011-05-30 08:00:19

check this检查这个

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

now call this function on your search form.现在在您的搜索表单上调用此 function。 pass all parameters you want to move other page like传递您想要移动其他页面的所有参数，例如

<a name="search" href="javascript:void(0)" onclick="abc('param1','param2')> search </a>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将值从输入表单传递到laravel中的另一个页面 - how to pass value from input form into another page in laravel 将数据从一页上的输入表单传递到另一页上的选择表单？ - Pass Data From Input Form on One Page To a Select Form on Another page? 如何将表单数据传递到Laravel中的另一个页面 - How to pass form data to another page in Laravel 如何将输入字段值从一个表单传递到 Woocommerce 不同页面中的另一个表单 - How to Pass a input field value from one form to another form in the different page in Woocommerce PHP - 如何将用户输入日期从一个表单（页面）传递到另一个填写相同信息以供用户验证 - PHP - How pass user input date from one form (page) to another filling in the same info for the user to verify 如何在laravel 5.7中将数据从一种形式传递到另一页上的另一种形式？ - How to pass data from one form to another form on a different page in laravel 5.7? 您如何建议我将数据从一种形式传递到另一种形式，最后传递到另一个最终页面？ - How do you recommend I pass data from one form to another, and finally to another final page? 如何将变量从 php 页面传递并放入另一个页面（表单）？ - How to pass and put variable from a php page into a another page(form)? 将数据从一种形式传递到另一页上的另一种形式 - Pass data from one form to another on a separate page 将数据传递到另一个页面并在该页面上提交表单 - Pass data to another page and submit form on that page
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM