How to send tags data in a form ?


Topic: How to send tags data in a form ?

jouvrard pro asked 5 years ago

Hello,

I'm interrested by using the tags functionnality, but I don't see how can I retrieve there data when I send my form?

I try in PHP to do a "var_dump($_POST');" but nothing appears about tags.

I though about using the chips events to for example add the value in an hidden field each time a new tag is created, but I think there is a better/easier method?

So, could you help me please? :)

Thanks,

Jerome Ouvrard


Adam Jakubowski staff pro premium priority answered 5 years ago

Hi,

If you want to add value to tags try using <?php echo "your value" ?> inside <span>

Best,

Adam


jouvrard pro answered 5 years ago

Hello,

Sorry, my question was not clear. :)

For example in your support forum when we ask a question, we can add some tags to "categorize" our problem. After that, we can see these tags on the right column so, the values were send with the form.

I tried to do a form with these same tags but with no result. When I submit my form I can't retrieve the tags values, Nothing appears in the $_POST variable about that.

Thanks,

Jerome


Adam Jakubowski staff pro premium priority commented 5 years ago

Okay,

I see you have a problem with php and connecting the form but unfortunately I can't help you because I'm not a php specialist.

However, if you would like to learn more about this topic, I can help you with wordpress solutions that we support https://mdbootstrap.com/education/wordpress/


Sekra24 pro commented 5 years ago

I don't think it is a PHP related problem. He want's to add the values of the chips to the payload of the form submit.

You can scroll down here: https://mdbootstrap.com/docs/jquery/components/badges/ and use the $('.chips-initial').materialChip('data'); method. But it does not work for me in the current version of mdb 4.8.8. Maybe a developer could check this?

Greetings.


jouvrard pro commented 5 years ago

Yes, it's exactly my problem. I'll try some tests this evening, for example by putting the "$('.chips-initial').materialChip('data');" return value in an hidden field when I click on "submit" to see if I can retrive the values.


Adam Jakubowski staff pro premium priority commented 5 years ago

if you want to get something similar like on our support, you can use this https://yaireo.github.io/tagify/


jouvrard pro answered 5 years ago

I did a small test to try to retrieve these values without using tagify but only your component.

Here is my code, it works:

<form action="tags.php" method="post">
            <div class="chips chips-placeholder"></div>
            <div id="myTags"></div>
            <div>
                <input type="submit" value="Envoyer" name="Submit">
            </div>
        </form>

And the javascript:

$('.chips-placeholder').materialChip({
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Tag',
});

var chipClass = $('.chips');
var nbChip = 1;
chipClass.on('chip.add', function(e, chip){
    $('#myTags').append('<input type="hidden" name="mytags[]" value="' + chip.tag + '" id="' + nbChip + '">');
    nbChip++;
});

With this code, each time you create a chip, an hidden field is Added in the form with the value.In the "$_POST" variable you'll find mytags" with all the values (it's an array).

I'll add what is necessary to delete a chip later.

Jerome


jouvrard pro answered 5 years ago

Here is a functionnal code:

If you add a chip, an hidden field is Added in your form

If you delete a chip, the associated field is deleted too

$('.chips-placeholder').materialChip({
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Tag',
});

var chipClass = $('.chips');
var nbChip = 1;
chipClass.on('chip.add', function(e, chip){
    $('#myTags').append('<input type="hidden" name="mytags[]" value="' + chip.tag + '" id="chip_' + nbChip + '">');
    nbChip++;
});

chipClass.on('chip.delete', function(e, chip){
    $('input[value="' + chip.tag + '"]').remove();
});

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.8
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No
Tags