创建对象或数组以处理多步骤表单

时间:2017-06-18 10:54:56

标签: javascript jquery arrays forms javascript-objects

我正在创建一个多步骤表单,我可以在其中编写表单名称,在表单中添加步骤和输入类型,然后生成数组或对象(我不确定在我的情况下哪一个是最好的)从该表单,循环执行步骤并获取每个输入类型的信息等。最后,通过Ajax将该对象或数组发送到PHP。

现在,我正试图生成数组或对象,因为我不确定哪一个是最好的,也不知道如何生成它。

我认为我需要的是:

var form = {

    idForm: "form-" + Date.now(),
    name: whatever you want, //get from the form
    steps: {
        0: {
           idStep: "step-" + Date.now(),
           name: get from form,
           fields: {
                0: {
                   idField: "field-" + Date.now(),
                   label: field 1,
                   placeholder: Enter data,
                   name: field 1,
                   required: true,
                   type: text,
                   options: {...} // this one should be added if type is a select, radio or checkbox.
                },
                1: {...},
                2{...}
           }
        },
        1: {...},
        2: {...}
    }

}

有关如何生成它的任何提示?欢迎任何提示。

编辑: 经过一些研究,我终于可以生成上面的对象,我只需要通过步骤进行正常的循环来获取我需要的每个信息(我使用jquery .each())。所以为了填充对象我做了这样的事情:

formObj = {} // create an object

//create the node 'form' in the object and populate with id and name.
formObj.form = { id: "form-"+Date.now(), name: formName.val() };

//then create an array of steps inside the form node            
formObj["form"]["steps"] = [];

等等,就这样我生成了对象。

当我在php中创建一个print_r来检查:

Array
(
    [form] => Array
        (
            [id] => form-1497888655149
            [name] => formulario 1
            [steps] => Array
                (
                    [0] => Array
                        (
                            [name] => step 1
                            [idStep] => step-1497886778424
                            [fields] => Array
                                (
                                    [0] => Array
                                        (
                                            [idField] => input-1497886779390
                                            [label] => txéxt1
                                            [name] => null
                                            [required] => true
                                            [type] => text
                                            [options] => null
                                        )

                                )

                        )

                )

        )

)

1 个答案:

答案 0 :(得分:1)

建议:JSON

由于PHP和JavaScript都具有完全兼容的JSON功能,而JSON非常适合通过HTTP传递数据,因此我个人非常轻松地使用它。

说出你的JS对象;

var foo = { "a": 1, "b": 2, c: [ 1, 2, 3, { erm: "dunno" } ] };

你可以简单地说:

JSON.stringify( foo );

得到类似的东西:

"{\"a\":1,\"b\":2,\"c\":[1,2,3,{\"erm\":\"dunno\"}]}"

你可以发送给你的PHP,可以:

json_decode( $foo, true );

获取关联数组,如:

array (
    'a' => 1,
    'b' => 2,
    'c' => array (
        0 => 1,
        1 => 2,
        2 => 3,
        3 => array (
            'erm' => 'dunno',
        ),
    ),
)

可以按照您期望的所有方式使用,然后根据需要使用:

json_encode( $foo, JSON_HEX_TAG |
                   JSON_HEX_APOS |
                   JSON_HEX_QUOT |
                   JSON_HEX_AMP |
                   JSON_UNESCAPED_UNICODE );

会再次将其恢复为安全字符串。

请参阅JavaScript JSON on MDNPHP JSON on php.net

随时询问更多详情。