Develop Reference

Javascript turn div into form on button click

I am trying to turn a password row into an input field when the 'change password' button is clicked. I am kind of halfway there already using Jquery. So I have made it so that when you click 'change password' the input field gets added. Also when they click 'back' the original state is shown. If you look on the codepen, you'll notice that after clicking 'back', you can't then click 'change password' again, the jquery doesn't work. Is there a solution to this?
Also I have used jquery 'replaceWidth', is there a better way to do this? I am putting a lot of html into my Jquery and not sure if that's the best way to do it.
Please take a look!
https://codepen.io/liamdthompson/pen/WYwXeK
$("#change").click(function () {
$("#container").replaceWith('<input class="form-control" id="zing" required="required" type="text" value="Change password" id="website_name">');
$(this).replaceWith('<button type="button" id="yeet" class="btn btn-light lighter">back</button>');
$("#yeet").click(function () {
$(this).replaceWith('<button type="button" id="change" class="btn btn-light lighter">Change password</button>');
$("#zing").replaceWith('<div class="" id="container">*********</div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accountmain" style="padding-top:25px;">
<div class="row">
</div>
<div class="row">
<div class="col">
<h6> Password</h6>
</div>
<div class="col" id="container">
*********
</div>
</div>
<button type="button" id="change" class="btn btn-light lighter">Change password</button>
</div>

This is because your #change on click event is bound to the dom element when the page loads.
To bind events to dynamically created elements, bind to the document using the .on feature, like this.

You have to re-attach the event listener again when you insert the button back in.
Otherwise another solution is to use the derived event on the parent class ie.
$('body').on('click', '#change', function(){});
This will affect any element with Id change that has body in its line of ancestors.

Disable click in input in <a> element

I would like to have an input text inside a button like this:
<a onclick="reply_click();" class="btn btn-app btn-app-spinner">
<input type="text" disabled class="form-control small-input">
Set Budget
</a>
this is the result:
The problem is that when the user clicks on the input text, the reply_click() is triggered. I would it to be triggered ONLY when he clicks on the a element (Set Bid).
How can I do it?
See jsfiddle
EDITED
As you can see I want to make it look similar to the buttons in the design as you can see in the JSfiddle

Putting an input inside an a element is invalid HTML. From the spec for a:
Content model:
Transparent, but there must be no interactive content descendant.
input is interactive content, so it cannot appear within an a. Browsers may well choose to rewrite your HTML to put the input after the a to try to make it valid.
So the solution here is not to put an input inside an a. Not only because HTML doesn't allow it (you could work around that with a click handler on a div), but because it's extremely unusual UX, which will be unfamiliar and likely uncomfortable to users.
Having said that, if a browser doesn't relocate the input (or if you replace the a with a div with click handler), you can stop the event from propagating to the a by hooking click on the input and using stopPropgation:
$("a input").on("click", function(e) {
e.stopPropagation();
}):
I'm not recommending it, though.

In theory you can achieve the effect you're looking for with something like this
$(".setBid").click(function(e){
var $input = $(this).find("input[type='text']");
if ($input.is(e.target)
{
//do action
}
})
here's the html
<a class="btn btn-app btn-app-spinner setBid">
<input type="text" disabled class="form-control small-input">
Set Budget
</a>
however, as #TJ said this is NOT valid HTML

This is invalid html! don't do that!
If you must, then just stop propagation by handling a click on the input:
function reply_click(e){
alert("clicked!");
}
function input_click(e)
{
e.stopPropagation();
return false;
}
<a onclick="reply_click();" class="btn btn-app btn-app-spinner">
<input type="text" class="form-control small-input" onclick="input_click(event)">
Set Budget
</a>
This snippet is not cross-browser safe (tested in chrome). Use jQuery, or handle the way other browsers deal with events.

you can do this:
<div class="btn btn-app btn-app-spinner">
<input type="text" class="form-control small-input">
<a onclick="reply_click();" >
Set Budget
</a>
</div>
In your fiddle replace your html with the html that I provide on the answer and you will have what you want.
The trick is that adding the same classes that you have in your a to another element they are going to look like similar.
Then if you want your action fired when user clicks on the "set budget", wrap it with the <a>

You can create a div and use the click on that div. That way you have valid HTML.
function bid(){
alert('bid');
}
function stop(e){
e.stopPropagation();
}
div {
width:200px;
height:60px;
background-color:#f93;
text-align:center;
padding-top:20px;
}
<div onclick="bid()">
<input type='text' onclick="stop(event)">
<p>bid</p>
</div>

You should not wrap the input element inside a link.
Instead, the input needs a label (for accessibility, especially screen reader users) and something that functions as a button (a real button element in the code below). Since you don't have a proper label element, I used WAI-ARIA described-by to link the input field with the button.
<form>
<input type="text" class="form-control small-input"
aria-describedby="ses-budget" />
<br />
<button type="submit" onclick="reply_click();"
class="btn btn-app btn-app-spinner" id="set-budget">Set budget</button>
</form>

How to remove user input from a text input box with Jquery on submit?

I can't seem to get this to work for the life of me. I've tried setting the value to '' with getElementById('guess').value and $('#guess').val, tried using $('#formGuess').reset(), etc. Don't know why the value won't clear out.
Here is my code on this:
js
$('#submit').on('click', function(e) {
e.preventDefault();
var guess = $('#guess').val();
$('#guess').removeAttr('value');
}
HTML
<div class="container center">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-horizontal" method="post" id="guessForm">
<div class="form-group">
<div>
<input type="text" class="form-control" placeholder="Guess" id="guess"/>
</div>
<input type="submit" class="btn btn-success" name="submit" value="Guess" id="submit"/>
</div>
</form>
</div>
</div>

Set empty string as the value of textbox like following.
$('#guess').val('');

First, you should attach a "submit" listener to the form, not to the button, e.g.
<form id="someForm"></form>
$("#someForm").submit(function () {
// your code
});
But if you want to attach it to the button, then you can do that, no worries.
Make sure that the event is called. Are you sure that the function within "click" event is called? Put there a console.log("someText");
If it's called, then make sure that jQuery is getting the right element. Maybe you've made a typo? Maybe there's a missing "#" sign? Or maybe the jQuery is not loaded at all?
Open developers tools and check what's in the console.
Probably you've made a simple mistake - it's always about simple mistakes. : )

From your code,
var guess = $('#guess').val();
you are getting the value not setting.
To set the value
$('#guess').val('');

how to select the button after adding by using html()?

I add some button by using html(), and I want to write a click funtion for them. however, it does not work. and I don't know what is wrong with it.
the html code after using html():
<input type="button" id="save_1" value="a1" />
<input type="button" id="save_2" value="a2" />
<input type="button" id="save_3" value="a3" />
and my selector is:
$('input[id^=save_]').click(function() {...});
$('input').on('click', 'id^=save_', function() {...});
they all don't work.
could you help me? thank you.

start from document, input also isn't there when dom is created:
$(document).on('click', 'input[id^=save_]', function(){
alert('hi');
});
jsfiddle LINK

You have to bind the click event after your .html() function else it won't work.
Because if you bind click event before .html() function it did not get any of the input element (created dynamically) on which you want to bind the click event

Try below snippet: :-)
$(document).ready(function(){
$('input[id^=save_]').on('click',function() {
alert("Event Fired");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="button" id="save_1" value="a1" />
<input type="button" id="save_2" value="a2" />
<input type="button" id="save_3" value="a3" />

If you want to perform some operation on click event of all button then add one common class for e.g: class="btn" in all input type button on which you want to perform click event, then use following JS code::
$(".btn").on("click",function(){
$(this).attr("id");
// your operation
});
$(this) will be the button which you have clicked. Make sure this code is written inside document ready function.

Input Button v. Image

http://jsfiddle.net/Deron/awnqq/9/
I've put this in a fiddle to demonstrate. It's just simple addition using a form inputs and presenting the result. Here's the thing that confuses me...
Two options to accept user input...
<input type="button" value="Get Price" onclick="javascript:add();"><br />
<input type="image" src="http://us.cdn2.123rf.com/168nwm/sqback/sqback0904/sqback090400053/4618216-black-button-isolated-on-white.jpg" onclick="javascript:add();">
Why is it that if I use type="button" the script runs and displays the result in the target input, but if instead I use type="image" (in the fiddle it's the button) the script runs, displays the answer, and then clears the form?
Why in the one case does it stop at the display, and on the other it continues on to helpfully clear the answer?

type=button does not submit the form. type=image does. This is based on what type of button gets created according to specifications

Use this instead to overlay a button on top of an image:
http://jsfiddle.net/awnqq/15/
Alternatively you could make a div with the image in and use some javascript to make it clickable.
<button type="button" style="border: 0; background: transparent" onclick="javascript:add();">
<img src="http://us.cdn2.123rf.com/168nwm/sqback/sqback0904/sqback090400053/4618216-black-button-isolated-on-white.jpg" alt="submit" />
</button>