Develop Reference

JavaScript event handler isn't called on appended button

I have form where I can add options and add new fields of options. I am using JQuery for this. The problem is that the remove button of added fields doesn't work.
Here's my form:
Logic
I click Add New button and new row will add Working
I click Remove it has to remove that row Not Working
$(function() {
//add row for options
$("#addnewoptinrow").click(function(e) {
e.preventDefault();
$('.newrow').append('<div class="row mt-3 newrowadded"><div class="col-md-8"><input name="options[]" type="text" class="form-control" placeholder="Option Name"></div><div class="col-md-2"><input name="optionsprices[]" type="number" class="form-control" placeholder="Price"></div><div class="col-md-2"><button type="button" class="removerow btn btn-danger" id="removerow">Remove</button></div></div>');
});
//Remove the row
$('.removerow').on('click', function(e) {
e.preventDefault();
$('.newrowadded').closest("div.row").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-8">
<input name="options[]" type="text" class="form-control" placeholder="Option Name">
</div>
<div class="col-md-2">
<input name="optionsprices[]" type="number" class="form-control" placeholder="Price">
</div>
<div class="col-md-2">
<button class="addnewqtydiscmsgsave btn btn-primary" id="addnewoptinrow">Add New</button>
</div>
</div>
<div class="newrow"></div>
Any idea how to fix that remove action?

There are two issues in your code:
the call to on() is missing the "selector" argument, which means that no elements dynamically added in future will have the click event boundy
your remove logic needs to be executed relative to the button being clicked
Try the following changes in your .removerow click handler:
/*
Bind the click handler to all elements dynamically added that match the
.removerow selector
*/
$('body').on('click','.removerow', function(e){
e.preventDefault();
/*
Explaination:
1. from "this" remove button being clicked,
2. select the closest ".newrowadded" and,
3. remove it
*/
$(this).closest(".newrowadded").remove();
});
See the snippet below for your a working example based off of your code:
$(function() {
//add row for options
$("#addnewoptinrow").click(function(e) {
e.preventDefault();
$('.newrow').append('<div class="row mt-3 newrowadded"><div class="col-md-8"><input name="options[]" type="text" class="form-control" placeholder="Option Name"></div><div class="col-md-2"><input name="optionsprices[]" type="number" class="form-control" placeholder="Price"></div><div class="col-md-2"><button type="button" class="removerow btn btn-danger">Remove</button></div></div>');
});
//Remove the row
$('body').on('click', '.removerow', function(e) {
e.preventDefault();
$(this).closest(".newrowadded").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="row">
<div class="col-md-8">
<input name="options[]" type="text" class="form-control" placeholder="Option Name">
</div>
<div class="col-md-2">
<input name="optionsprices[]" type="number" class="form-control" placeholder="Price">
</div>
<div class="col-md-2">
<button class="addnewqtydiscmsgsave btn btn-primary" id="addnewoptinrow">Add New</button>
</div>
</div>
<div class="newrow"></div>

The problem is that your code is only being executed on page load and at this time, your remove button is not yet created. You need to add an event listener to the remove button after your remove button has been created.

Button.removerow was added later. you can try this:
//add row for options
$("#addnewoptinrow").click(function(e) {
e.preventDefault();
$('.newrow').append('<div class="row mt-3 newrowadded"><div class="col-md-8"><input name="options[]" type="text" class="form-control" placeholder="Option Name"></div><div class="col-md-2"><input name="optionsprices[]" type="number" class="form-control" placeholder="Price"></div><div class="col-md-2"><button type="button" class="removerow btn btn-danger" id="removerow">Remove</button></div></div>');
//Remove the row
$('.removerow').on('click', function(e) {
e.preventDefault();
$('.newrowadded').closest("div.row").remove();
});
});

In oder to match your event listener to later created elements, you need to delegate it. In older JQuery versions it was done by the .delegate method, however, in recent versions this method is deprecated. Now you can delegate by ancestorCollection.on('query-selector', 'event', listener).
In your example something like
$('.newrow').on('.removerow', 'click', function(e){ /*...*/ })

The issue is that you are trying to bind actions on elements that are not yet created - you should use a more general binding as below:
$(function(){
//add row for options
$("#addnewoptinrow").click(function(e){
e.preventDefault();
$('.newrow').append('<div class="row mt-3 newrowadded"><div class="col-md-8"><input name="options[]" type="text" class="form-control" placeholder="Option Name"></div><div class="col-md-2"><input name="optionsprices[]" type="number" class="form-control" placeholder="Price"></div><div class="col-md-2"><button type="button" class="removerow btn btn-danger" class="removerow">Remove</button></div></div>');
});
//Remove the row
$(document).on('click','.removerow', function(e){
e.preventDefault();
$(this).parent().parent().remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-8">
<input name="options[]" type="text" class="form-control" placeholder="Option Name">
</div>
<div class="col-md-2">
<input name="optionsprices[]" type="number" class="form-control" placeholder="Price">
</div>
<div class="col-md-2">
<button class="addnewqtydiscmsgsave btn btn-primary" id="addnewoptinrow">Add New</button>
</div>
</div>
<div class="newrow"></div>
Pay attention to the
$(document).on('click','.removerow', function(e){
line of code. This line appends the action to all of the '.removerow' elements, present and future. So when new elements are added with this class, they are automatically assigned this action (BTW, had to change your HTML from id="removerow" to class="removerow", to avoid duplicate ID's).
And please read this topic, it goes into more details of your issue.

Set focus back to input after resetting form

I have a form that has an input field that has autofocus with a reset button. When resetting the form, I would like the input set to focus again. Does anyone have a solution?
<form>
<input type="text" name="focus" required class="search-box" autofocus="autofocus"
placeholder="search items" />
<button type="submit" class="btn btn-primary filtersearch"
data-id="<?php echo $_POST['search']; ?>"><span class="glyphicon glyphicon-filter"></span>
Filter items</button>
</form>

A) Use a reset button instead of an anchor element to retain the form-reset behavior of the browser.
B) Bind a reset event handler to the form and focus the field that has an autofocus attribute. Example: (without jQuery)
var form = document.querySelector('form');
form.addEventListener('reset', function(event) {
var autofocusField = form.querySelector('[autofocus]');
if(autofocusField instanceof HTMLInputElement) {
autofocusField.focus();
}
});
<form>
<input type="text" name="focus" required class="search-box" autofocus="autofocus"
placeholder="search items" />
<button class="close-icon" type="reset">Reset</button>
<button type="submit" class="btn btn-primary filtersearch">Filter items</button>
</form>

Jquery does not select the form element given an ID

I'm trying to submit a form with jquery, but it does not acknowledge that I submitted it when I click the "submit" button.
My html is as follows:
<form id="singleParam" role="form">
<div class="form-group">
<label for="sample_size">Number of samples needed</label>
<input name="choices[sample_size]" type="number" class="form-control" id="sample_size" placeholder="Enter desired number of samples">
</div>
<div class="form-group">
<label for="mode">Mode of the distribution (value most likely to be sampled)</label>
<input name="choices[mode]" type="number" class="form-control" id="mode" placeholder="Enter the likeliest value for your parameter">
</div>
<div class="form-group">
<label for="confidence">Confidence interval factor</label>
<input name="choices[confidence]" type="number" class="form-control" id="confidence" placeholder="Enter desired confidence interval factor">
</div>
<div class="form-group">
<input type="button" class="btn btn-primary btn-lg" id="submit" name="submit">
</div>
</form>
and JS is:
$('#singleParam').on('submit', function () {
alert('Form submitted!');
console.log('Form submitted!');
return false;
});
The alert() or console.log() in the loop do not work, meaning that jquery did not run the code on submit. What am I doing wrong? It might be worth mentioning that I am using bootstrap.

Change the button type from type="button" to type="submit"
EDIT:-
Make sure you are calling all your event handlers once the DOM is fully loaded by adding all the code inside dom ready event like:-
$(document).ready(function() {
// code here
});

How can i make the register form hide when the login button is clicked and the login form collapse vice versa

Im trying to make the form of registration or login hide and when the register or login button is clicked, the form will collapse. The codes work just fine but i want to make it when the login button is clicked, the login form will collapse and when the user wants to click on the register button, the login form will hide and the register form will collapse vice versa. I've tried the javascript but it turns out to be a mess. Somebody please help
<button style="border-style: double;" class="btn btn-lg btn-default" type="button" data-toggle="collapse" data-target="#loginform" aria-expanded="false" aria-controls="collapseExample">LOGIN
<script type="text/javascript">
var button = document.getElementById('loginbtn')
button.addEventListener('click',hideshow,false);
function hideshow() {
document.getElementById('loginform').style.display = 'block';
this.style.display = 'none'
}
document.write("<br>")
</script>
</button>
<button style="border-style: double;" class="btn btn-lg btn-default" type="button" data-toggle="collapse" data-target="#registerform" aria-expanded="false" aria-controls="collapseExample">
REGISTER
<script type="text/javascript">
var button = document.getElementById('loginbtn')
button.addEventListener('click',hideshow,false);
function hideshow() {
document.getElementById('loginform').style.display = 'block';
this.style.display = 'none'
}
document.write("<br>")
</script>
</button>
<div class="collapse" id="loginform">
<form class="form-horizontal" role="form" id="loginform">
<br>
<legend></legend>
<input type="text" class="form-control" placeholder="USERNAME" required>
<input type="password" class="form-control" placeholder="PASSWORD" required>
<br>
<input type="submit" class="form-control" role="button" id="logsubmit" value="LOGIN">
</form>
</div>
<br>
<div class="collapse" id="registerform">
<form class="form-horizontal" role="form" id="registerform">
<br>
<legend></legend>
<input type="text" class="form-control" placeholder="USERNAME" required>
<input type="text" class="form-control" placeholder="CONFIRM USERNAME" required>
<input type="password" class="form-control" placeholder="PASSWORD" required>
<input type="password" class="form-control" placeholder="CONFIRM PASSWORD" required>
<input type="email" class="form-control" placeholder="EMAIL" required>
<input type="email" class="form-control" placeholder="CONFIRM EMAIL" required>
<br>
<input type="submit" role="button" class="form-control" id="regsubmit" value="REGISTER">
</form>
</div>

did you consider to use JQuery ? i am asking it because using Jquery is will be much more easy for you. Jquery contains some method which helps you handle hide/show/toggle forms and even with out of the box animations.
You can read more about it in the following links:
jQuery show jQuery hide jQuery toggle
If i will try to apply jQuery to your code it will look something like the following:
$("#loginbtn").click(function(){
$("#loginform").toggle(); // toggle will show hidden element and vice versa
});

where is your form's action? if you can add it, then you can replace your code like this
<script type="text/javascript">
function hideshow() {
document.forms[0].submit();
...
<input type='button' class="form-control" value='LOGIN' onclick="hideshow()" />

jQuery do something when Bootstrap toggle button class is active

I'm new to JavaScript/jQuery so could do with some assistance here. I have the following inputs in a form:
<div class="form-group">
<button type="button" class="btn btn-default navbar-btn" data-toggle="button tooltip"
data-placement="right" title="Use your exact location" name="geoloc" id="geoloc">
<li class="icon-screenshot"></li>
</button>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Address" name="address"
id="address">
<input name="lat" type="hidden" value="">
<input name="lng" type="hidden" value="">
</div>
I'm trying to disable the address input text box if the user clicks the geoloc toggle button (which means the form will use their exact location) as the text box becomes redundant.
How do I get the browser to apply the 'disabled' attribute to the address input when the geoloc input class is active, and enable the address input when the geoloc button doesn't have the active class?

A basic approach to toggling your address field's disabled property:
$('#geoloc').click(function (e) {
var $address = $('#address');
$address.prop("disabled", !$address.is(':disabled'));
});