Solved

How can I enhance my InnerHTML on this script?

Posted on 2014-02-21
4
165 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 250 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 56

Assisted Solution

by:Julian Hansen
Julian Hansen earned 125 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 125 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 250 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

Suggested Solutions

Title # Comments Views Activity
JavaScript Loan Calculator Error 3 34
need help with share buttons 11 66
Use Mid in Html 6 21
Getting selected value using Jquery 3 19
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

740 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