Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How can I enhance my InnerHTML on this script?

Posted on 2014-02-21
4
Medium Priority
?
169 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 1000 total points
ID: 39877664
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 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 39878115
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 500 total points
ID: 39879468
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 1000 total points
ID: 39879546
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

824 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