Develop Reference

jQuery change value of input and display it as text

I'm struggling with the following problem. I have input text element. I want a user to enter something there and then his value appears as a normal text (the input should disappear).
I searched for a few solutions but nothing worked for me. What I tried (whatever function I provide, I get no results, what should I provide to get the effect I described above and how to make it happen?):
$('input.modified').on('input', function(){
(this).append('<p>some</p>');
});
OR
$("input.modified").bind("propertychange change keyup paste input", function(){
$(this).append("<p>dgdgd</p>");
});
OR
$("input.modified").change(function(){
$(this).css("visibility","hidden");
}); //end change function
How to make functions like .on() or .change() work with my code?
thanks for all the answer, but I can't move your examples to my code :(
Please verify this fiddle what I'm missing:
[http://jsfiddle.net/w6242/][1]

Check this DEMO
HTML:
<input class="modified" type="text"/>
<p></p>
JS:
$("input.modified").change(function(){
$('p').html($(this).val());
$(this).css("visibility","hidden");
});

check this
Fiddle
$("#in").focusout(function(e){
$("span").html(($("#in").val()));
$(this).hide();
});

Here a fiddle http://jsfiddle.net/keypaul/NsWC5/5/
HTML
<div id="wrapper">
<input type="text" id="writer" />
send
</div>
JQuery
$("#submit").click(function(e){
var txt = $("#writer").val();
$("#writer").fadeOut(400);
$("#submit").fadeOut(400, function(){
$("#wrapper").append('<div id="text">' + txt + '</div>').hide().fadeIn(600);
});
e.preventDefault();
});
If you need to do that with onther event (instead of a click submit) you can use onchange or focusout applied to your input element

At its simplest, assuming you really want to replace the input:
$('#demo').on('keyup', function(e){
if (e.which === 13) {
var p = $('<p />', {
text : this.value
});
$(this).replaceWith(p);
}
});
JS Fiddle demo.
Or, to insert an adjacent element and simply hide the input:
$('#demo').on('keyup', function(e){
if (e.which === 13) {
var span = $('<span />', {
text : this.value
});
$(this).hide().after(span);
}
});
JS Fiddle demo.
The above jQuery works with the following demonstrative HTML:
<input id="demo" type="text" />
References:
after().
hide().
on().
replaceWith().

How to replace a button on click using jquery

I have a button currently available with an id :
<input type="button" id="show_button" value="Show" />
What I want is that..onclicking the button , the value of the button will be changed to "Hide" and it's id will be changed to "hide_button".. And on clicking the hide button it's value will be changed to "Show" and it's id will change to "show_button"..How can I achieve that?

i don't know why you want to change the id since we can get what you want without changing the ids..
try this
$('#show_button').click(function(){
var $this=$(this);
$this.val(($this.val()=="Show")?"Hide":"Show");
});
this is better since you don't have to use two click event handler for both the ids..
and if incase you need to change the ids.. then use on event delegation ..
$(document).on('click','#show_button',function(){
var $this=$(this);
$this.prop('id','hide_button');
$this.val("Hide"); //OR $this.val("Hide") //if you are using input type="button"
});
$(document).on('click','#hide_button',function(){
var $this=$(this);
$this.prop('id','show_button');
$this.val("Show"); //OR $this.val("Hide") //if you are using input type="button"
});
fiddle here

You can change value using
$('#show_button').val('hide');
You can change id using
$('#show_button').attr('id','hide_button');

$('body').on('click', '#show_button, #hide_button', function() {
var $this = $(this),
isShow = $this.attr('id') == 'show_button';
if (isShow) {
$this.attr('id', 'hide_button').val('Hide');
}
else {
$this.attr('id', 'show_button').val('Show');
}
});
jsFiddle: http://jsfiddle.net/sW49u/

Working example: http://jsfiddle.net/TjaBR/
$('body').on('click', '#process', function() {
$(this).toggleClass('hidden');
$(this).val($(this).hasClass('hidden') ? 'Hide' : 'Show');
});

Using Jquery Javascript library:
$('body').on('click', '#show_button', function() {
$(this).attr('id', 'hide_button').val('Hide');
});
$('body').on('click', '#hide_button', function() {
$(this).attr('id', 'show_button').val('Show');
});

One solution for your question is have 2 inputs, that you toggle between. I don't like changing/renaming id's principle.
Check this demo.
html
<input type="button" id="show_button" value="Show" />
<input type="button" id="hide_button" value="Hide" style="display:none;" />
jQuery
$('input').click(
function(){
$('input').toggle();
});

Append to a.href id from input field

I am trying to append to a link with id a value that is entered from the input text field. I came this far searching stackoverflow but id doesn't work!
<script type="text/javascript">
jQuery(function(){
$("#txt_name").keypress(function() {
var value = $("#txt_name").val();
});
$("a#coupon_link").attr("href", function(i) {
return href + '&discount_code='.text(value);
});
});
</script>
and this is how the html looks like
<form>
<fieldset>
<input id="txt_name" type="text" value="discount" />
</fieldset>
</form>
<a id="coupon_link" href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=XXXXXX&cl=YYYYYY&ejc=2" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"><img src="http://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a>

You probably meant this:
$(function() {
$("#coupon_link").on('click', function(e) {
e.preventDefault(); // apparently not needed
location.href = $(this).attr('href') + '&discount_code=' + encodeURIComponent($('#txt_name').val());
});
});
You don't have to update the value of #txt_name on keypress; you only have to use the value when the link is pressed.

Fix your code like this :
$(function(){
$("#txt_name").keypress(function() {
var value = $("#txt_name").val();
var link = $("#coupon_link");
var originalHref = link.attr('originalHref');
if (!originalHref) {
originalHref = link.attr("href");
link.attr("originalHref", originalHref)
}
link.attr("href", originalHref + '&discount_code='+value);
});
});
A few things to note :
never add anything to a selector when you're targeting an element by ID
your value variable wasn't in the same scope
the return of val can be directly concatenated, you don't need to try to change it to text
you don't need to pass a function to attr in your case
you're trying to make the href grow with every key stroke. This is a bad idea. The solution I propose is to keep the original href
if you're not sure the original href has yet some parameters (i.e. has '?') you should test it (I let you do that)
Overall a much cleaner solution wouldn't be to change the link but to build the href on click on the link :
$("#coupon_link").click(function(e) {
location = this.href + '&discount_code=' + $('#txt_name').val();
});

Not sure to understand, but it looks like a scope issue try this javascript :
<script type="text/javascript">
jQuery(function(){
var value = 0;
$("#txt_name").keypress(function() {
value = $("#txt_name").val();
$("a#coupon_link").attr("href", function(i) {
return href + '&discount_code=' + encodeURIComponent(value);
});
});
});
</script>

Try this:
jQuery(function(){
$("#txt_name").keypress(function() {
var value = $("#txt_name").val();
$("a#coupon_link").attr("href", '&discount_code=' + String(value));
});
});

This isnt working because the href isnt being changed as the function is called before a keypress event is triggered. Look into replacing keypress with blur and update the href when blur() is called

i think you need this:
<script type="text/javascript">
$(function(){
$("#txt_name").keypress(function() {
var value = $("#txt_name").val();
$("a#coupon_link").attr("href",href+'&discount_code='+value.toString);
});
});
</script>
look at href don't know where you have that var, if it is needed ok else remove that

You probably need to change the href when a key has been pressed, not only on page load. To do so you will have to do the replacing of the href inside the keyup function, like so:
$(function(){
var link = $("a#coupon_link");
link.data('href', link.attr("href"));
$("#txt_name").on('keyup', function() {
link.attr("href", link.data('href') + '&discount_code='+ this.value);
});
});
So as to not append the &discount_code=*** several times, you need to store the original href somewhere, like in a data attribute.

this one worked for me getting value from input field and append it to the existing link using jquery.
$('#qty').on('keyup', function() {
var theQty = 0;
theQty = $("#qty").val();
var oldHref=$("a#buybtn").attr("href");
$("a#buybtn").attr("href",oldHref+ '&qty=' + String(theQty));
});

When button is clicked how to get the text from the textbox immediately above it

I have some code like:
<input type="text" class="searchpersontxtbox" />
<input type="button" value="Find" class="findpersonbtn btn" disabled="disabled" />
There is a button click event:
$(document).ready(function () {
$('.findpersonbtn').click(function () {
var findpersonbutton = $(this);
var searchbox = $(this).closest('.searchpersontxtbox');
alert(show the searchbox text here);
});
});
So when the button is clicked I'm trying to get the text in the searchbox and alert it to the screen.
One point to note is that there could be multiple searchboxes on the page with 'searchpersontxtbox' class.
So I'm wanting to get the text from the textbox that is right above the button.
Can anyone help me here?

I think hes looking for something relative... like this..
$(document).ready(function(){
$('.findpersonbtn ').click(function () {
var findpersonbutton = $(this);
//do relative search here...
var searchbox = findpersonbutton.parent().find('.searchpersontxtbox');
alert(searchbox.val());
});
});

This isn't how closest works. Without seeing the rest of your markup, one way to do this would be:
$(document).ready(function () {
$('.findpersonbtn').click(function () {
var findpersonbutton = $(this)
, searchbox = $(this).prev();
alert(searchbox.val());
});
});
You can use prev to get the element right above the clicked .findpersonbtn.

$(function(){
$('button').click(function() {
var text = $('textarea').val();
alert(button);
}
});
something like that? search for getting textarea value with jQuery, then apply that method in a variable and alert out it's text. should work?

You may want to check out .previousSibling(), which should return the previous input.
http://jsfiddle.net/TbYup/

replacing element with jQuery

I have <form>s on my page that I want to replace with <button>s. The thing that is causing me difficulty is that I want to use the value of the <form>'s submit input as the html for the button.
<form action="/postcomment/" method="post">
<inputs>
.
.
.
<input type="submit" value="Reply">
</form>
Becomes
<button class="postcomment">Reply</button>
I'm having a hard time wrapping my mind around the chaining here. I need to grab the data values (e.g. "Reply") and then insert them into the button elements in one jQuery operation (or else manage the ordering with something like .index()) and I haven't figure out how to do that yet.

Working example here: http://jsfiddle.net/Mch86/
$(document).ready(function(){
$('form').each(function(){
button = $('<button>' + $('input[type="submit"]', this).val() + '</button>').addClass($(this).attr('action').replace(/\//g, ''));
$(this).replaceWith(button);
});
});

Do something like this:
$('input[type="submit"]').replaceWith(function () {
return $('<button>').text(this.value).addClass('postcomment');
});
jsFiddle Demo
This will replace all of your submit buttons (<input type="submit">) with a <button>, keeping the text on the button.
replaceWith() allows you to use a function as its parameter, which has a reference to the individual submits themselves (this).

Since you said you have multiple forms:
$(function() {
$('form').each(function() {
var str = $(this).find('input[type="submit"]').val();
$(this).replaceWith($('<button/>').addClass("postcomment").text(str));
});
});

You could do:
var label = $('form input:submit').val();
var action = $('form').attr('action').replace(/\//g, '');
var button = $('<button />', { class: action});
button.html(label);
$('form').replaceWith(button)
;
fiddle here: http://jsfiddle.net/be3af/1/