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.

Javascript: Emulate/Propagate/Fire a paste event

I have the following page:
<h1>Paste here content!</h1>
<label for="ace">
<div style="min-width:500px;min-height:500px;background-color:#121212;">
</div>
</label>
<input id="ace" style="display:none" type="file" name="file">
Now I want when right-click on div to programmatically paste data to the input with id ace. Is that even possible?
In another words supposing that we copied a file from the filesystem and somewherer we have a button/link/<li> element that says Paste. How can I by clicking on it to fire a paste event to the input element? Any library is acceptable.

Using jquery to trigger a file input/fake button

So I got this button:
<button class="upload-button" type="button">Upload File</button>
which I'm using to cover this default input/browse button:
<input type="file" id="fileinput" name="uploads[]" multiple="multiple">
however when I'm using this script:
$('.upload-button').on('click', function (){
$('#upload-input').click();
});
It does not seem to work, what i want to do is trigger the browse file after the fake button is clicked, i found another post on here where they said that this is because of the visibility of the file input is set to hidden, but when i tried to set it to default, it still did not work. What can the problem be here?

Use trigger :
$('#upload-input').trigger( "click" );

Try to hit the DOM object instead :
$('#upload-input')[0].click();
NOTE : make sure that you've the id upload-input (looks like you need #fileinput instead).
Hope this helps.
$('.upload-button').on('click', function (){
$('#fileinput')[0].click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="upload-button" type="button">Upload File</button>
<input type="file" id="fileinput" name="uploads[]" multiple="multiple">

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>

Alternative to explicitOriginalTarget.id for chrome and IE 8

I'm trying to find a cross browser compatible way of picking out the id attribute of a button that is clicked during a form submit that has two different submit buttons. I was able to accomplish this for FireFox with the following, but it won't work in IE 8 or Chrome because they don't support explicitOriginalTarget.
$("#postForm, #dialogPostForm, #pastPostForm").live('submit', function(event) {
event.preventDefault();
if (event.originalEvent.explicitOriginalTarget.id === 'pastPosts'){
...SNIP...
Can someone suggest a cross browser compatible way to do this?
UPDATE I've tried using the answer from How can I get the button that caused the submit from the form submit event?, but I'd like to use the .live jquery method and use the event object to select the originating input submit id.
UPDATE Here is my form that I am trying to get the originating submit button id from:
<form id="postForm" action="{% url account_tracker mashup.pk %}?fuzzy=true" method="post">
<div class="mygoal">Update Your Progress: {{ form.post }}
<input type="submit" value="+ 1" class="formbtn" style="font-size:18px;"/>
<input type="submit" value="This week" style="font-size:18px;" id="pastPosts" class="formbtn"/>
<span id="result" class="results"></span>
</div>
</form>
UPDATE I came up with my own solution. Add an onclick attribute that adds a "name" attribute to the form. Then in the form processing check if the form name is "past" and do something with it then remove the attribute after the form is finished processing. This works on all browsers as far as I can tell.
<input type="submit" value="This week" style="font-size:18px;" id="pastPosts" class="formbtn" onclick="$('#postForm').attr('name', 'past');" />

There is no alternative.
That is a Firefox-only property.
This is a really old question and needs to be answered.
I've Googled about this and found a solution on http://www.webmuse.co.uk/blog/using-forms-with-multiple-submit-buttons-and-jquery-events/
Basically, try to get the focused element.
An example:
(function($){
$(document).ready(function(){
$('#user_form').submit(function(event){
event.preventDefault(); //stops submission
$('#name_submit')
.text(
//searches all the submit buttons
$('input[type="submit"], button[type="submit"]',this)
.filter(':focus') //finds the focused one
.attr('name') //takes the name
);
});
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<form action="#" id="user_form">
<input type="email" placeholder="Email"/><br>
<input type="password" placeholder="Password"/><br>
<input type="submit" name="login" value="Login"/>
<input type="submit" name="register" value="Register"/>
</form>
<br>
Clicked submit name: <span id="name_submit">(none)</span>
I've tested this and it works in IE7 and Firefox (at least the current version).

Given:
<div id="parent">
<div id="child">
clicky
</div>
</div>
We can apply the following logic: (UPDATED)
$('#parent').live('click', function(e){
var target = e.originalEvent || e.originalTarget;
console.log($(target.srcElement || target.originalTarget).attr('id'));
});
This gives me 'child' in Chrome, IE9, and FF8 if I click on child.