How to submit form with dynamical added textbox in div MVC.?

Question

How to submit form with dynamical added texbox in div MVC. Hi,

I want to submit a form which a textbox (full name),age ,(Phone no,phonenotype) User can add n no. of phone no,phonetype eg.

Name -michale
age-  27
Phone:989878767 phonetype - mobile
Phone 022787656 phonetype-  office

I want to submit this form to save the data in the database. But in formcollection phone,phonetype is coming as separate array . Hence unable to find which phone no. is mobile or office.

Possible duplicate of [Submit same Partial View called multiple times data to controller?](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller) — , Mar 01 '17 at 01:15

score 0 · Answer 1 · answered Feb 28 '17 at 16:54

A dirty way: use a name concatenated with a number:

<body> <div id="listPhones">
    <div>
        <input type="text" name="phone00"/><input type="text" name="phonetype00"/>
    </div> 
 </div> 
 <bouton onclick="addPhone()">More</bouton>

 <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.3.min.js">    </script> 
<script type="text/javascript"> 
function addPhone() {
            var nbr_phone = $("#listPhones").children().length;
            $("#listPhones").append("<div><input type='text' name='phone" + nbr_phone + "'/><input type='text' name='phonetype"+ nbr_phone + "'/></div>"); }      </script> 
</body>

score 0 · Answer 2 · answered Feb 28 '17 at 17:13

How are you constructing the payload you're submitting?

You can POST JSON - e.g.

{"name":"foo", "age":"123", "phone":[{"type":"mobile", "no":"12345"}, {"type":"home", "no":"345678"}]}

If you're building <input />s, then something like this:

   <ul>
    <li>Name: <input type="text" name="name" /></li>
    <li>Age: <input type="text" name="age" /></li>

    <li>Phone type: 
      <input type="radio" name="phone[0][type]" value="mobile" /> Mobile
      <input type="radio" name="phone[0][type]" value="home" /> Home
    </li>
    <li>Phone: <input type="text" name="phone[0][no]" /></li>

    <li>Phone type: 
      <input type="radio" name="phone[1][type]" value="mobile" /> Mobile
      <input type="radio" name="phone[1][type]" value="home" /> Home
    </li>
    <li>Phone: <input type="text" name="phone[1][no]" /></li>

  </ul>
  <input type="submit" value="go" />

Hth.

How to submit form with dynamical added textbox in div MVC.?

2 Answers2