1 button 2 functions

Question

I've got a conflict issue with a form. The idea is that I need to store the datas in the form field in a table with a local storage in Javascript, and I need to send an email simultaneously with the same button with PHP. When I try it, either the button implement the table, either it send the mail. It depends of the position of the action inside the arrows. Here is my code :

<script>
    var Contacts = {
      index: window.localStorage.getItem("Contacts:index"),
      $table: document.getElementById("contacts-table"),
      $form: document.getElementById("contacts-form"),
      $button_save: document.getElementById("contacts-op-save"),
      $button_discard: document.getElementById("contacts-op-discard"),

      init: function() {
        // initialize storage index
        if (!Contacts.index) {
          window.localStorage.setItem("Contacts:index", Contacts.index = 1);
        }

        // initialize form
        Contacts.$form.reset();
        Contacts.$button_discard.addEventListener("click", function(event) {
          Contacts.$form.reset();
          Contacts.$form.id_entry.value = 0;
        }, true);
        Contacts.$form.addEventListener("submit", function(event) {
          var entry = {
            id: parseInt(this.id_entry.value),
            first_name: this.first_name.value,
            last_name: this.last_name.value,
            company: this.company.value,
            address: this.address.value,
            city: this.city.value,
            zip: this.zip.value,
            state: this.state.value,
            country: this.country.value,
            phone: this.phone.value,
            email: this.email.value,
            nature_of_contact: this.nature_of_contact.value,
          };
          if (entry.id == 0) { // add
            Contacts.storeAdd(entry);
            Contacts.tableAdd(entry);
          }
          else { // edit
            Contacts.storeEdit(entry);
            Contacts.tableEdit(entry);
          }

          this.reset();
          this.id_entry.value = 0;
          event.preventDefault();
        }, true);

        // initialize table
        if (window.localStorage.length - 1) {
          var contacts_list = [], i, key;
          for (i = 0; i < window.localStorage.length; i++) {
            key = window.localStorage.key(i);
            if (/Contacts:\d+/.test(key)) {
              contacts_list.push(JSON.parse(window.localStorage.getItem(key)));
            }
          }

          if (contacts_list.length) {
            contacts_list
              .sort(function(a, b) {
                return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);
              })
              .forEach(Contacts.tableAdd);
          }
        }
        Contacts.$table.addEventListener("click", function(event) {
          var op = event.target.getAttribute("data-op");
          if (/edit|remove/.test(op)) {
            var entry = JSON.parse(window.localStorage.getItem("Contacts:"+ event.target.getAttribute("data-id")));
            if (op == "edit") {
              Contacts.$form.first_name.value = entry.first_name;
              Contacts.$form.last_name.value = entry.last_name;
              Contacts.$form.company.value = entry.company;
              Contacts.$form.address.value = entry.address;
              Contacts.$form.city.value = entry.city;
              Contacts.$form.zip.value = entry.zip;
              Contacts.$form.state.value = entry.state;
              Contacts.$form.country.value = entry.country;
              Contacts.$form.phone.value = entry.phone;
              Contacts.$form.email.value = entry.email;
              Contacts.$form.nature_of_contact.value = entry.nature_of_contact;
              Contacts.$form.id_entry.value = entry.id;
            }
            else if (op == "remove") {
              if (confirm('Are you sure you want to remove "'+ entry.first_name +' '+ entry.last_name +'" from your contacts?')) {
                Contacts.storeRemove(entry);
                Contacts.tableRemove(entry);
              }
            }
            event.preventDefault();
          }
        }, true);
      },

      storeAdd: function(entry) {
        entry.id = Contacts.index;
        window.localStorage.setItem("Contacts:index", ++Contacts.index);
        window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry));
      },
      storeEdit: function(entry) {
        window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry));
      },
      storeRemove: function(entry) {
        window.localStorage.removeItem("Contacts:"+ entry.id);
      },

      tableAdd: function(entry) {
        var $tr = document.createElement("tr"), $td, key;
        for (key in entry) {
          if (entry.hasOwnProperty(key)) {
            $td = document.createElement("td");
            $td.appendChild(document.createTextNode(entry[key]));
            $tr.appendChild($td);
          }
        }
        $td = document.createElement("td");
        $td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
        $tr.appendChild($td);
        $tr.setAttribute("id", "entry-"+ entry.id);
        Contacts.$table.appendChild($tr);
      },
      tableEdit: function(entry) {
        var $tr = document.getElementById("entry-"+ entry.id), $td, key;
        $tr.innerHTML = "";
        for (key in entry) {
          if (entry.hasOwnProperty(key)) {
            $td = document.createElement("td");
            $td.appendChild(document.createTextNode(entry[key]));
            $tr.appendChild($td);
          }
        }
        $td = document.createElement("td");
        $td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
        $tr.appendChild($td);
      },
      tableRemove: function(entry) {
        Contacts.$table.removeChild(document.getElementById("entry-"+ entry.id));
      }
    };
    Contacts.init();
  </script>

<form action="mailer.php" method="post" class="onerow">
           
      <label class="col6">First name:
      <input type="text" name="first_name" />
      </label>
   
      <label class="col6">Last name:
      <input type="text" name="last_name" />
      </label>

      <label class="col6">Company:
     <input type="text" name="company" />
     </label>
    
      <label class="col6">Address:
      <input type="text" name="address" />
      </label>

      <label class="col6">City:
      <input type="text" name="city" />
      </label>

      <label class="col6">Postal/zip code:
      <input type="text" name="zip" />
      </label>

      <label class="col6">State/province:
      <input type="text" name="state" />
      </label>

      <label class="col6">Country:
      <input type="text" name="country" />
      </label>

      <label class="col6">Phone number:
     <input type="text" name="phone" />
      </label>

      <label class="col6">Email:
      <input type="text" name="email" />
      </label>

      <label class="col12">Why are you looking for our solutions ?
      
        <SELECT name="nature_of_contact" size="1">
          <OPTION>I'm a distributor and I want to sell your products in my country.
          <OPTION>I'm a beautician I want to buy a product.
          <OPTION>I'm a doctor.
          <OPTION>I'm a distributor.
        </SELECT>
      </label>
    
    <div class="col12">
      <input type="button" id="contacts-op-discard" value="Discard" />
       <input type="submit" id="contacts-op-save" value="Save" />
    <input type="hidden" name="id_entry" value="0" />
    </div>
  </form>
  </div>
  <div></div>
  <div id="tablecontrol" class="col12">
  <h1>Contacts</h1>
  <table id="contacts-table">
    <tr id="contacts-head">
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
      <th>Company</th>
      <th>Address</th>
      <th>City</th>
      <th>Postal/Zip</th>
      <th>State/province</th>
      <th>Country</th>
      <th>Phone number</th>
      <th>Email</th>
      <th>Kind of prospect</th>
      <th>Actions</th>
    </tr>
  </table>
  </div>
  </div>

See JSFIDDLE

Answer 1

One way would be:

1. Change the submit button from type 'submit' to 'button' and add the event onClick()to it.
2. Create a function -let's say readFromdata()- that reads the values from your form. Store the data into a container.
3. Create a function -let's say sendFromdata()- that sends the data to your php script. Hint: Ajax would be your friend. Configure your Ajax so, that the data will be send asyncrosly.
4. Create a function -let's say printFOverview()- that extends your html table, for the displaying the result.
5. Call sendFromdata() and printFOverview() within the function readFromdata() and pass the data container to these methods.
6. Add the call readFromdata() to the attribute onClick().