Convert JSON string to an array in multistep Form in JavaScript?

Question

I am working on dynamic multi step form . What I am doing : 1. creating input fields using AJAX 2. taking input field info from user 3. serializeArray() 4. SUbmit (POST) : before submit convert input values into desired format ex: input type=date convert into utc format, which is working fine.

I have multi step format , in first step , I have two fields which has Student Number, Id type=list(to create array) then click on next button and then I have second step form which has Name , date , address.
I am converting date on submit using below code

var dateTypeField = $('form').find('input[type="date"]').attr('name');
        var dateField = $('form').find('input[type="date"]').val();
        var dateFormat = '';
if (dateField) {
                dateFormat = moment.utc(dateField).format('YYYY-MM-DDThh:mm:ss.SSSZ');
            }
            else {
                dateFormat = null;
            }

which is working fine .

Question : I have two input fields in first step which has type=list , and value in string , I want to convert string into an array while clicking on submit. this is what I am doing

var listTypeField = $('form').find('input[type="list"]').attr('name');
            var inputTypeList = $('form').find('input[type="list"]').val();
            listTypeField = inputTypeList.split(',');
            var listFormat = inputTypeList.split(',');

            var formData = $form.serializeArray();

            formData.push({ name: dateTypeField, value: dateFormat });
            formData.push({ name: listTypeField, value: inputTypeList });

Issue : 1. I have two fields which has type= list , but showing only one field using $('form').find('input[type="list"]').attr('name') 2. spilt is undefined . 3. How to convert string into an array after serializeArray()? formData.push({ name: listTypeField, value: inputTypeList }); not working for me. I want

DanieleAlessandra · Accepted Answer · 2018-10-08 16:03:15Z

First of all I don't know what is a input type="list" in HTML, maybe you have an input list, in that case the selector should be simply $('input[list]').

Second, if you have more than one input with the same type (eg. [type="radio"]) your approach will extract always the name from the last one:

<input type="radio" name="radio2" value="34" />
<input type="radio" name="radio7" value="45" />
// .......
console.log($('input[type="radio"]).length); /// 2
console.log($('input[type="radio"]).attr('name'); /// "radio7" --> Always the name from last element!

You have to list all your input[type="whatever"] and execute your code on every instance, something like this:

$('form').find('input[type="list"]').each(function() {
    /// This block will be executed on every instance
    var listTypeField = $(this).attr('name'); /// "this" is the current instance
    var inputTypeList = $(this).val();
    formData.push({ name: dateTypeField, value: inputTypeList.split(',') });
});

I hope this will help.

jsBee · Accepted Answer · 2018-10-12 17:20:44Z

1

I use switch case to solve this problem

                var name = input.getAttribute('name');
                var value;
                var type = input.dataset.type;
                switch (type) {
                    case "text":
                         value = input.value;
                        break;
                    case "list":
                         value = input.value.split(',');
                        break;
                    case "date":
                        value= input.value ? moment.utc(input.value).format('YYYY-MM-DDThh:mm:ss.SSSZ') : null;
                        break;
                }

                object[name] = value;

answered Oct 12, 2018 at 17:20

jsBee

4133 silver badges14 bronze badges

Collectives™ on Stack Overflow

Convert JSON string to an array in multistep Form in JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related