Solved

How can I enhance my InnerHTML on this script?

Posted on 2014-02-21
4
161 Views
Last Modified: 2014-03-04
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?
0
Comment
Question by:brucegust
  • 2
4 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 250 total points
Comment Utility
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
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 125 total points
Comment Utility
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
 
LVL 9

Assisted Solution

by:Sar1973
Sar1973 earned 125 total points
Comment Utility
You could add an onclick event to the button that performs:
document.getElementById("myCheck").checked=false;
or
document.getElementById("myField").value="";
0
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 250 total points
Comment Utility
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now