Form inputs are not having 'name' attributes

[bhupenderkeswani]

While submitting all details, I wanna do it via ajax and json encoded code. Also i don't know how many fields i would have in each form, it totally depends upon user. So using jquery "serialize" to get data inserted by user.

That is not getting me data, as 'name' attribute is missing from inputs. Can you guys please fix it

[icebob]

You can set name attribute with inputName prop in schema.

[bhupenderkeswani]

It worked fine, thanks
But its not working for all fields

E.g. For checklist its not working

Following is my code
type: 'checklist',
label: 'Annual Income',
model: 'annualIncome',
values: [
{name: 'Upto INR 1 Lakh', value: 'upto1Lakh'},
{name: 'INR 1 Lakh to 2 Lakh', value: 'INR 1 Lakh to 2 Lakh'},
{name: 'INR 2 Lakh to 4 Lakh', value: 'INR 2 Lakh to 4 Lakh'},
{name: 'INR 4 Lakh to 7 Lakh', value: 'INR 4 Lakh to 7 Lakh'},
{name: 'INR 7 Lakh to 10 Lakh', value: 'INR 7 Lakh to 10 Lakh'},
{name: 'INR 10 Lakh to 15 Lakh', value: 'INR 10 Lakh to 15 Lakh'},
{name: 'INR 15 Lakh to 20 Lakh', value: 'INR 15 Lakh to 20 Lakh'},
{name: 'INR 20 Lakh to 30 Lakh', value: 'INR 20 Lakh to 30 Lakh'},
{name: 'INR 30 Lakh to 50 Lakh', value: 'INR 30 Lakh to 50 Lakh'},
{name: 'INR 50 Lakh to 75 Lakh', value: 'INR 50 Lakh to 75 Lakh'},
{name: 'INR 75 Lakh to 1 Crore', value: 'INR 75 Lakh to 1 Crore'},
{name: 'INR 1 Crore & above', value: 'INR 1 Crore & above'}
]

Whereas output of same is

Upto INR 1 Lakh

INR 1 Lakh to 2 Lakh

INR 2 Lakh to 4 Lakh

INR 4 Lakh to 7 Lakh

. . .

INR 1 Crore & above

[bhupenderkeswani]

Whereas its just creating this
input type="checkbox" > INR 1 Lakh to 2 Lakh

[icebob]

Yes because checklist is not a standard input fields. It is many of checkbox input fields.
This inputName only works with type: "input" fields.

[bhupenderkeswani]

Yup, but for checklist, its mentioned to declare "name" and "value" under Values property of that object. But that's not working. Its only rendering input type="checkbox" and "name" as label

E.g. For

type: 'checklist',
label: 'Annual Income',
model: 'annualIncome',
values: [
{name: 'Upto INR 1 Lakh', value: 'upto1Lakh'}
]

it should render something like :

(label) ( Input type="checkbox" name="Upto INR 1 Lakh" value="upto1Lakh" ) Upto INR 1 Lakh (/label)

[MatthiasHertel]

i have the same issue ... to fetch the input values for the form the input needs a name attribut

{
            type: "checklist",
            label: "Technische Hilfsmittel",
            model: "facilities_tech",
            inputName: "facilities_tech",
            featured: true,
            multi: true,
            multiSelect: true,
            values: [
              {name: "notebook", value: "Notebook"},
              {name: "beamer_fernseher", value: "Beamer/Fernseher"},
              {name: "wlan", value: "WLAN"},
              {name: "telko_viko", value: "Telefon-/Videokonferenz"},
              {name: "audio", value: "Mikrofon/Headset"}
            ],
            styleClasses:'col-md-12'
},

render only:

<label><input type="checkbox">wlan</label>

[bhupenderkeswani]

Yup
Figured better way to get data, that's by using VueJS declared variables directly i.e. model name "facilities_tech"

[MatthiasHertel]

yae i hacked it with a formdata append , see below, otherwise i had no data in the form ...
do u have a better solution for that ?

    methods: {
      onComplete: function() {
        var form_data = new FormData($('#form')[0]);
        form_data.append('facilities_tech', this.model.facilities_tech);
        $.ajaxSetup({
            headers: {
                'X-CSRF-Token': '{{ csrf_token() }}'
         }
        });
        jQuery.ajax({
            url: '{{/post/route}}',
            data: form_data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(data){
                console.log(data);
                $('#response').show().find("pre").text(JSON.stringify(data, undefined,4));
                // resetForm:state;
            }
        });
      },