How can I enhance my InnerHTML on this script?

Head out to http://brucegust.com/javascript/javascript_sandbox.php. I've got to create a form that allows the user to manipulate a number of fields and values without interacting with the database until they're ready to submit their final figures.

I'm doing this in chunks. The first challenge is to move a value from the left column to the right. I've done that, but ultimately I've got to be able to remove that value from the list, so rather than just the value, I need to include some code that includes a button that the user can click on to remove that value.

I'll have several questions pertaining to this project so stay tuned for other enquiries if you're looking to score some points, but this is the first challenge. How do I display a button that can cancel the presence of a particular value on the right hand list?
brucegustPHP DeveloperAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Tom BeckConnect With a Mentor Commented:
Rather than a cancel button, why not make it so un-checking the checkbox removes the value on the right? Makes logical sense, yes?

Script:
<script type="text/javascript">

	function changeCapX_1(value){

		var userInput_1 = document.getElementById('userInput_1').value;

		document.getElementById('capx_1').innerHTML = (value) ? userInput_1 : "";

	}

	</script>

Open in new window

HTML:

<input type='checkbox' onclick='changeCapX_1(this.checked)' value='Change Text'/>
0
 
Julian HansenConnect With a Mentor Commented:
Firstly there are quite a few errors on this page - bets to clean those first.

Secondly I would change the structure slightly - see attached html

This uses JQuery to find out which row was clicked in the left table and to toggle the corresponding row in the right table.
<script type="text/javascript">
$(function() {

  // CAPTURE CLICK EVENT ON A CHECKBOX
  $('input[type=checkbox]').click(function() {

    // GET THE INDEX OF THE ROW THIS CHECKBOX IS IN
    // BY FINDING THE CLOSEST <tr> PARENT
    var index = $(this).closest('tr').index();

    // DEFAULT TEXT FOR A BLANK CELL ON THE RIGHT
    // SO CELL HAS A HEIGHT
    var html = '&nbsp;';

    // IF THIS CHECKBOX IS TICKED THEN SET THE CONTENT
    // TO THE data-value OF THE CHECKBOX
    if ($(this).is(':checked')) {
      html = $(this).data('value')
    }

    // FINALLY SELECT THE CORRESPONDING ROW
    // IN THE RIGHT TABLE AND SET THE html FOR THE CELL
    $('#output tr:eq(' + index + ') td').html(html);
  });
});
</script>

Open in new window

The checkboxes are marked up like so

<input type='checkbox' data-value="200" name="t1_checkbox"/>

Open in new window

Where the data-value is the html5 data attribute for setting custom data for an element.
When the input is checked we use the JQuery .data() function to retrieve this value to update the corresponding cell on the right.
t556.html
0
 
Sar1973Connect With a Mentor Commented:
You could add an onclick event to the button that performs:
document.getElementById("myCheck").checked=false;
or
document.getElementById("myField").value="";
0
 
Tom BeckConnect With a Mentor Commented:
Logically, the checkbox seems unnecessary. The value entered into the textbox in Table 1 can be copied toTable 2 as the user types. If the user deletes what they typed, the copy goes away too.

Also, it looks like you are planning to write a separate function for each row in Table 1 and Table 2. Not necessary. One function can be used to handle all rows.

Example:
http://jsbin.com/tiref/1/edit?html,js,output
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.