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('');

Is there a maximum number of elements I can bind a jquery event to?

I'm building a simple 1 page app that allows someone to curate a list of json feeds. I'm running into an issue with trying to bind a mouseenter/mouseleave event to all the inputs on the page with a given class. Simply, put the first works and the second does not.
I have to following jquery:
$(".feed").on("mouseenter", ".publish", function(){
console.log("feed")
}); //this is for test purposes
$(".feed").on("mouseenter", ".keys-input", function(){
console.log($(this));
$(this).siblings(".delete").fadeIn(75);
});
$(".feed").on("mouseleave", ".keys-input", function(){
$(this).siblings(".delete").fadeOut(75);
});
and the following html:
<div class="feed"><!-- sorry for the confusion -->
<div class="feed-header">
<h2>pga-2013.json</h2>
<button class="publish button-white-bg button-save">Publish</button>
</div>
<div class="kvRow collapsed">
<span class="delete icon">x</span>
<input type="text" class="keys-input" value="free" disabled=""/>
<input type="text" class="values-input" value="0" disabled=""/>
</div>
</div>
The reason I ask if there is a max number of elements you can bind to is because the ".feed" event triggers and there are only 11 of them on the dom whereas the ".keys-input" event does not and there are 7266 of them on the dom. Either that or I'm blind and doing something dumb...
here's a fiddle with fewer elements but the same code that works http://jsfiddle.net/khLPc/
this is the issue: Event on a disabled input the inputs are disabled so they won't fire events which is bananas to me...

The event is not triggered on the disabled element.
Enable the input and it will work.
Check here, I've enabled one of the input fields:
http://jsfiddle.net/balintbako/khLPc/1
Apparently I have to include some code too:
<input type="text" class="keys-input" value="free"/>

Slow performance with jQuery selector

I'm rendering over 600 forms in an MVC format (php Codeigniter). Each one of these forms has a button labeled "More Options". When you click this button - a hidden div, located in the same parent element, is toggled, displaying more input fields and data. The problem is that the sibling toggle is quick in console, but when I click the actual button, it takes very long to trigger.
Using id's is the recommended fix, but it is slightly impractical when I have this many div elements to go through.
Here is my js file
jQuery(document.ready(function(){
jQuery("form >button[name='more_data'].meta_button").click( function(){
jQuery(this).siblings("div.meta").toggle("fast");
});
});
Here is the structure (there are 650 of these div's, with more to come)
<div>
<li id="bCIya8DZyr4idseJe5cbLA" class="even">
<form action="url" method="post" accept-charset="utf-8">
<div class="space_name"></div>
<button name="more_data" type="button" class="meta_button">More Options</button>
<input type="submit" name="Submit" value="Submit">
<div class="meta" style="overflow: hidden; display: block;">
<div class="meta_block">Set Estimates:
<div class="input_estimate">1:
<input type="number" name="estimate_1" value="" id="estimate_1" class="estimate">
</div>
<div class="input_estimate">2:
<input type="number" name="estimate_2" value="" id="estimate_2" class="estimate">
</div>
<div class="input_estimate">3:
<input type="number" name="estimate_3" value="" id="estimate_3" class="estimate">
</div>
</div>
</div>
</form>
</li>
</div>
Note: I'm running jQuery 1.7.2

Don't use a delegate
Using a delegate (.on() with a selector) like #jrummell suggested is faster when you have multiple event listeners, because you reduce the number of listeners to one.
Simpler selector using a class
So in this case though I would recommend using a simpler selector:
$(function(){
$('.meta_button').on('click', function(){
$(this).siblings('div.meta').toggle('fast');
});
});
This way you have quite simpler selector and less checks when a click is triggered, because there is no delegate. Also the clicks on other elements in the forms are not captured.
Animations slow things down
An animation could slow things down. An animation which is performed over multiple elements simultaneously even more.
Try moving all div.meta elements in a single parent and applying animation only on that single element.
You could also remove the animation entirely by just using toggle() (the comment about the multiple items is still valid in this case).
Example:
$(function(){
$('.meta_button').on('click', function(){
$(this).parent().find('.meta_holder').toggle();
// OR
// $(this).next('.meta_holder').toggle();
});
});

Including jQuery.ui.css made the redisplay incredibly slow. Costly css rules killed the display and slowed down rendering times. The "nudge in the right direction" is in the comments of the question.