JS to change data in table dynamically

Question

I'm creating an interface that will take data from 2 different databases, feed that data to the interface and use the interface to determine which piece of information will be stored into a new database. (Basically creating a system to merge databases but the user gets to choose what data gets passed to the new database.) In this interface there would also be a text box so the user can input the data in case both databases have the incorrect data.

Currently I'm working with the part of the 2 databases only and wanted to implement a type of checkbox system where the user would check one box to choose the data and if they wanted the other one the previous checked box would go to false.

I found a way to do it but it would take the whole form in and once you tried it with another table row it would crash. I wanted to try and make the JS independent for each table row. Is there a way to implement such a mechanism to each row? This is my current code: (Ps. The HTML used to be a PHP file)

HTML:

<html>
  <head>
    <script src="jquery-1.12.4.min.js"></script>
    <script src="formAdd.js"></script>

    <link rel="stylesheet" type="text/css" href="dbInfo.css">
    <title>Database 1</title>
  </head>
  <body>
    <form name="contactform" method="post" action="">
      <table id="Forms" width="100%">
        <col width="10%" >
        <col width="30%" >
        <col width="30%" >
        <col width="30%" >
        <tr>
          <th style="background-color:#7FCCCC"> Fields </th> 
          <th style="background-color:#7FCCCC"> DB 1 </th> 
          <th style="background-color:#7FCCCC"> DB 2 </th> 
          <th style="background-color:#7FCCCC"> DB Nueva </th> 
        </tr>
        <tr style="background-color:#CCCCCC">
          <td style="font-weight:bold"> Fecha UTC </td> 
          <td> <input type="checkbox" name="FechaUTC1" onclick="CopyF(this.form)" value="September 14" align="right"> September 14 </td>  
          <td> <input type="checkbox" name="FechaUTC2" onclick="CopyF2(this.form)" value="November 17" align="right"> November 17 </td> 
          <td> <input type="text" name="FechaUTC3" size="60"> </td> 
        </tr>
      </table>

        <!-- <tr>
          <td style="font-weight:bold"> Fecha Local </td> 
          <td> <input type="checkbox" name="FechaLoc1" onclick="CopyFLoc(this.form)" value="<?php echo $test ?>" align="right"> Septiembre 13, 2016 23:06:31 Hora Local </td>
          <td> <input type="checkbox" name="FechaLoc2" onclick="CopyFLoc3(this.form)" value="<?php echo $test ?>" align="right"> Noviembre 14 2016 23:06:31 Hora Local </td>
          <td> <input type="text" name="FechaLoc3" size="60"> </td> 
        </tr>

        -->
        </table>
      <p>
        <input type="submit" value="Submit">   
      </p>
    </form>
  </body>
</html>

JS:

function CopyF(f) {
  if(f.FechaUTC1.checked == true) {
    f.FechaUTC3.value = f.FechaUTC1.value;
    if(f.FechaUTC2.checked == true)
        f.FechaUTC2.checked = false;
  }
}

function CopyF2(f) {
  if(f.FechaUTC2.checked == true) {
    f.FechaUTC3.value = f.FechaUTC2.value;
    if(f.FechaUTC1.checked == true)
        f.FechaUTC1.checked = false;
  }
}

Also, i believe the first part of your functionality can be done by using a radio box instead of a checkbox. — Jhecht
– Jhecht, Commented Oct 17, 2016 at 0:02

Jhecht · Accepted Answer · 2016-10-17 00:13:09Z

For the first part of your question, I believe you would be better off using a radio button as it already has the type of functionality you are attempting to use (only one of them can be clicked). You could very easily add in a third option that says "other" and that would therefore enable the input box you could write in.

The easiest way to ensure that it doesn't crash is to make sure that the row number for each set of radio boxes is unique.

I am using a library here called jQuery. It is hugely popular and comes with a lot of built in functionality. If you have never used jQuery before I recommend going to CodeSchool and going through at least the first part to familiarize yourself with what I have written.

$(function() {
  // this way of calling the dollar sign ($) function is a shorthand for $(document).ready();
  $('input.fecha-unico').on('click', function() {
    //I am adding an event to all inputs with the class 'fecha-unico'
    var $this = $(this); //the this object is itself just the HTMLElement object from your browser. Here I am wrapping it in the jquery functions to allow myself access to the functions jquery has.
    var $input = $this.closest('tr').find('input:text');
    //I am finding the closest TR to this radio element, and then searching ('finding') a textbox child.
    if ($this.val() == '-1') {
      //If this checkbox's value is -1, it means we are using the 'other' checkbox, and need to enable the text input.
      $input.prop('disabled', false);
    } else {
      //Otherwise, we need to make sure the writing thing is disabled (say you clicked the other box but then realized you wanted the first checkbox instead).
      if (!$input.prop('disabled')) {
        $input.prop('disabled', true)
      }
    }
  });

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="contactform" method="post" action="">
  <table id="Forms" width="100%">
    <col width="10%">
      <col width="30%">
        <col width="30%">
          <col width="30%">
            <tr>
              <th style="background-color:#7FCCCC">Fields</th>
              <th style="background-color:#7FCCCC">DB 1</th>
              <th style="background-color:#7FCCCC">DB 2</th>
              <th style="background-color:#7FCCCC" colspan="2">DB Nueva</th>
            </tr>
            <tr style="background-color:#CCCCCC">
              <td style="font-weight:bold">Fecha UTC</td>
              <td>
                <input class="fecha-unico" type="radio" name="FechaUTC1" value="September 14" align="right">September 14</td>
              <td>
                <input class="fecha-unico" type="radio" name="FechaUTC1" value="November 17" align="right">November 17</td>
              <td>
                <label>Other:
                  <input type="radio" class="fecha-unico" name="FechaUTC1" value="-1" />
                </label>
              </td>
              <td>

                <input type="text" name="FechaUTC3" size="60" disabled>
              </td>
            </tr>
            <tr style="background-color:#CCCCCC">
              <td style="font-weight:bold">Fecha UTC</td>
              <td>
                <input class="fecha-unico" type="radio" name="FechaUTC2" value="September 14" align="right">September 14</td>
              <td>
                <input class="fecha-unico" type="radio" name="FechaUTC2" value="November 17" align="right">November 17</td>
              <td>
                <label>Other:
                  <input type="radio" class="fecha-unico" name="FechaUTC2" value="-1" />
                </label>
              </td>
              <td>

                <input type="text" name="FechaUTC3" size="60" disabled>
              </td>
            </tr>
  </table>

  <!-- <tr>
          <td style="font-weight:bold"> Fecha Local </td> 
          <td> <input type="checkbox" name="FechaLoc1" onclick="CopyFLoc(this.form)" value="<?php echo $test ?>" align="right"> Septiembre 13, 2016 23:06:31 Hora Local </td>
          <td> <input type="checkbox" name="FechaLoc2" onclick="CopyFLoc3(this.form)" value="<?php echo $test ?>" align="right"> Noviembre 14 2016 23:06:31 Hora Local </td>
          <td> <input type="text" name="FechaLoc3" size="60"> </td> 
        </tr>

        -->

  <p>
    <input type="submit" value="Submit">
  </p>
</form>

This worked perfectly! I am going to run the full JQuery course to become more familiar with JQuery. Thank you!

Collectives™ on Stack Overflow

JS to change data in table dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related