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.

Prevent JS from moving to another page

I need to prevent the user from moving to another page after click submit button, the code
<div class="form"><div class="pull-left"><input type="checkbox" name="agree" value="check"> I have read and agree to the <b>Copyright Declaration</b></div></div>
<button type="submit" name="add" id="addtocart" class="btn" onclick="if(!this.form.agree.checked){alert('You must agree to the Copyright Declaration.');return false}" >

in the form tag make an attribute called
onsubmit="if(!this.form.agree.checked){alert('You must agree to the Copyright Declaration.');return false}"

Cannot click input element within button element

Take a look at the below markup & fiddle:
http://jsfiddle.net/minlare/oh1mg7j6/
<button id="button" type="button">
<span id="test" style="background:pink;">test element</span>
Add File
<input type="file" name="file" multiple="multiple" id="upload">
</button>
In Chrome, each element within the button can be selected through the developer console and js click events are delegated.
In Firefox/IE you cannot select the child elements or pickup js click events.
Is there a way around this in Firefox/IE?

It is not suggested to use elements inside button and so you can use "div" instead of "button" which will make it working both in mozilla and chrome. Check below
<div id="button" type="button">
<span id="test" style="background:pink;">test element</span>
Add File
<input type="file" name="file" multiple="multiple" id="upload">
</div>
http://jsfiddle.net/oh1mg7j6/8/

It's not a good style.Even I can say that this way is not right.you can set "click" event on your button to click the input.so if you want to hide input[file] element,but leave it clickable you can do like I said.Here is a very good link for events docs and examples.
http://www.w3docs.com/learn-javascript/javascript-events.html

Bootstrap buttons added dynamically render differently to those declared in markup

Like the title says..
I have markup like this:
.spancenter {
margin:0 auto !important;
float:none !important;
text-align:center !important;
}
<div class="row-fluid">
<div class="span12">
<div class="spancenter">
<input id="btnSave" name="btnSave" class="btn" type="button" value="Save" />
<input id="btnCancel" name="btnCancel" class="btn" type="button" value="Cancel" />
</div>
</div>
</div>
If I get that HTML via AJAX (ie. literally say $('#divWrapper').html(thehtml); it renders differently:
(Top one is from AJAX, bottom one is static markup)
In Firebug they look identical.
Why do they render differently?

Inputs are inline elements thus in HTML like in the example above there will be a space between them. There are several ways how to get rid of it, and one of them is to write HTML without spaces, e.g.
<input type="button"
/><input type="button" />
or
<input type="button" /><input type="button" />
Your AJAX response is probably a string without any spaces, so it's like using this hack. That's why buttons are different.
As for a general look — they are the same. Just take the buttons from the bottom row and put them on top of the top raw — you will see that it's an illusion.

value of button using javascript

I have 3 buttons in my form.
All the button actions goes to a same page after clicking it depending upon what button is clicked.
My query is: The name of the buttons are 'add','edit' and 'remove'
When the 'add' button is clicked, using js I need to get the value of that button and similarly for the other two buttons....
Can you please help?

<form>
<script type="text/javascript">
function doAction(value)
{
// Don't really have anything to set...just show the value
alert(value);
}
</script>
<input type="button" value="Add" onclick="doAction(this.value)">
<input type="button" value="Edit" onclick="doAction(this.value)">
<input type="button" value="Remove" onclick="doAction(this.value)">
</form>
There are other ways that involve not even passing the button's value, but they're not as compatible across browsers (IE uses a slightly different event model).
Of course, if you can get by without doing it in Javascript, and can just pass the clicked button to the server, it gets even easier than that...
<form>
<input type="submit" name="action" value="Add">
<input type="submit" name="action" value="Edit">
<input type="submit" name="action" value="Remove">
</form>
and whichever button you click gets put into the url as action=Add or whatever.

What about:
var buttonValue = document.getElementById('IdOfYourButton').value

have you tried: document.getElementById('button_id').value in the js function that you'll call when the button is clicked?

There is target property which you can use.It targets the element which caused the event to occur.
button.addEventListener('click',function(e){
console.log(e.target.value);
});