Javascript turn div into form on button click - javascript

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.

Related

I need a clarification of targeting an element from the markup

I am following a class online and the tutor target a <button> document in which I don't really understand how he did it because he used a document.querySelector to target the parent and that's all.
<div class="row">
<form id="task-form" action="index.php">
<div class="input-field col s12">
<input type="text" name="task" id="task" value="">
<label for="task">New Task</label>
</div>
</div>
<button id="add" class="btn">Add</button>
</form>
he then wrote :
document.querySelector('form').addEventListener('submit', function(event) { /* ... */ })
to me what I understand is that the querySelector will only select the firstChild in this case.
The code just targets the <form> and adds a listener for the submit event.
It is not targeting any <button>.
He actually doesn't add listeners to any button. What you confused was the <form> having an onsubmit event listener. Since there is only one button in the form, its type attribute is automatically set to submit, making it trigger the form.onsubmit event every time.
Also, the code is a bit wrong. You open a div, a form, and before closing the form, you close the div. If that was made by the person who runs the course, I would recommend to stop watching that course in general, since it can confuse a lot...

angular div (clickOutside) is called when clicking input inside of div

I am using (clickOutside) directive with div, and it is called when I click input element inside div.
<div class="col-4 align-self-center" (click)="setMethod(true)"
(clickOutside)="setMethod(false)" >
<button type="button" mat-raised-button color="accent" >
<input type="text"
class="form-control"
*ngIf="activeTitle"
[(ngModel)]="title" />
</button>
</div>
You can bind to the (blur) event instead of using (clickOutside). Maybe that would do the trick for you?
Note that the blur event fires when the component loses focus. This means that in order for blur to fire, the HTML element needs to be focused in the first place. E.g. the user has to have clicked on it with the mouse. You can call the focus() method on that element when your user clicks anywhere inside it, thereby ensuring that blur will be fired when the element loses focus.
E.g.:
<div
class="col-4 align-self-center"
(click)="setMethod(true)"
(blur)="setMethod(false)"
>
<button
type="button"
mat-raised-button color="accent"
>
<input
type="text"
class="form-control"
*ngIf="activeTitle"
[(ngModel)]="title"
/>
</button>
</div>

onclick open child window & submit form

so I have a parent and child window
the parent window have some form in it and I plan to fill the form by value passing from child window that is retrieved from mysql database
but, every time the button to open the children window clicked it trigger 2 event
first , it open the children window
second , it submit the form in parent window
my question is why the second event happened ? i didnt put any code to submit the form (on parent window) in onclick event yet
this is my code in parent window :
<script language="javascript">
function openWindow() {
window.open("blabla.php","_blank","height=600,width=400, status=yes,toolbar=no,menubar=no,location=no");
}
</script>
<div class="form-group">
<label>ID USER</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
<input type="text" readonly class="form-control" id='idk' name='idk' placeholder="Submit ID User" required="required" />
<span class="input-group-addon"><button onClick="javascript:openWindow();">Select</button></span>
</div>
</div>
I can't answer you're question without more information. You need to understand what events are being fired when you're click function is being called to do this pass the event to your function. Then you can see the event object and determine what is causing your the second event to be fired. To do this pass the event object into your function and then you can inspect it.
<script language="javascript">
function openWindow(e) {
console.log(e);
window.open("blabla.php","_blank","height=600,width=400,
status=yes,toolbar=no,menubar=no,location=no");
}
</script>
<div class="form-group">
<label>ID USER</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
<input type="text" readonly class="form-control" id='idk' name='idk' placeholder="Submit ID User" required="required" />
<span class="input-group-addon"><button onClick="javascript:openWindow(event);">Select</button></span>
</div>
</div>
I don't know exactly what you are trying to accomplish based on the limited information you gave so this is the best I can do to help you. If you are using bootstrap and I see you are using some bootstrap classes. Bootstrap may be submitting your form on the click. Using e.preventDefault() may stop this behavior.

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>

Can't run function from button onClick

I'm trying to run a function from a button onClick event and for some really strange reason, it doesn't want to work.
I want to get the function to run from the button with the onClick attribute of "all()" however it doesn't work but when I changed it to an anchor with a href attribute of "javascript:all()" it worked?
Html:
<div id="content">
<input id="heroes" type="text" class="form-control" id="tokenfield-typeahead" />
<button id="all" onClick="all()">Select/Deselect All</button>
<button id="random" onClick="random()">Random</button>
<!-- Example Link to Prove Point -->
Example: Select/Deselect All
</div>
jsfiddle: http://jsfiddle.net/spedwards/2T9TA/
Can anyone tell me why this isn't working? If need be, I'll make a javascript click event instead but I'd rather not.
Not sure why its not working, but I tried changing you all name function to allt and it worked:
<a onclick="allt()">Example: Select/Deselect All</a>
function allt() {
//your code
}
I believe you will need a type attribute in your tag. So, try this:
<button id="all" type="button" onClick="all()">Select/Deselect All</button>

Categories

Resources