title: Edit table row from bootstrap modal
body: <p>In this project, I need to make edit table function. 
  When edit button is clicked a modal will appear.
  The modal will contain a form that has to be filled with current table data from the selected row, and current data will be overwritten when save button is clicked.
  Each new row will have their row ID and an edit button when added to the table.</p>
  
  <p>Here is the snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function add_row() {
    var code = document.getElementById('code').value;
    if (code == "") {
      alert("code empty!");
      return false;
    } else if (isNaN(code)) {
      alert("code must be numbers");
      return false;
    }
  
    var name = document.getElementById('name').value;
    if (name == "") {
      alert("name empty!");
      return false;
    } else if (!(/^[a-zA-Z]+$/.test(name.replace(/\s/g, '')))) {
      alert("name must be letters");
      return false;
    }
  
    var year = document.getElementById('year').value;
    if (year == "") {
      alert("year empty!");
      return false;
    } else if (isNaN(year)) {
      alert("year must number");
      return false;
    }
  
    var major = document.getElementById('major').value;
    if (major == "") {
      alert("major empty!");
      return false;
    }
  
    var address = document.getElementById('address').value;
    if (address == "") {
      alert("address empty!");
      return false;
    }
  
    var email = document.getElementById('email').value;
    var et = email.indexOf("@");
    var dot = email.indexOf(".");
    if (email == "") {
      alert("email empty!");
      return false;
    } else if (et &lt; 1 || dot &lt; et + 2 || dot + 2 &gt; email.length) {
      alert('email must has @ and domain');
      return false;
      console.log('failures');
    }
  
    var phone = document.getElementById('phone').value;
    if (phone == "") {
      alert("phone empty!");
      return false;
    } else if (isNaN(phone)) {
      alert("phone must number");
      return false;
    }
  
    var table = document.getElementsByTagName('table')[0];
    //var newRow = table.insertRow(table.rows.length / 2 + 1);
  
    var table = document.getElementById("data_table");
    var table_len = (table.rows.length/ 2+1) - 1;
    var row = table.insertRow(table_len).outerHTML = "&lt;tr id='row" + table_len + "'&gt;&lt;td id='code_row" + table_len + "'&gt;" + code + "&lt;/td&gt;&lt;td id='name_row" + table_len + "'&gt;" + name + "&lt;/td&gt;&lt;td id='year_row" + table_len + "'&gt;" + year + "&lt;/td&gt;&lt;td id='major_row" + table_len + "'&gt;" + major + "&lt;/td&gt;&lt;td id='address_row" + table_len + "'&gt;" + address + "&lt;/td&gt;&lt;td id='email_row" + table_len + "'&gt;" + email + "&lt;/td&gt;&lt;td id='phone_row" + table_len + "'&gt;" + phone + "&lt;/td&gt; &lt;td&gt;&lt;input type='button' id='edit_button" + table_len + "' value='Edit' onclick='edit_row(" + table_len + ")' data-toggle='modal' data-target='#myModal2'&gt; &lt;input type='button' value='Delete' class='delete' onclick='delete_row(" + table_len + ")'&gt;&lt;/td&gt;&lt;/tr&gt;";
  
  }
  
  function edit_row(no) {
    var code = document.getElementById("code_row" + no);
    var name = document.getElementById("name_row" + no);
    var year = document.getElementById("year_row" + no);
    var major = document.getElementById("major_row" + no);
    var address = document.getElementById("address_row" + no);
    var email = document.getElementById("email_row" + no);
    var phone = document.getElementById("phone_row" + no);
  
    code.value = document.getElementById("code_row" + no);
    name.value = document.getElementById("code_row" + no);
    year.value = document.getElementById("code_row" + no);
    major.value = document.getElementById("code_row" + no);
    address.value = document.getElementById("code_row" + no);
    email.value = document.getElementById("code_row" + no);
    phone.value = document.getElementById("code_row" + no);
  
    var code_data = name.innerHTML;
    var name_data = name.innerHTML;
    var year_data = year.innerHTML;
    var major_data = major.innerHTML;
    var address_data = address.innerHTML;
    var email_data = email.innerHTML;
    var phone_data = phone.innerHTML;
  
  }
  
  function save_row(no) {
    var code = document.getElementById('code').value;
    if (code == "") {
      alert("code empty!");
      return false;
    } else if (isNaN(code)) {
      alert("code must number");
      return false;
    }
  
    var name = document.getElementById('name').value;
    if (name == "") {
      alert("name empty!");
      return false;
    } else if (!(/^[a-zA-Z]+$/.test(name.replace(/\s/g, '')))) {
      alert("name must letters");
      return false;
    }
  
    var year = document.getElementById('year').value;
    if (year == "") {
      alert("year empty!");
      return false;
    } else if (isNaN(year)) {
      alert("year must number");
      return false;
    }
  
    var major = document.getElementById('major').value;
    if (major == "") {
      alert("major empty!");
      return false;
    }
  
    var address = document.getElementById('address').value;
    if (address == "") {
      alert("address empty!");
      return false;
    }
  
    var email = document.getElementById('email').value;
    var et = email.indexOf("@");
    var dot = email.indexOf(".");
    if (email == "") {
      alert("email empty!");
      return false;
    } else if (et &lt; 1 || dot &lt; et + 2 || dot + 2 &gt; email.length) {
      alert('email must contains @ and domain');
      return false;
  
    }
  
    var phone = document.getElementById('phone').value;
    if (phone == "") {
      alert("phone empty!");
      return false;
    } else if (isNaN(phone)) {
      alert("phone must number");
      return false;
    }
  
    var code_val = document.getElementById("code_row" + no).value;
    var name_val = document.getElementById("name_row" + no).value;
    var year_val = document.getElementById("year_row" + no).value;
    var major_val = document.getElementById("major_row" + no).value;
    var address_val = document.getElementById("address_row" + no).value;
    var email_val = document.getElementById("email_row" + no).value;
    var phone_val = document.getElementById("phone_row" + no).value;
  
    document.getElementById("code_row" + no).innerHTML = code_val;
    document.getElementById("name_row" + no).innerHTML = name_val;
    document.getElementById("year_row" + no).innerHTML = year_val;
    document.getElementById("major_row" + no).innerHTML = major_val;
    document.getElementById("address_row" + no).innerHTML = address_val;
    document.getElementById("email_row" + no).innerHTML = email_val;
    document.getElementById("phone_row" + no).innerHTML = phone_val;
  }
  
  function reset_form() 
  {
      document.getElementById("myForm").reset();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal fade" id="myModal2" role="dialog"&gt;
    &lt;div class="modal-dialog modal-sm"&gt;
  
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Edit Data&lt;/h4&gt;
        &lt;/div&gt;
  
        &lt;!--Body pop up--&gt;
        &lt;div class="modal-body"&gt;
  
          &lt;form id="myForm"&gt;
            Code :
            &lt;br&gt;
            &lt;input type="text" placeholder="code" name="code" id="code"&gt;
  
            &lt;br&gt;name :
            &lt;br&gt;
            &lt;input type="text" placeholder="name" name="name" id="name"&gt;
  
            &lt;br&gt;year :
            &lt;br&gt;
            &lt;input type="text" placeholder="year" name="year" id="year"&gt;
  
            &lt;br&gt;major :
            &lt;br&gt;
            &lt;!--&lt;input type="text" placeholder="major" name="major" id="major"&gt;--&gt;
            &lt;form action="/action_page.php" name="major" id="major"&gt;
              &lt;select name="major" id="major"&gt;
                      &lt;option value="Akuntansi"&gt;Akuntansi&lt;/option&gt;
                      &lt;option value="Teknik Infomatika"&gt;Teknik Informatika&lt;/option&gt;
                      &lt;option value="Psikologi"&gt;Psikologi&lt;/option&gt;
                      &lt;option value="Hukum"&gt;Hukum&lt;/option&gt;
                      &lt;option value="Politik"&gt;Politik&lt;/option&gt;
                    &lt;/select&gt;
            &lt;/form&gt;
  
            address :
            &lt;br&gt;
            &lt;!--&lt;input type="text" placeholder="address" name="address" id="address"&gt;--&gt;
            &lt;textarea class="form-control" rows="1" placeholder="address" name="address" id="address"&gt;&lt;/textarea&gt;
  
            &lt;br&gt;Email :
            &lt;br&gt;
            &lt;input type="email" id="email" name="email" placeholder="email"&gt;
  
            &lt;br&gt;phone :
            &lt;br&gt;
            &lt;input type="text" placeholder="phone" name="phone" id="phone"&gt;
          &lt;/form&gt;
  
        &lt;/div&gt;
  
        &lt;div class="modal-footer"&gt;
  
          &lt;button type="button" onClick="reset_form()" id="btnCancel" style="background-color:#800003" class="btn btn-default"&gt;Reset&lt;/button&gt;
          &lt;button type="button" onClick="save_row()" id="btnSave" style="background-color:#003300" class="btn btn-default"&gt;Save&lt;/button&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>