HTML / Javascript - добавление пользовательского ввода в виде объекта JSON

Question

Я пытаюсь добавить свой пользовательский ввод в виде объекта JSON на сайт localHost. Это моя HTML-страница. Когда пользователь нажимает «Добавить службу», кнопка должна добавить информацию в виде объекта JSON.

HTML-страница.

<table style="width:100%" id= "intake">
<tr><td>
  <label for="firstName">First Name: </label></td><td>
  <input type="text" name="firstName" id="firstName" v-model="firstName"></td> </tr>
<tr><td>
 <label for="lastName">Last Name: </label></td><td>
  <input type="text" name="lastName" id="lastName" v-model="lastName"></td> </tr>
<tr><td>
<label for="member">Member Number:</label></td><td>
  <input type="number" name="member" id="member" v-model="member" min= "1"> </td> </tr>
<tr><td>
<label for="ticket">Ticket Number:</label></td><td>
  <input type="number" name="ticket" id="ticket" v-model="ticket" min= "1"> </td> </tr>
<tr><td>
<label for="phone">Phone Number:</label> </td><td>
  <input type="number" name="phone" id="phone" v-model="phone" min= "1">  </td> </tr>
<tr><td>
<label for="email">Email:</label> </td><td>
 <input type="email" name="email" id="email" v-model="email" > </td> </tr>
 <tr><td>
 <label for="services">Service:</label> </td><td>
    <select name="services" id="services" v-model="services">
      <option value = "0">Options...</option>
      <option value = "1">Bronze Tune</option>
      <option value = "2">Silver Tune</option>
      <option value = "3">Gold Tune</option>
      <option value = "4">Bronze Wax</option>
      <option value = "5">Silver Wax</option>
      <option value = "6">Wax</option>
    </select> </td> </tr>
 <tr><td>
 <label for="notificationPreference">Notification Preference</label> </td><td>
    <select name="notification" id="notification" v-model="notification">
      <option value = "0">Options...</option>
      <option value = "1">1</option>
      <option value = "2">2</option>
      <option value = "3">3</option>
    </select> </td> </tr>
<tr><td>
<button class = "button5" id="add_service">Add Service</button>
</td></tr>
<tr><td>
<label for="notes">Notes:</label> </td><td>
<textarea type="notes" name="notes" id="notes" v-model="notes" input style="height:200px"></textarea> </td> </tr>
</table>
</div>
</form>  

Не все эти опции будут добавлены; Добавляются только имя, фамилия, номер телефона, адрес электронной почты и настройки уведомления.

Это JS-скрипт, который я должен был добавить.

function addCustomer() {    
    document.getElementById('add_service').onclick = function() {      
        var request = new XMLHttpRequest();

        var firstName = document.getElementById("firstName").value;
        var lastName = document.getElementById("lastName").value;
        var phoneNum = document.getElementById("phone").value;
        var emailAddress = document.getElementById("email").value;
        var notifications = document.getElementById("notification").value;

        request.open('GET', url, true);

        request.onload = function () {
            var url = 'localhost:8080/customer/add?
                firstName='firstName'
                &lastName='lastName'
                &custPhone='phoneNum'
                &custEmail='emailAddress'
                &notificationPreference='notifications;
        }
        request.send();
    }​;​
}

Что делает этот JS-скрипт: если пользователь нажимает «Добавить службы», он должен добавить эту информацию в объект JSON.

Это URL, который, когда к нему добавляется пользовательский ввод, добавляет его как объект.

localhost:8080/customer/add?firstName=STRING&lastName=STRING&custPhone=STRING&custEmail=STRING&notificationPreference=INTEGER

Что я здесь не так делаю? Я неправильно добавляю пользовательский ввод в URL или неправильно нажимаю кнопку?

РЕДАКТИРОВАНИЕ: ДОБАВЛЕННЫЙ ОБЪЕКТ JSON Пример

{
    "custID": 100501,
    "custEmail": "test1@test1.net",
    "custPhone": "1115552222",
    "firstName": "TestFirst1",
    "lastName": "TestLast1",
    "notificationPreference": 2
},

Answer 1

Одна проблема, которую я вижу здесь, - неправильный конкат в URL. Вам не хватает оператора «+». Это работает:

var firstName = 'Max';

var url = 'localhost:8080/customer/add?firstName=' + firstName + '&lastName=';
console.log(url);