如何使用 jQuery Tagit 从 PHP 表单中获取文本字段值答案

【问题标题】：How to get a text field value from the form in PHP by using jQuery Tagit如何使用 jQuery Tagit 从 PHP 表单中获取文本字段值
【发布时间】：2013-05-04 08:35:37
【问题描述】：

我正在使用JQuery Tags Plugin，当用户输入一些以逗号分隔的标签时，我想在使用 PHP 提交表单后获取这些标签。

我的编码...

<?php       
if(isset($_REQUEST['submit_tag'])) {
    print_r($_REQUEST['tags']);     
}
?>
<!-- tags -->
<script src="http://webspirited.com/tagit/demo/js/jquery.1.7.2.min.js"></script>
<script src="http://webspirited.com/tagit/demo/js/jquery-ui.1.8.20.min.js"></script>
<script src="http://webspirited.com/tagit/js/tagit.js"></script>
<link rel="stylesheet" type="text/css" href="http://webspirited.com/tagit/demo/css/jquery-ui-base-1.8.20.css">
<link rel="stylesheet" type="text/css" href="http://webspirited.com/tagit/css/tagit-awesome-blue.css">
<script type="text/javascript">
    $(function () {
        $('#demo3').tagit({triggerKeys:['enter', 'comma', 'tab'], select:true});     

        $('#demo3GetTags').click(function () {
            showTags($('#demo3').tagit('tags'))
        });

        function showTags(tags) {
            console.log(tags);
            var string = "Tags (label : value)\r\n";
            string += "--------\r\n";
            for (var i in tags)
                string += tags[i].label + " : " + tags[i].value + "\r\n";
            alert(string);
        }
    });
</script>
<!-- tags -->
<form method="post" id="add_tag" action="" name="add_tag">
    <button id="demo3GetTags" value="Get Tags">Get Tags</button>
    <ul id="demo3" name="tags[]"></ul>
    <br />
    <input type="submit" name="submit_tag" value="Submit Tag" />
</form>

【问题讨论】：

你有什么问题？
我想在提交逗号分隔标签后获取文本字段值
好的，但是你坚持什么，你的代码中的什么不起作用？
你可以复制上面的代码并在本地签到
提交后没有显示值

标签： php jquery forms tags

【解决方案1】：

您可以在代码中添加以下脚本。

$('input[type=submit]').click(function(){
        tag = $('#demo3').tagit('tags');
        console.log(tag);
        for (var i in tag)
          $('form').append("<input type='hidden' name='tags[]' value='"+tag[i].value+"' >");

      });

所以你的代码将如下所示：

<?php      
    if(isset($_REQUEST['submit_tag'])){
        print_r($_REQUEST['tags']);     
    }
?>
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>jQuery Tagit Demo Page (PHP/ThemeRoller)</title>
<script src="http://webspirited.com/tagit/demo/js/jquery.1.7.2.min.js"></script>
<script src="http://webspirited.com/tagit/demo/js/jquery-ui.1.8.20.min.js"></script>
<script src="http://webspirited.com/tagit/js/tagit.js"></script>
<link rel="stylesheet" type="text/css" href="http://webspirited.com/tagit/demo/css/jquery-ui-base-1.8.20.css">
<link rel="stylesheet" type="text/css" href="http://webspirited.com/tagit/css/tagit-awesome-blue.css">
<script type="text/javascript">
    $(function () {

      $('#demo3').tagit();    

      $('#demo3GetTags').click(function () {
        showTags($('#demo3').tagit('tags'))
      });
      $('input[type=submit]').click(function(){
        tag = $('#demo3').tagit('tags');
        console.log(tag);
        for (var i in tag)
          $('form').append("<input type='hidden' name='tags[]' value='"+tag[i].value+"' >");

      });
      function showTags(tags) {
        console.log(tags);
        var string = "Tags (label : value)\r\n";
        string += "--------\r\n";
        for (var i in tags)
          string += tags[i].label + " : " + tags[i].value + "\r\n";
        alert(string);
      }
    });
  </script>
<!-- tags -->
<form method="post" id="add_tag" action="" name="add_tag">
  <button id="demo3GetTags" value="Get Tags">Get Tags</button>
  <ul id="demo3" name="tags[]"></ul>
  <br />
  <input type="submit" name="submit_tag" value="Submit Tag"  />

</form>

【讨论】：

【解决方案2】：

使用select:true。并确保为您的<ul>命名

试试这个

 <ul id="demo3" name="tags[]"></ul> //<-- array to post multiples

 $('#demo3').tagit({triggerKeys:['enter', 'comma', 'tab'],select:true});

这里是docs..的链接。

【讨论】：

你在回答这里之前检查过这个吗？
你在评论之前试过这个吗？？无论如何更新了我的答案，提供了更多信息，请检查一下.. 并建议您阅读文档.. 我得到了这些阅读文档。