【问题标题】:How to submit multiple values from a single jQuery-TokenInput as Name/Value pairs如何从单个 jQuery-TokenInput 提交多个值作为名称/值对
【发布时间】:2014-03-13 21:10:51
【问题描述】:

我正在尝试找出超出我技能范围的东西,所以请耐心等待。

我想要做的是让用户填写一份个人资料,允许他们从 Livesearch 输入中选择最多四个城市。然后我想分别使用这些城市值,从存储在数据库中到作为 url 参数传递。

如何让它们脱离似乎是逗号分隔的值字符串并给它们自己的名字?

示例。

如果他们选择了纽约、芝加哥、迈阿密和达拉斯,那么我就知道了;

<input type="text" id="Locations" name="Locations" value="New York,Chicago,Miami,Dallas">

我想要的是;

name="city1" value="New York"
name="city2" value="Chicago"
name="city3" value="Miami"
name="city4" value="Dallas"

脚本;

<input type="text" id="Locations" name="Locations" />
<button type="submit" class="btn">Submit</button>    

<script type="text/javascript">
$(document).ready(function() {
$("#Locations").tokenInput([    
<?php include 'city-list.php'; ?>
], {
tokenLimit:4    
});
});
</script>

一切正常,我只需要在提交表单时分隔值,我想可能是隐藏字段。我环顾四周,找不到任何有帮助的东西。任何事情都会很棒。

【问题讨论】:

    标签: javascript jquery jquery-tokeninput


    【解决方案1】:

    您可以使用tokenValue 参数来实现这一点,该参数可以传递一个函数。

    从技术角度来看,我建议使用JSON 来包含您要发送的信息。 (我不知道你之后在做什么,你可以根据需要调整这个例子。)

    试试这样的:

    <script type="text/javascript">
    $(document).ready(function() {
    $("#Locations").tokenInput([    
    <?php include 'city-list.php'; ?>
    ], {
    tokenLimit:4,    
    
    tokenValue: function(param, el){
                    var token = {   "name" : //Do something clever here to generate the names you want. You can get the city name of the token under param.name.
                                    "value" : param.name,
                                };
                    return JSON.stringify(token);
                    }
    
    });
    });
    </script>
    

    注意我不完全清楚你想为你的“名字”使用什么值。希望您能适当地调整这个例子!

    【讨论】:

      【解决方案2】:

      我知道这已经过时了,但我不喜欢看到没有答案的问题。

      似乎 OP 只是想在提交表单时分隔一个逗号分隔的字符串。

      你可以在你的 PHP 脚本中通过将字符串分解成一个数组来做到这一点。

      $cityArray = explode(',', $cityString); 
      

      这会将值分隔到一个 PHP 数组中,然后您可以随意使用它。

      【讨论】:

        猜你喜欢
        • 2010-10-10
        • 2017-01-30
        • 2014-08-19
        • 1970-01-01
        • 1970-01-01
        • 2020-08-15
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多