Develop Reference

Event will not trigger

I have a form that has multiple inputs. One input is where user can input an ID. I need to verify the ID is unique. I want to call a JavaScript function for a onchange event. However, I can't get it to trigger. I have a console.log but it never hits when I make a change in the input so I am doing something wrong.
This is the function I am trying to call on the on change
function checkUniqueID() {
console.log("here");
var $counter = 0;
var tag = document.forms["userform"]["new_id"].value;
while ($counter < $totalItems) {
}
};
<div class="six wide field">
<label for="ID">ID</label>
<input type="text" id="new" name="new_id" placeholder="ID" onchange="checkUniqueID()">
</div>
I can't even get the console.log ("here") to trigger

The onchange HTML attribute triggers when the input loses focus.
So, if you correctly have your input#new_id inside a form like this:
<form name="userform">
<div class="six wide field">
<label for="ID">ID</label>
<input type="text" id="new" name="new" placeholder="ID">
</div>
</form>
Adding an eventListener in your script file would be enough.
document.userform.new_id.onchange=function(){
alert("ID changed to: "+this.value);
};
With jQuery would be as easy as:
$("#new").change(function(){
alert("ID changed to: "+$(this).value;
}
Here is a working fiddle:
https://jsfiddle.net/edbL3kgp/

Adding fields dynamically inside an element which is also added dynamically Jquery

I have a set of fields which can be duplicated. Now within those fields there are also particular fields which are duplicated.
This is an example of my markup
<div class="item_1">
<button type="button" class="fluid-inline btn btn-primary add_items">Add fields</button>
<hr />
<div class="col-sm-4 m-b-10px">
<label><h5>OCCUPATION: </h5></label>
<input name=b_occ[] type="text" class="form-control" required=required>
</div>
<div class="col-sm-4 m-b-10px">
<label><h5>WORK ADDRESS: </h5></label>
<input name=b_work_add[] type="text" class="form-control" required=required>
</div>
<div class="item_victim_relation">
<div class="col-sm-4 m-b-10px">
<label><h5>VICTIM: </h5></label>
<select class="form-control" name="victim_name[]" required=required>
<option value="victim_id"><h5>Victim</h5></option>
</select>
</div>
<div class="col-sm-4 m-b-10px">
<label><h5>RELATION TO VICTIM: </h5></label>
<input name=b_relation[] type="text" class="form-control" required=required>
</div>
<div class="col-sm-4 m-b-10px">
<h5 class="text-info">(IF SUSPECT HAS RELATION TO MULTIPLE VICTIMS) </h5>
<button type="button" class="dashed-button add_victim_b">Add</button>
</div>
</div>
</div>
JS
var removeButtonV = "<button type=button class='dashed-button remove_item_v'>Remove</button>";
var removeButton = "<button type=button class='btn btn-primary m-b-10px remove_items'>Remove</button>";
$('.add_victim_b').click(function() {
$('div.item_victim_relation:last').
after($('div.item_victim_relation:first').clone());
$('.add_victim_b:last').remove();
$('.text-info:last').text("(REMOVE THESE FIELDS)");
$(removeButtonV).insertAfter(('.text-info:last'));
});
$(document).on('click', '.remove_item_v', function(){
$(this).closest('div.item_victim_relation').remove();
});
$('.add_items').click(function() {
$('div.item_1:last').after($('div.item_1:first').clone());
$('div.item_1:last').append(removeButton);
$('hr.item_b_separator:last').removeClass('hidden');
});
$(document).on('click', '.remove_items', function(){
$(this).closest('div.item_1').remove();
});
This piece of code duplicates victim and relation to victim fields. It works fine when item_1 is not yet duplicated, but when it is, those two fields are appended on the last instance of the fields inside the last instance of item_1 too. What I want to happen is for these two fields to be appended after their last instances on the item_1 where they belong.
I think my way of traversal is wrong. I've tried several methods but I can't seem to get it work.
Here is a demonstration of the problem:
DEMO
Here is a sample of what I want (each has their own class names and item_1 cannot be duplicated but it would not work if item_1 would be cloned)

jQuery is only aware of the elements in the page at the time it runs, so new elements added to the DOM dynamically are unrecognized by jQuery. To combat the problem use event delegation, bubbling events from newly added items up to a point in the DOM which was there when jQuery ran on page load. Many people use document as the place to catch the bubbled event, but it isn't necessary to go all the way up the DOM tree. Ideally you should delegate to the nearest parent existing at the time of page load.
$(document).on('click', 'button.ok', function(e){...
Using the .on() function should solve your issue.

I managed to solve it by changing my traversal methods and just assigning the fields to be added in a variable.
I have changed the handler of add_victim_b to this
var victimFields = '<div class="item_victim_relation"><div class="col-sm-4 m-b-10px"><label><h5>VICTIM: </h5></label><select class="form-control" name="victim_name[]" required=required><option value="victim_id"><h5>Victim</h5></option></select></div><div class="col-sm-4 m-b-10px"><label><h5>RELATION TO VICTIM: </h5></label><input name=b_relation[] type="text" class="form-control" required=required></div><div class="col-sm-4 m-b-10px"><h5 class="text-info">(REMOVE FIELDS) </h5><button type="button" class="dashed-button remove_victim_b"><i class="fa fa-minus" aria-hidden=true></i></button></div><div class="clearfix"></div></div>';
$(document).on('click', '.add_victim_b', function(){
var item_b_index = $(this).closest('.item_b').index('.item_b');
$(victimFields).insertAfter($('div.item_b').eq(item_b_index).find('.item_victim_relation:last'));
});
It now works perfectly as I wanted it. You may view it here:
DEMO

Comparing 2 inputs with jquery

hello im trying to just compare what is inside of 2 different inputs.
$(document).ready(function() {
$('#pc').keydown(function() {
if ($('#ps').val() == $('#pc').val()) {
alert("it worked ");
}
});
});
<form id="identicalForm" class="form-horizontal" action="userSignup.php" method="post">
<fieldset>
<div id="legend">
<legend class="">Register</legend>
</div>
<div class="control-group">
<label class="control-label" for="email">E-mail</label>
<div class="control-group">
<label class="control-label" for="password">Password</label>
<div class="controls">
<input id="ps" name="password" placeholder="" class="form-control input-lg" type="password">
<p class="help-block">Password should be at least 6 characters</p>
</div>
</div>
<div class="control-group ">
<label class="control-label" for="password_confirm">Password (Confirm)</label>
<div class="controls">
<input id="pc" name="password_confirm" placeholder="" class="form-control input-lg" type="password">
<p class="help-block">Please confirm password</p>
</div>
</div>
</fieldset>
</form>
This is a semi condensed version of the web page. the inclusion is at the top of the page. if i put the alert outside of the if, it will do a pop up every time i type in that input box. but if i try to compare the two input fields nothing pops up when they both have the same password entered. from what ive seen from other SO post like this, it should work! I am still a novice with js, so i may just be over thinking this entirely.

The reason it wasn't working with the keydown event is because the event is only fired when the key is down. In other words, the event was being fired before the value was updated. You would be comparing 12345 with 1234 and even though the values would be the same, it wasn't recording the last character that was pressed.
Rather than using the keydown event, use the input or keyup event:
$('#pc').on('input', function() {
if ($('#ps').val() === $('#pc').val()) {
console.log("it worked ");
}
});
The keyup event is fired when the key is up, which means that the value of the element is actually updated. Similarly, the input event will behave the same way since it will be fired when the value changes. In addition, the input event will also catch paste events (which may be useful).

Instead of keydown, which actually executes before you press the key, use either blur or keyup:
$('#pc').on('blur', function() {
if ($('#ps').val() == $('#pc').val()) {
console.log("it worked ");
}
});

Use the keyup event. Also try to use === for comparing the values as we know the values are going to be both text type and do not need an explicit conversion before comparing.
$(document).ready(function () {
$('#pc').keyup(function () {
if ($('#ps').val() === $('#pc').val()) {
alert("it worked ");
}
});
});
The keyup event is sent to an element when the user releases a key on the keyboard.
Here is a working sample

How can I use the same jQuery function for multiple divs without repeating the code

I have a add/remove textfield feature wherein I want to implement a jQuery function to all the textfields in a div.
Can I use the same jQuery function for all the fields in the div or should I write different for each.
DEMO can be got here. In the demo I have made it work for one input field, how can I make it work for the rest.
HTML
<div id="single">
<div id="Ivrgroupzbase_grpzWelcomeNotes" class="row">
<h2><a id="addScnt" href="#">Add Another Input Box</a></h2>
<label for="Ivrgroupzbase_grpzWelcomeNotes">Grpz Welcome Notes</label>
<input type="text" id="Ivrgroupzbase_grpzWelcomeNotes" name="Ivrgroupzbase[grpzWelcomeNotes]" cols="50" rows="6">
</div>
<div id="p_scents" class="row">
<h2><a id="addScnt" href="#">Add Another Input Box</a></h2>
<label for="Ivrgroupzbase_grpzWelcomeNotes">Grpz Welcome Notes</label>
<input type="text" id="Ivrgroupzbase_grpzWelcomeNotes" name="Ivrgroupzbase[grpzWelcomeNotes]" cols="50" rows="6">
</div>
</div>

fiddle http://jsfiddle.net/Drea/28h0L6eb/
html
changed id "addScnt" to class - you should avoid using same id multiple times
js
$('.addScnt').on('click', function (event) {
event.preventDefault();
$(this).closest('.row').append(createInput($('#Ivrgroupzbase_grpzWelcomeNotes p').length + 1), '');
});

Input button click is not invoked through JavaScript in IE9

I'm working with MVC 3, javascript and jQuery.
I've got a hidden button which click() function needs to be called from javascript.
This works great on every browser except IE9.
$('#fakeSubmitBt').click(function () {
$('#fileUplSubmitBt').click();
});
Here, fileUplSubmitBt is the hidden button and fakeSubmitBt is the visible button which I need to click instead.
I noticed that if a call three times
$('#fileUplSubmitBt').click();
then the form is submitted, but in the backend the elements of the form are not recognized.
UPDATE:
thanks to the hints given by Ricardo and Jay, I tried to use trigger('click') but also this path failed.
In the following I post the code that is shaming me (it's MVC3 using Razor):
<script type="text/javascript">
function s2cPanelReady() {
$('#fakeBrowseBt').click(function () {
$('#fileUplRadio').prop("checked", true);
$('#gravatarRadio').prop('checked', false);
$('#realFileUpload').click();
});
$('#fakeSubmitBt').click(function () {
if ($('#gravatarRadio').prop("checked")) {
$('#grvatarSubmitBt').click();
} else if ($('#fileUplRadio').prop("checked")) {
$('#fileUplSubmitBt').trigger('click');
}
});
}
</script>
<div class="inputForm">
<div class="inputField">
<div class="userPicLargeFrame">
<img src="/Images/Get?id=#Model.ID&size=40" class="userPicLarge" />
</div>
</div>
#using (Html.BeginForm("ChangePicture", "User"))
{
<div class="inputField">
<input type="radio" id="gravatarRadio" />
<span class="inputLabel">Gravatar:</span>
#Html.EditorFor(model => model.Preferences.GravatarEmail)
#Html.ValidationMessageFor(model => model.Preferences.GravatarEmail)
</div>
<input id="grvatarSubmitBt" type="submit" value="Save Pic" style="display:none;" />
}
#using (Html.BeginForm("UploadPicture", "User", FormMethod.Post, new { encType = "multipart/form-data", name = "uplPicForm" }))
{
<div class="inputField">
<input type="radio" id="fileUplRadio" />
<span class="inputLabel">Save your own pic:</span>
<span class="inputLabel">
<span style="display:inline-block; position:relative;">
<input type="file" id="realFileUpload" name="fileUpload" style="position:relative; opacity:0; -moz-opacity:0 ;" />
<span style="display:inline-block; position:absolute; top:0px; left:0px;">
<input id="fakePathBox" type="text" value="" readonly />
<input id="fakeBrowseBt" type="button" value="..."/>
</span>
</span>
</span>
<input id="fileUplSubmitBt" type="submit" name="submit" value="Upload" style="display:none;" />
</div>
}
<div class="inputField">
<span class="inputLabel">
<input id="fakeSubmitBt" type="button" value="Submit" class="s2cButton" />
</span>
</div>
</div>
UPDATE N.2: I tried to remove all javascript stuff, and simply put the file upload HTML tag with a simple submit button: nor in this case on IE9 I'm able to submit the form!!
Sometimes it runs, sometimes it is not fired at the first click, but only at the second click (and in this case the submitted form hasn't got the selected file, so server-side this results in an error...), sometimes it simply doesn't fire the submit button, no matters how many click I do.
This issue starts to make me crazy....
Any other hint?
Thank you very much!
Best
cghersi

I've had a similar problem and ended up just transforming the button into an anchor (<a>) and invoked the jquery-ui function $.button()
NOTE: the jquery ui is required http://jqueryui.com/
That way the link still looked like a button and the $.click() event worked.
html
<div class="input">
Submit
</div>
jquery
$("#emulate-button").button();
//Set event when clicked
$("#emulate-button").click(function () {
//.... your logic here
});

Like Ricardo said, you need to use trigger: http://jsfiddle.net/5hgsW/1/

If the $('#fileUplSubmitBt').click event wasn't defined in JQuery, the .click() trigger may not work.
Put everything from the $('#fileUplSubmitBt').click event inside a function then bind it in the $('#fakeSubmitBt').click and $('#fileUplSubmitBt').click events.