loop input for each string

[Mike Hemeles]

Hello,
I want to set of my input text value of a string where I split in advance, so for each array of the string set it of input!
I should it like this but the input don't loop.
 

$(function () {
    $('#submit').click(function () {
        var met = $('#nom').val();
        var metiers = met.split(', ');
        var join = "";
        $.each(metiers, function(index, value) {
            join += value;
            $('#input').each(function () {
                $(this).val(join);
            });
        });

    })
});

who can I do so that my input split and have all value of string exploded, thanks

[justsomeguy]

That inner each shouldn't be there, you're trying to loop over everything that has the ID "input" but you should only have 1 element with a certain ID.  I'm not sure what you're really trying to do though, you split something up on commas (followed by a space), then loop through those values and add each one to a string.  So all you're doing is removing the commas and following spaces.

[Mike Hemeles]

ok thanks, so how can I fix it?

[justsomeguy]

Well, what do you want to do?  Right now you're removing commas and spaces, what do you want to do with that value?  If you don't want to remove commas and spaces, what do you want to do?

[Mike Hemeles]

I want, to remove the comma and space, and after get one by one the value and set it to an input Text,
eg: A, B, C, D
so I split this string and it in input Text.

[dsonesuk]

IF you don't have a predefined number of inputs to fill.

You need to on each loop create a input type text, and give each a attribute name and maybe id, that will use the index parameter to give different unique values for each, then append, insert onto page.

[Mike Hemeles]

thanks, I have tried to do your indications like this, 

var count = 1;
$(function () {
    $('#submit').click(function () {
        var met = $('#nom').val();
        var metiers = met.split(', ');
        var join = "";
        $.each(metiers, function(index, valeur) {
            join += valeur + "<br>";

            var element = document.createElement("input");

            element.setAttribute("type", "text");
            element.setAttribute("value", valeur);
            element.setAttribute("name", "txtbox"+ count);

            var vals = document.getElementById("inputbox");

            vals.appendChild(element);
            var br = document.createElement("br");
            vals.appendChild(br);

        });


    })
});

<div id = "inputbox">
    <input type="text" value="A, B, C, D" id="nom">
</div>

I don't know where is wrong but the input doesn't appears 

[dsonesuk]

It works for me once I add the required submit button.

 

Note: don't use count use index.

Edited November 21, 2017 by dsonesuk

[Mike Hemeles]

ok I've wrong with the submit button, now the input appears with the string like this, 

 

[dsonesuk]

Well i don't understand that? I ran the code with submit and it ran fine! That suggests you are gathering all the values and placing in a single input?

[Mike Hemeles]

I change the 

join += valeur + "<br>"

join = valeur

and now it's go well, but the problem now is that when you click two or more times on the submits, the inputs are multiplied so that I want it remains the same even if you always click on, do you know how we do for that?

[dsonesuk]

You don't need join, you can just use the parameter variable from function directly. You need to clear any of these created inputs first before creating new inputs, ignoring the user input text box, either by class name or name attribute that begins with specific string name.

[Mike Hemeles]

ok thanks, I don't understand 

Quote

You need to clear any of these created inputs first before creating new inputs, ignoring the user input text box, either by class name or name attribute that begins with specific string name.

 

[dsonesuk]

When you click submit button, the first thing it should do to prevent duplication of created inputs IS remove any existing created inputs that may exist already, using jquery each loop again looking for attribute 'name' whose value begins with 'txtbox'.

Example for selector is here

https://api.jquery.com/attribute-equals-selector/

Here describes characters you can use to filter out specific inputs

https://www.w3schools.com/css/css_attribute_selectors.asp

Then use remove() to remove these elements that match

https://api.jquery.com/remove/