Reputation: 59

How to add input value to html table column after pressing a button (javascript)

I have a form that will ask for user input and it included drop down list and entry box. After user inserted the value and press on "OK", those value should be appear on my html table based on their category. The html table row will be add automatically when it detect a second value inserted by the user. Currently I have created the html form and it will automatically added when I pressed on add new header, but how can I add the row by knowing there is a new input by the user? All the value should be store in the respective column.

When user input a new value and press OK, the system will check whether the first row value is exist or not, if its exist it will display the new value (Event parameter, type of condition and Value to match) to the next row.

A form will pop up for user to enter the value
After user click on OK, all the value will store at the first row

When user add another input and click OK, a second row will automatically appear and display the second input at second column.

Another input entered by user

My html

<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,500" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>


body {font-family: 'Quicksand', sans-serif;}
.button {**
  border-radius: 50px;
  background-color:  #ff9633;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  padding: 10px;
  width: 80px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  margin-left:500px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 45%;

  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}


/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #ff9633;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #ff9633;
  color: white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #ff9633;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color:
#fa7d34;
}
</style>
</head>
<body>


<ul>

  <li><div id="myBtn1"><a href="#AddCon">Alert Policies</a></div></li>
  <li><a href="#contact">Test3</a></li>
  <li><a href="#about">Test4</a></li>
</ul>



<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Alert Policies</h2>
    </div>
    <div class="modal-body">

        <p style="font-size:14px">Please select an event parameter as well as the condition type and value that apply.</p>

        <!-- parameter drop down -->
            <form  method="post">

            <label for="Parameter"> <b style="font-size:13px" >  Event parameter to evaluate </b></label>
            <select name="Parameter" id="Parameter" style="width:340px; font-family: 'Quicksand', sans-serif;">
                <option disabled selected value>select a parameter</option>
                <option value="Subject">Subject</option>
                <option value="Text">Text</option>

            </select>
            <br><br>

            <label for="Condition">   <b style="font-size:13px" >  Type of condition </b></label>
            <select name="Condition" id="Condition" style="width:340px; margin-left:69px; font-family: 'Quicksand', sans-serif;">
                <option disabled selected value>select a condition</option>
                <option value="Equals">Equals</option>
                <option value="Contain">Contain</option>
                <option value="NotContain">Does not contain</option>

            </select>
            <br><br>

            <label for="valuetomatch"> <b style="font-size:13px" > Value to match</b></label>
            <input type="text" id="valuetomatch" name="valuetomatch" style="width:333px; margin-left:80px; font-family: 'Quicksand', sans-serif;">
            <br>
            <br>
<button  class="button" ><span>OK</span></button>
  </form>



    </div>


  </div>

</div>

<form id='test' method="post">

    <div class="table-responsive">
        <table id="form_table" class="table table-bordered">
            <tr>
                <th>No</th>
                <th>Event parameter to evaluate</th>
                <th>Type of condition</th>
                <th>Value to match</th>

            </tr>
            <tr class='case'>
                <td><span id='snum'>1.</span></td>
                <td><input class="form-control" type='text' disabled name='eventpara[]'/></td>
                <td><input class="form-control" type='text' disabled name='typecondition[]'/>
                     <td><input class="form-control" type='text'  disabled name='valuematch[]'/>
                    <table class="table table-bordered"></table>
                </td>
            </tr>
          </table>
          <button type="button" class='btn btn-success addmore'>+ add new Header</button> <br>
    </div>
    <input type="submit" name="submit" value="Submit" class="btn btn-info">
</form>




<script>

//add tablebox
$(document).ready(function(){
    $(".addmore").on('click', function () {
        var count = $('#form_table')[0].rows.length;
        var data = "<tr class='case'><td><span id='snum" + count + "'>" + count + ".</span></td>";
        data += "<td><input class='form-control' type='text' disabled name='eventpara[]'/></td><td><input class='form-control' type='text' disabled name='typecondition[]'/><td><input class='form-control' type='text' disabled name='valuematch[]'/><table class='table table-bordered'></table></td></tr>";
        $('#form_table').append(data);
    });
    $('form#test').on('click', '.childtbl', function () {
        var $titlesTable = $(this).next('table')[0];
        var titlesCount = $titlesTable.rows.length + 1;
        var data1 = "<tr class='case1'><td><span id='snum1" + titlesCount + "'>" + titlesCount + ".</span></td>";
        data1 += "<td>Title:<input class='form-control' type='text' name='wr[]'/></td></tr>";
        $($titlesTable).append(data1);
    });
});

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn1");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

Upvotes: 0

Answers (1)

vishwas

Reputation: 94

Add id to the modal form button

<button id="addData"  class="button" ><span>OK</span></button>

Create an empty array in script

<script>
    var arrayOfData = []

Add the following code in the jquery

$("#addData").on('click', function () {
  const parameter = $('#Parameter').val()
  const condition = $('#Condition').val()
  const value = $('#valuetomatch').val()

  arrayOfData.push({
  parameter,
  condition,
  value
  })

  var data = `<tr><th>No</th><th>Event parameter to evaluate</th><th>Type of condition</th><th>Value to match</th></tr>`;

  arrayOfData.forEach((item, index) => {
    data += `<tr class='case'><td><span id='snum${index + 1}'>${index + 1}</span></td><td><input class='form-control' type='text' disabled name='eventpara[]' value="${item.parameter}"/></td><td><input class='form-control' type='text' disabled name='typecondition[]' value="${item.condition}"/><td><input class='form-control' type='text' disabled name='valuematch[]' value="${item.value}"/><table class='table table-bordered'></table></td></tr>`
  })
  $('#form_table').html(data);
});

Upvotes: 1

How to add input value to html table column after pressing a button (javascript)

Answers (1)

Related Questions