0

Can someone please help with collecting the form data from below. The following mark up is looked for x number of customers although I'm struggling to extract the data from the form successfully.

Many thanks, James

<h5 id="Customer1">
    <span>Customer 1</span>
</h5>

<div class="CustomerWrapper">
<input type="hidden" value="0" id="CustomerType0" name="CustomerType0">

<span class="TitleSelect">  
    <label for="CustomerTitle0">Title</label>
    <select id="CustomerTitle0" name="CustomerTitle0">
    <option value="-1"></option>
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>
    <option value="4">Miss</option>
    </select>                                   
</span>

<span class="FirstInput">
    <label for="FirstName0">First Name</label>
    <input type="text" value="" name="FirstName0" id="FirstName0">
</span>

<span class="LastInput">
    <label for="LastName0">Surname(s)</label>
    <input type="text" value="" name="LastName0" id="LastName0">
</span>

My attempt is faily close as I just need the first and lastnames.

$('.PaxDetails .CustomerWrapper').each(function (index) {

    var counter = ++index;
    var firstName = "#FirstName" + counter;
    var lastName = "#LastName" + counter;

    var customerName = $(firstName).val() + ' ' + $(lastName).val();

    alert(customerName);

});
James Radford
  • 1,815
  • 4
  • 25
  • 40

1 Answers1

0

Doku: .serialize()

$("<selector to get the form>").serialize();

Edit
If you only need the first and last name then you will have to do it by hand...

var customer = [];

$("div.CustomerWrapper").each(function(i, el) {
    customer.push({
        "FirstName": $("#FirstName" + i, el).val(),
        "LastName": $("#LastName" + i, el).val()
    });
});

console.log(customer);

jsfiddle

Andreas
  • 21,535
  • 7
  • 47
  • 56