Develop Reference

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...

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.

How can I preserve initial value using ngModel in angularJS

I'm trying to add a feature for in line editing.
Here's my html:
<div class="value" data-ng-repeat='value in aaVM.archValues'>
<div class="nameContainer">
<div class='name' data-ng-hide='editing' data-ng-click='editing = !editing'>
<span>{{value.name}}</span>
<div class="icon">
<md-icon class="mdIcon" md-svg-src="./resources/images/icons/edit.svg"></md-icon>
</div>
</div>
<form data-ng-submit='aaVM.updateName(value.name); editing= !editing' data-ng-show='editing'>
<input type="text" data-ng-model='value.name'>
<div class="cancel" data-ng-click='editing = !editing'>X</div>
<input type="submit">
</form>
</div>
</div>
Everything works. Here's the issue, because I'm using ng-model to bind the values name in the form, When I hit cancel, the ui will present the edited version of the input(assuming edits were made) despite hitting the cancel button.
I want the user to be able to edit freely, and upon hitting the cancel button, it revert the value back to the original value of value.name.
I could use a different variable, but I want the initial value of the input to be the value from the ng-repeat. Is there a way to temporarily clone the value and retrieve it later in the scope of an ng-repeat. Or any other work around to enable to cancel button in the way I've described? Thanks.

In Angular, Use directive ngModelOptions to change ng-model value on submit event and use $rollbackViewValue to roll back input original value
Try this:
<form data-ng-submit='aaVM.updateName(value.name); editing= !editing' data-ng-show='editing'>
<input type="text" ng-model-options="{ updateOn: 'submit' }" data-ng-model='value.name'>
<div class="cancel" data-ng-click="editing = !editing; value.name.$rollbackViewValue();">X</div>
<input type="submit">
</form>
Official Documentation for more information

Bootstrap remove modal content issue

I know that this question is a duplicate, but i can't find a matching answer for my problem. I am using boostrap 3.2.0 and I have this modal:
<div class="modal fade popup" id="popupSelect">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4 class="modal-title">Select meal</h4>
</div>
<div class="modal-body-select">
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Category</label>
<div class="col-lg-10">
<select name="selectCategory" class="form-control selectCategory"
id="selectCategory">
<option value="0">Select category</option>
<c:forEach items="${categories}" var="category">
<option value="${category.text}">${category.value}</option>
</c:forEach>
</select>
</div>
</div>
<br>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Meal</label>
<div class="col-lg-10">
<select name="selectMeal" class="form-control idMeal" id="selectMeal">
<option value="0">Select meal</option>
</select>
</div>
</div>
<input type="hidden" value="-1" id="hSelectIndex"/>
</div>
<div class="modal-footer">
Close
<input type="button" class="btn btn-warning buttons btnSaveChanges"
value="Save Changes" />
</div>
</div>
First time when the modal is loaded the content is correct. After closing the modal, every time the loaded content is the one selected first time.
I tried to remove the data content using:
function removeModalContent(){
$('#popupSelect').on('hidden', function () {
$(this).removeData();
});
}
But it is not working! What i am doing wrong?
Every time the select button is pressed the modal is loaded. And i need to clear the content every time the modal is "hidden".

When I work with modals I always prefer to clear any user interaction before poping it up. This is how I do it:
1) Subscribe to button click event in order to show the modal window:
$("#btnSearchCustomer").click(function () {
searchCustomers($(this));
});
2) The function searchCustomers shows the pop-up window.
function searchCustomers(btn) {
btn.attr("disabled", "disabled"); // disables the button to avoid loading data more than once
clearSearchForm(); // clears any user input
// checks if the modal has all the data loaded (to avoid loading on start)
if (!searchForIsLoaded) {
loadSearchForm(); // loads any necessary data from the DB using AJAX
searchForIsLoaded = true;
}
$('#mdlSearchForm').modal('show'); // shows the modal window
btn.removeAttr("disabled"); // enables the button again
}
You need to implement the function clearSearchForm for cleaning any field the user has modified.
3) Subscribe to OK button on modal window and do something with user input
4) Hide modal form
I hope it helps

I'm not entirely clear on what your problem is, but first things first, in Bootstrap 3 the event that is fired when a modal is hidden is not hidden, it is hidden.bs.modal (See Bootstrap Docs, under heading 'Events'). So this...
$('#popupSelect').on('hidden', function () {...
will not fire. Change it to...
$('#popupSelect').on('hidden.bs.modal', function () {...
I'm also not clear why that is inside a function called 'removeModalContent'. Really you want to set up the event handler on load. What you would have to do in your current case is call that function just to set up the event listener.
Like I said, not entirely sure on your particular circumstances/problem so if this doesn't help or I am missing something let me know and I'll have another look.

html form trying to http get when a button is pressed

Ive got a html form with a few select lists and a text box in it. I also have a submit button which is outside of the form. The reason for this is I want to construct the parameters myself, as I dont want the content of all of the select lists. The problem I am having is, that when I press my submit button,The form automaticly trys to redirect to the same page, but with a ? at the end with all the contents of the form. I am also having problems where window.location.href is not working inside the submit() javascript method, but I am not sure if this is caused by the form issue or not. Example code:
<form>
<input name="cName" type="text" class="input-xlarge" id="input01" placeholder=
"Enter title" />
<div class="control-group">
<hr />
<label class="control-label" for="select01">Select box 1</label>
<div class="controls">
<select id="select01" name="type" onChange="reportModification(this.value)">
<option>One</option>
</select>
</div>
</div>
</form>
<button class="btn btn-primary" onClick="next()">Next</button>
This is not the exact code from the page, just a replica.So it might not be valid html in some places. Thanks for the help :)

The reason you get parameters in the url is that a get request is used instead of a post request. you should use:
<form method="POST" action="">
Also why is your button outside the form? you could have this instead:
</div>
<input class="btn btn-primary" type="submit" value="Next" onClick="next()" />
</form>

I think your button has to be inside the form element. You could use an onsubmit in the form element to intercept the form before it gets sent to the server. Here you could manipulate the values before they go. You would also need an action attribute in the form. If your function returns true, the data will be submitted, false and it won't.