I have a form where the user can edit their text. I want the user to be able to retrieve their text if they delete it by hitting the cancel button.
How would I be able to retrieve a users text if they edit the original text, and when they press cancel the original text in the form before the edit comes back?
You could use data-* attributes to do this by adding data-original-text to the input like :
<input name='first_input' data-original-text='First input text' value="First input text"/>
And add a click event to the cancel button that will get the data attribute and assign it to the value :
$('form').on('click','#cancel',function(){
$(this).closest('form').find('input').each(function(){
$(this).val($(this).data('original-text'));
})
})
Hope this helps.
$('form').on('click','#cancel',function(){
$(this).closest('form').find('input').each(function(){
$(this).val($(this).data('original-text'));
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input name='first_input' data-original-text='First input original text' value="First input original text"/>
<input name='second_input' data-original-text='Second input original text' value="Second input original text"/>
<button id='cancel'>Cancel</button>
</form>
Something like the following could be built upon so that they could make multiple changes and still have the previous text available on change.
// JavaScript source code
var orginalText = "Please Enter Some Text here";
var newTest = "";
$(document).ready(function () {
$("#target").change(function () {
newText = this.text;
});
$(".cancel").on("click", function () {
$("#target").text(orginalText);
});
});
Related
How i can detect when an input value change when i'm filling the input with the path of imagen getting from filemanager.
I dont even know how it's called when the input is getting filled that way. (After select the image, automatically the input get the path as value)
I already tried this:
$('#my-input').on('change', function() {
alert("You changed the value of the input");
})
$('#my-input').on('input', function() { alert('some text') })
But this only works when user get interaction with the input i mean on keyup, keydown, etc.
Is that possible to do?
Thanks and sorry for the bad english.
If I understand correctly, you want to do this
document.getElementById('my-element').onchange();
after you fill the value via code as opposed to user entering a value.
Example here
document.getElementById('my-button').onclick = fillInput;
document.getElementById('my-input').onchange = inputChanged;
function fillInput(){
document.getElementById('my-input').value = "Test value";
document.getElementById('my-input').onchange();
}
function inputChanged(){
document.getElementById('my-input').style.border = "1px solid green";
}
<input id="my-input" type="text" />
<input id="my-button" type="button" value="Fill Input" />
I am saving the form text(facebook page name) entered by the user into to database.
<form:input type="text" path="fName" value="${bean.fName}" title="Page Name"/>
What i want is when the user enters the fbpage name in the form text it should automatically change into fb-url. For example if user enters "google" the form text should change to "https://www.facebook.com/google".
How can i achieve this by Javascript ?
Hello If I understand your problem that text should be change into url in the same textbox then try the below code
$("#user").change(function() //user is textbox ID
{
$("#user").val("https://www.google.com/"+$("#user").val()); //added google you can use facebook also
});
check below fiddle
Url Fiddle Link
If you want to change the text-box value :
<input type='text' path='fname' id='path' value="${bean.fname}" title="Page Name" onfocusout='changeValue()'/ >
JS :
function changeValue(){
document.getElementById('path').value = "https://www.facebook.com/"+document.getElementById('path').value;
}
Demo
It can be done via jquery too. if you have input like below
<input type='text' id='url' value="" title="Page Name" onblur="getVal()"/>
jquery function
function getVal() {
var link = "https://www.facebook.com/";
$("#url").val(link + $("#url").val());
}
I am trying to make a simple form and button work. I have linked to a JS Fiddle here View JS Fiddle here
<form>
<input type="text" class="form-control" id="search" placeholder="enter sport">
<button type="submit" id="WFFsearch">Search</button>
</form>
$('#WFFsearch').on('click', function () {
var searchInput = $('#search').text();
var url = "http://espn.go.com/" + searchInput + "/statistics";
window.open(url);
});
I want to be able to enter "nba" without the quotation marks and click the search button, then have a new window which generates the following link http://espn.go.com/nba/statistics. The first part and the last part of all the urls will be the same, it's just the middle that changes (nba, nfl, mlb). Any help would be greatly appreciated, thanks!
$('#WFFsearch').on('click', function () {
var searchInput = $('#search').val();
var url = "http://espn.go.com/" + searchInput + "/statistics";
window.open(url);
});
You need val() property, since input is in question, not text(). https://jsfiddle.net/1c93pqj0/2/
you wanna use the .val() instead of .text() as text gets the value between 2 tags <div>here is some text</div> and val gets the value <input value="some value"/>
EzPz! This is a very simple task. First of all though, since you're using jQ to establish your button's click event, you can either drop the attribute type="submit", OR (recommended), create your event on the form's submit. If it were me, I'd id the form and use the forms submit, so that you don't need any alters to your button type="submit" and enter key can still be used in search box to submit the form.
Also, you're trying to .text on an input. Input's have value. In jQuery you can get or set that value by calling .val() instead.
The code:
$('#frmGetStats').on('submit', function (e) {
e.preventDefault();
var searchInput = $('#search').val(),
url = "http://espn.go.com/" + searchInput + "/statistics",
win = window.open(url);
alert("In this sandbox, new windows don't work. \nHowever you can see the link is \n[" + url + "]");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="frmGetStats">
<input type="text" class="form-control" id="search" placeholder="enter sport">
<button id="WFFsearch" type="submit">Search</button>
</form>
To get the value of an input field, use .val(). .text() is for the text in a DOM element.
Clicking on the submit button submits the form by default, which reloads the page and kills the script. You need to return false from the event handler to prevent this.
$('#WFFsearch').on('click', function () {
var searchInput = $('#search').val();
var url = "http://espn.go.com/" + searchInput + "/statistics";
window.open(url);
return false;
});
DEMO
I have a text box, after entering which i need to get that value and display in alert box,without using any forms or buttons.
This is what I used: But its not working ,it gives null value on loading of the file.
HTML
<tr>
<td><br>Address of Patient</td>
<td> <br> <input type="text" name="inc_patientAddress" id="inc_address" required></td>
</tr>
Jvascript
<script type="text/javascript">
var x = document.getElementById('inc_address');
alert(x.value);
</script>
I want to display the text box value after entering the data in text box , Is it possible? Please help
Use blur event:
document.getElementById('inc_address').addEventListener('blur', function() {
console.log(this.value);
}, false);
Demo: http://jsfiddle.net/tusharj/hop3szu4/
Docs: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
Try this
For every input
$('#inc_address').on('input', function() {
alert($(this).val());
});
Working Fiddle Here
For every complete Input
$('#inc_address').on('change', function() {
alert($(this).val());
});
Working Fiddle Here
You need to add blur function for that input.
As soon as it will lost focus from that text box it will call this function and so the alert will be displayed.
<input type="text" name="inc_patientAddress" id="inc_address" onblur="myFunction()" required>
Call this funtion on blur:
myFunction(){
alert("#inc_address").value();
}
What I would like to do is have the text of a button that is editable upon clicking.
I understand how to change the value to one that is hard-coded but what I would like is...
Click the button and a field will appear.
This field would allow you to type in a new name for the button.
After submitting the field, the text of the button would have changed to the field value.
The goal is a button that has a text value which is editable and other buttons which increment a number value associated with how many of the field there are.
| - | Item Name - 1 | + |
or
[subtraction button] | Name of Item - # of item | [addition button]
Thank you very much for your help and time.
See this fiddle
What I have done is that I'll get the text entered in the input field and use it to set the Text of the Button in onClick event of the button.
HTML
<input type="text" id="btn_text" />
<button onclick="myFunction()" id="btn">Click me</button>
JS
function myFunction() {
document.getElementById("btn").innerHTML = document.getElementById("btn_text").value;
}
Did you write your code? You can post it, but if not, you can do the following:
jQuery
$("button").click(function(e) {
e.preventDefault();
$("input").show();
});
$("input").blur(function() {
$("button").text($(this).val());
$(this).val("");
$(this).hide();
});
Or want you a pure js
var bt = document.getElementsByTagName("button")[0];
var input = document.getElementsByTagName("input")[0];
bt.addEventListener("click", function() {
input.style.display = "inline";
});
input.addEventListener("blur", function() {
bt.innerText = this.value;
this.style.display = "none";
this.value = "";
});
html
<button>Click me</button>
<input type="text" style="display:none">
Demo using jQuery: http://jsfiddle.net/x8714jgk/
Demo using pure Js: http://jsfiddle.net/x8714jgk/1/