Как отправить форму со списком связанных полей?

Question

Я не мог придумать лучшего заголовка, но проблема в том, что у меня есть форма для пользователей, и у пользователя может быть один или несколько телефонных номеров. Дополнительные поля телефона добавляются с помощью скрипта js, поэтому количество полей телефона является произвольным. Я хочу сгруппировать эти поля в уникальный список объектов.

Пример (отметьте его здесь ):

<form method="post" action="#" class="container">
  <div class="form-group row">
    <label for="name" class="control-label">Name</label>
    <input type=text name="name" class="form-control" />
  </div>

  <fieldset id="phones" name="phones" class="form-row">
    <div class="form-group col-sm-2 clonable">
      <label for="label" class="control-label">Label</label>
      <input type=text name="label" class="form-control" />
    </div>

    <div class="form-group col-sm-2 clonable">
      <label for="number" class="control-label">Phone</label>
      <input type=text name="number" class="form-control" />
    </div>

    <div class"form-group col-sm-1">
      <input id="btnaddphone" type="button" value="Add" class="btn btn-primary" />
    </div>
  </fieldset>

  <div class="form-group row">
    <input type="submit" value="Submit" class="btn btn-success col-sm-2" />
  </div>
</form>

Я хочу отправить эту форму, структурированную как следующее json

{
    {name: "name", value: "..."},
    {name: "phones", value: [
        {name: "label", value: "..."}, {name: "number", value: "..."},
        {name: "label", value: "..."}, {name: "number", value: "..."}, ...
    ]}
}

И не так, как по умолчанию:

{
    {name: "name", value: "..."},
    {name: "label", value: "..."}, {name: "number", value: "..."},
    {name: "label", value: "..."}, {name: "number", value: "..."}, ...
}

Есть ли простой способ сделать это, используя только HTML / JS?

Если нет, есть ли способ настроить его на странице бритвы для ASP. NET MVC?

Answer 1

Если вы говорите о данных формы, это может быть решением:

<form method="post" action="http://foobar.com" class="container">
  <div class="form-group row">
    <label for="name" class="control-label">Name</label>
    <input type=text name="name" class="form-control" />
  </div>

  <fieldset id="phones" class="form-row">
    <div class="form-group col-sm-2 clonable">
      <label class="control-label">Label</label>
      <input type=text name="phones[0][label]" class="form-control" />
    </div>

    <div class="form-group col-sm-2 clonable">
      <label class="control-label">Phone</label>
      <input type=text name="phones[0][number]" class="form-control" />
    </div>

    <div class"form-group col-sm-1">
      <input id="btnaddphone" type="button" value="Add" class="btn btn-primary" />
    </div>
  </fieldset>

  <div class="form-group row">
    <input type="submit" value="Submit" class="btn btn-success col-sm-2" />
  </div>
</form>

Уведомление <input name="phones[...][...] /> - вам нужно проиндексировать вашу текущую группу (номер телефона и номер телефона) и использовать этот индекс в название. Вам нужно в конечном итоге получить в DOM следующее: N - текущий добавленный индекс телефона:

    <div class="form-group col-sm-2 clonable">
      <label class="control-label">Label</label>
      <input type=text name="phones[0][label]" class="form-control" />
    </div>

    <div class="form-group col-sm-2 clonable">
      <label class="control-label">Phone</label>
      <input type=text name="phones[0][number]" class="form-control" />
    </div>

    <!-- N-1 repetitions ... -->

    <div class="form-group col-sm-2 clonable">
      <label class="control-label">Label</label>
      <input type=text name="phones[N][label]" class="form-control" />
    </div>

    <div class="form-group col-sm-2 clonable">
      <label class="control-label">Phone</label>
      <input type=text name="phones[N][number]" class="form-control" />
    </div>

Это основано на этом ответе .

Answer 2

Попробуйте этот скрипт, он должен дать структуру JSON.

<script>
    function toObject(arr){
        var rv = {};
        for(var i=0; i<arr.length; ++i){
            if(i % 2 == 0){
                rv['name'] = arr[i];
            }else{
                rv['value'] = arr[i];
            }
        }
        return rv;
    }
    $("form").on("submit", function(event){
        event.preventDefault();
        var textInputs = document.body.querySelectorAll('input[type="text"]'),
        nameArr = [],
        phonesArr = [],
        phonesvalArr = [];
        for(i=0; i<textInputs.length; i++){     
            var entry = [],
            inputnameVal = textInputs[i].name,
            inputvalueVal = textInputs[i].value;        
            if(i == 0){
                nameArr.push(inputnameVal);
                nameArr.push(inputvalueVal);    
                nameArr = toObject(nameArr);
                phonesArr.push('phones');           
            }else{
                entry.push(inputnameVal);
                entry.push(inputvalueVal);
                entry = toObject(entry);            
                phonesvalArr.push(entry);           
            }       
            if(textInputs.length == i+1){
                phonesArr.push(phonesvalArr);
                phonesArr = toObject(phonesArr);
                var output = "{"+JSON.stringify(nameArr)+","+JSON.stringify(phonesArr)+"}";
                console.log(output);
            }   
        }

    });

</script>