Develop Reference

Add values to text box using buttons - retain and concat original

I've got a text box (called SMS) which is capable of having its value changed by selecting a button (addButton). See the JavaScript
<script>
$(document).ready(function(){
$(document).on('click','.addButton',function(e){
e.preventDefault();
var search_val = $(this).attr('data-value');
$('.sms').val(search_val);
});
});
</script>
I want to be able to add multiple values to this text box without the text boxes value completely updating each time.
For example:
A user can write: hello, your name is (user select 'Name' button and value is inserted'. Your address is (user selects address button).
With my current solution, any button clicked will remove all value form the text box and just insert the value of which ever button was pushed.

Use the function to update it's value:
$('.sms').val(function( index, value ) {
return value + search_val;
});

jQuery (attach, detach, reattach) event handlers issues

What I'm trying to do is to make a Datatable Editable. So the feature flow is this.
When clicking a cell, an input will be CREATED. So, whatever the cell has, it will be overwritten and moved to the value of the created input. (see an example of DataTables Editor, it works like that.)
Upon blur of the input. (Pressing Enter Key also triggers blur)
a. If the value is unchanged, it will return to a normal cell (with its value unchanged of course)
b. If the value was changed, it will stay as an input.
So, if I made an edit to a cell, it should stay as an input upon blur, but if I made an edit to that cell again, this time to input the original value, UPON BLUR, it should NOW shrink back into a cell.
But something weird is happening. This is the flow.
I click one cell, edit, make it lose focus. (so it will stay as an input)
I click another cell, edit, make it lose focus. (it will also stay as an input)
Now, when I click the cell that I've edited first, and retain it back to its original value. UPON BLUR, the cell which I've edited second, also returns back into a cell!
I'm suspecting a scope/reference issue here.
Feel free to see my working code in JSFiddle to understand the problem more.
JSFiddle: http://jsfiddle.net/UvjnT/2512/
For the JSFiddle, try to do these (in first row):
Click cell with Trident value.
Edit it, like add a letter. Like: aTrident
Now lose the focus, it will stay as an input.
Try clicking the cell with Internet value.
Edit it, for me it was: aInternet
Lose focus. It will remain as an input.
Now click the cell with aTrident value.
Edit it back to Trident.
See the bug happen.
To prove you that the feature is working and there's just a bug.
Try editing a cell, lose focus, edit it again to its original value, and watch it shrink back into a cell. :D
Help would be greaaaaaaat! :)
I'm running the following code on each on click of a td element inside the table.
el.html('<input class="table-edit form-control input-sm" type="text" value="' + val + '" />');
el.off('click');
input = el.children('input').first();
input.focus();
input.on('keyup', function(e) {
if (e.which == 13) {
$(this).blur();
}
});
input.on('blur', function(e) {
newVal = $(this).val();
if (val == newVal) {
input.css('font-weight', 'normal');
input.parent('td').css('outline', 'none');
input.off('blur keyup');
input.fadeOut('fast', function() {
el.html(val);
toInput(el, val);
});
} else {
input.parent('td').css('outline', '1px solid #F79421');
}
});

It seems like the problem was here:
input.fadeOut('fast', function() {
el.html(val);
toInput(el, val); // <- this
});
Correction: You forgot add var at newVal = $(this).val();.
This caused the variable newVal to be defined globally.
Corrected JSFiddle

Using jquery how can I clear all the text boxes on a form if I click in one?

I am trying to clear all the text boxes on a form if the user clicks on any one of them. Basically I have some fields from a db from which to search as rows in a table. Then there is a radio button for each row. I want to have it setup so that when the user clicks in a text box it all the other text boxes on the form must have their values set to ''.
So far this code works to clear the current text box:
$(document).ready(function() {
$('.novalue').focus(function() {
$(this).val("");
});
});
All my text boxes in the table has the class="novalue" property. I just cannot figure out how to make it clear all and not just the one.

You were very close. But you don't want to reset $(this), but all input fields of that class:
$(document).ready(function() {
$('.novalue').focus(function() {
$('.novalue').val("");
});
});

You can use this code:
http://jsfiddle.net/V7j3b/1/
$(document).ready(function () {
$('.novalue').focus(function () {
$('.novalue').val("");
});
});

Select Box Trigger Events in Javascript

I have javascript creating a generic select box when you double click in a table cell and when an option is clicked, the select box is removed and the option selected is recorded. The table cell displays the option selected.
However, if the table cell is double clicked and the select box is created, but then you just click out of the select box without selecting an option, the select box remains and the rest of the page from then on breaks.
I want the select box to be removed if the focus is lost, but the onblur method that works with input boxes doesn't seem to work with select boxes.
Does anyone know what event is triggered?
Javascript code when table cell is double clicked to make a select box:
var object_input = document.createElement ("SELECT"); //Put an select box in the cell
object_input.setAttribute("name", "course_price_select");
object_input.setAttribute("id", "course_price_select");
object_input.style.width = (current_cell.clientWidth - 20) + "px";
object_input.attachEvent ("onblur", focus_lost);
object_input.attachEvent ("onkeypress", checkForEnter);
These two lines don't work! (focus_lost and checkForEnter methods start with alert('hi'); so I know they are not being triggered)
object_input.onchange = function() {focus_lost()};
//Populate with options....

attachEvent is an IE only function. You should also bind your events using addEventListener, for example:
if(object_input.addEventListener)
{
object_input.addEventListener('blur', focus_lost);
object_input.addEventListener('keypress', checkForEnter);
}
else
{
object_input.attachEvent('onblur', focus_lost);
object_input.attachEvent('onkeypress', checkForEnter);
}
You can see a jsFiddle demo here.
You should note that addEventListener does not require the events to be prepended with on, while attachEvent does.

Javascript tickbox validation

I am trying to add javascript validation to a bunch of check boxes, basically what I want is as soon as the user has selected 3 tickboxes, it should disable all of the tickboxes except the three that were ticked.
How could I go about doing that?
Thanx in advance!

The following will disable the rest of the checkboxes if you select 3 of them, and also enable them once you uncheck one of the three selected..
$(':checkbox').click(
function(){
var selected = $(':checkbox:checked').length;
if (selected == 3)
{
$(':checkbox:not(:checked)').attr('disabled',true);
}
else
{
$(':checkbox:not(:checked)').attr('disabled',false);
}
}
);
Live demo

Have on onclick handler that when a checkbox is clicked it ups a counter by one if it is unchecked it decreases the count. After raising the count, test to see if it is three. Then probably the easiest method is to either save the ids of the three checked boxes or save them in the previous step. Then change the click event to return true only if the ids match the saved ids.
Sorry I don't have time right now to actually write up any code. Hopefully this will get you started.

jQuery
$("#container :checkbox").click(function(){
if ($("#container :checkbox").length >= 3) {
$("#container :checkbox").attr("disabled", "disabled");
}
});