CODEWITHSUNDEEP
phpjqueryformstags
Jassi Oberoi
Jassi Oberoi

Reputation: 1424

How to get a text field value from the form in PHP by using jQuery Tagit

I am using the JQuery Tags Plugin and when user enter some tags by comma separated then i want to get those tags after form submit by using PHP.

my coding...

<?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>

Upvotes: 0

Views: 1338

Answers (2)

Kinjal Bagaria
Kinjal Bagaria

Reputation: 46

You can add following script in your code.

$('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+"' >");

      });

So your code will be look like below:

<?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>

Upvotes: 2

bipen
bipen

Reputation: 36531

use select:true. and make sure you give a name to your <ul>

try this

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

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

here is the link to the docs..

Upvotes: 0

Related Questions