Solved

How can I enhance my InnerHTML on this script?

Posted on 2014-02-21
4
167 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 58

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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
Suggested Courses

617 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