I have been trying to store form data in a way, where there be same key but different values separated by , (ma). I am able to send form data via POST for single "key/value" pair but not for a "key/multiple(values)" pair.

Please share your inputs on the same.

 async handleSubmit(event) {
        event.preventDefault();
        const token = localStorage.getItem("token");
        let url = "https://api/slef_domain/assign_dId/?";
        var form = new FormData();
        form.append("sourcedomainID", this.state.sourceDomID);
        form.append("destInfra", this.state.destInID);
        form.append("destdomainID", this.state.destDomID);
        form.append("domainRangeId", this.state.domainRanID);

        // Figure out the way to append the data in form : SOMETHING LIKE BELOW DEPENDING UPON 
        // THE TIMES USER ADDED THOSE ROWS BEFORE SUBMITTING THE FORM
        // form.append("sourcedomainID", this.state.sourceDomID);
        // form.append("destInfra", this.state.destInID);
        // form.append("destdomainID", this.state.destDomID);

        // Here we use the FETCH method to POST data and display the response back on Web.
        await fetch(url, {
            method: "POST",
            body: form,
            headers: { "Authorization": `Token ${token}` },
            "mimeType": "multipart/form-data",
        }).then((results) => {
            return results
        }).then(response => {
            console.log("Actual Response: ", response)
            if (response.status === 204) {
                console.log("Response 204: ", response)
                this.setState({ alertMessage: "Success" })
            }
            else {
                console.log("Response no code: ", response)
                this.setState({ alertMessage: "Unavailable" })
            }
        });
    }

I have been trying to store form data in a way, where there be same key but different values separated by , (ma). I am able to send form data via POST for single "key/value" pair but not for a "key/multiple(values)" pair.

Please share your inputs on the same.

 async handleSubmit(event) {
        event.preventDefault();
        const token = localStorage.getItem("token");
        let url = "https://api/slef_domain/assign_dId/?";
        var form = new FormData();
        form.append("sourcedomainID", this.state.sourceDomID);
        form.append("destInfra", this.state.destInID);
        form.append("destdomainID", this.state.destDomID);
        form.append("domainRangeId", this.state.domainRanID);

        // Figure out the way to append the data in form : SOMETHING LIKE BELOW DEPENDING UPON 
        // THE TIMES USER ADDED THOSE ROWS BEFORE SUBMITTING THE FORM
        // form.append("sourcedomainID", this.state.sourceDomID);
        // form.append("destInfra", this.state.destInID);
        // form.append("destdomainID", this.state.destDomID);

        // Here we use the FETCH method to POST data and display the response back on Web.
        await fetch(url, {
            method: "POST",
            body: form,
            headers: { "Authorization": `Token ${token}` },
            "mimeType": "multipart/form-data",
        }).then((results) => {
            return results
        }).then(response => {
            console.log("Actual Response: ", response)
            if (response.status === 204) {
                console.log("Response 204: ", response)
                this.setState({ alertMessage: "Success" })
            }
            else {
                console.log("Response no code: ", response)
                this.setState({ alertMessage: "Unavailable" })
            }
        });
    }

• javascript

• Could you share what the state look like? and remember that a key must be unique, if you want to add multiple values to a key, you should use an array or other data type – Ricardo Gonzalez Commented Dec 31, 2019 at 16:58

1 Answer 1

You can either use this one if you are using PHP on your server(based on the MDN's example):

form.append('arr[]', 'value1');
form.append('arr[]', 'value2');

or just use:

var arr = ['value1', 'value2'];

form.append('arr', JSON.stringify(arr));

and then JSON.parse to retrieve your array