Develop Reference

Reset particular input filed

I want to reset only a specific input field and display the placeholder on an event but not able to do, there are other methods such as initializing the input field with empty string but it do not display the placeholder as well as it is also a value which I don't want. I want to reset it with null value. How to do it?

it was quite easy, I got confused with empty value and spaces. You only have to do is give your input field some id, and create a button to click and reset the value. in the js, store the value in some variable and just initialize it with empty value when you click the button.
const input = document.getElementById("input-value");
const button = document.getElementById("btn");
button.addEventListener("click",()=>{
input.value = ""; //donot use this input.value=" ", use input.value=""
});

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;
});

Using jQuery input event to conditionally update a <td> innerHTML

I'd like to do something that at least for me is complicated.
I have this in a much larger table:
<table><tr>
<td class="editC" id="comments:942" onchange="TimeLine();" onclick="empty('comments:942');" title="Click to edit..."> Second test of new comment behavior
</td></tr></table>
Here is what is going on:
1) class="editC" = I use Editable to edit and write to the DB.
2) id="comments:942" = the id value
3) onchange="TimeLine();" = The timeLine() function gets information from another DB and puts it into a second HTML table on screen. This works.. no worries.
4) onclick="empty('comments:942')" = empty is a function to empty the field but it does not update the DB. I just want a clean input field to enter new data in place of the existing data.
What I'd like to happen is this.
a) If something is typed into this now empty field, all is good, my save.php code will save it to the DB. This works great.
b) But if nothing is typed into the now empty field, I want the old value put back in place without updating the DB. In my head this would be equivalent to first having cut the current value then pasting it back if nothing new had been typed.
It seems to me that jQuery should be able to do this with the input event.
function empty(thisID){
$(thisID).on('input',function(){
$(this).val() // should get current value
});
document.getElementById(thisID).innerHTML = ''; // empty the field
... but now what? How do I determine if a change was made? How do I replace the original value if a change wasn't made?
}
But now what? How do I determine if a change was made? How do I replace the original value if a change wasn't made?

td elements do not have an input event. It is however possible to nest an <input> tag inside a td.
$("td input").on("focusin", function() {
currentValue = $(this).prop("value");
$(this).prop("value", "");
}).on("focusout", function() {
if($(this).prop("value") === "") {
$(this).prop("value", currentValue);
}
});
Here, when the input is clicked, found using the focusin event, the value of the input is stored in a global variable. It needs to be global, because we have to use this variable in the next function. After the variable is stored, the input field is erased, by setting the value attribute to an empty string.
If the user didn't make any changes and leaves the input field, detected with the focusout event, the value attribute will be reset to what it once was.
Current Fiddle
http://jsfiddle.net/a592awoo/1/

One problem is you are passing in 'comments:942' to your empty function.
So when you do $(thisID) it is trying to find an element <comments:942>. To select by an id you need a #.
You could do this:
$('#'+thisID)
Or simply pass in '#comments:942'.
However, that won't work either. Using a : in an id is typically a bad idea, as it has a special meaning in CSS and jQuery selectors, so you may want to use a - instead. If that's not an option, you can escape the :.
Even with the jQuery selector fixed, I'm not sure how you are trying to get user input on a <td> element. You need an <input> element.
I believe you are trying to accomplish something like this:
$(document).ready(function() {
//this will add a click function to all elements with a class of 'editC'
$('.editC').on('click', function() {
//clear the current value
$(this).empty();
//append an input element
$(this).append($('<input type="text" placeholder="Enter new value">'));
//append a button
var btn = $('<button>Submit</button>');
//add click function on submit button to replace old td value with what is in the input
$(btn).on('click', function() {
//get the parent <td> element
var td = $(this).parent();
//get the previous element's value (the value of the <input> element)
var val = $(this).prev().val();
//remove the input element and button from the td
$(td).empty();
//set the text of the <td> to what was entered in the input element
$(td).text(val);
});
$(this).append(btn);
//unbind the click event, so that it does not perform this function when you click in the input element
$(this).unbind('click');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class='editC' id='comments-1'>Value 1</td>
<td class='editC' id='comments-2'>Value 2</td>
</tr>
</table>

Select text on click for multiple textbox with random IDs

I have multiple textboxes on my page, their ID starts with 'Text' and followed by a random string like this 'Textc0816e05-d7c0-4acc-b233-bef152781cac', How can I have the textbox' value selected when user click on it?

$('input[type=text][id^=Text]').on('click', function() {
console.log(this.value);
});

You can get the clicked textbox value with following code
$('input[type=text][id^=Text]').on('click',function(){
var value = $(this).val();
//do what ever you want with the values
});
You can check the Attributes start with selector doc.

Input field, on focus, assign value, on blur keep value, on focus keep value

Here is what I'm trying to do:
I have a simple input field, if it has an empty value, on focus, I want to give it a value of 12345.
The issue is that once the value becomes 12345, and I put anything (e.g. 7890) after it, click ouside, click back inside, it removes the 7890.
http://jsfiddle.net/4VYpV/
How can I have the 7890 or anything after that act as the value so it does not get erased on blur and focus?

You had focus function bind and the check for a blank val swapped.
Try this:
EDIT: Updated the code to remove the redundant each function based on #karim79's comments
$('.inputField').focus(function() {
if ($(this).val() == '') $(this).val("12345");
});
Working example: http://jsfiddle.net/4VYpV/1/

Like this?
$('.inputField').each(function() {
if($(this).val() == '')
$(this).focus(function(){
if($(this).val() == '')
$(this).val("12345");
});
});