Removing a parent element on click using jQuery - javascript

I am having trouble creating a dynamic form where a user can add and remove a text field. The functionality to add an extra field works fine, but removing the field just cannot seem to work.
My html is:
<div class="formItem" id="members">
<label for="workgroup">Add Members:</label>
<br />
Add another member
<p>
<input type="text" name="members[]" placeholder="Enter email" autocomplete="off" />
</p>
</div>
My JS:
$('#addMember').on('click', function() {
$('<p><input type="text" name="members[]" placeholder="Enter email" autocomplete="off" />Remove</p>').appendTo('#members');
return false;
});
$('#removeMember').on('click', function() {
$(this).parent().remove();
});

You are adding the click listener before actually creating the element, use:
$('#members').on('click', '#removeMember', function() {
$(this).parent().remove();
});
see these examples http://api.jquery.com/on/#entry-examples

try using this
$(document).on('click','#removeMember', function() {
$(this).parent().remove();
});

Related

how to add a javascript action when i change the input's content?

I'm trying to make some validation using javacript, i need to show the user an alert when he/she changes the value of an input.
<input type="text" name="onchange" id="onchange" size="35" maxlength="50" />
There you go
<input type="text" name="onchange" id="onchange" size="35" maxlength="50"
onchange="alert('Onchange event occured')"/>
you can use jquery on input function as the following
$("#onchange").on("input", function() {
alert("Change to " + this.value);
});
Bind function to element:
var input = document.getElementById('onchange');
input.addEventListener('input', function()
{
//something you want to do
});

How to get ID of input field from form using jQuery element selector

I have form with each input field unique id and I have attached jquery on 'input' to form. I want to get id of field on which user change some value using jquery function. I am missing some puzzle in following code in alert(".... statement
$(document).ready(function () {
$("#CreateStudentProfileForm").on('input', function () {
alert($(this).find().closest().attr('id'));
});
});
html form
<input class="form-control text-box single-line valid" data-val="true" data-val-number="The field Student UWL ID must be a number." data-val-range="Only Number Allowed" data-val-range-max="2147483647" data-val-range-min="0" data-val-required="Require Your Student UWL ID" id="StudentNumber_UWLID" name="StudentNumber_UWLID" value="" type="number">
I have many instances of input field like above
How about if you attach the event to each field individually?
$(document).ready(function () {
$("#CreateStudentProfileForm").find("input,textarea,select").on('input', function () {
alert(this.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="CreateStudentProfileForm">
<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
</form>
$('#CreateStudentProfileForm').on('change keyup','input', function(){
var id = $(this).attr('id')
})
"id" is the id you want...
if you want to track the change event for an input use change event
//assuming you input id is CreateStudentProfileForm
$("#CreateStudentProfileForm").on('change', function () {
alert(this.id) //should give you the changed input id
//alert($(this).find().closest().attr('id'));
});
keyup is better
$("#CreateStudentProfileForm").keyup(function () {
alert(this.id)
//alert($(this).find().closest().attr('id'));
});
updated
this gets all the input present in you form specified by id CreateStudentProfileForm and adds keyup event to track the changes.
//assuming CreateStudentProfileForm is form's ID
$("#CreateStudentProfileForm:input").keyup(function () {
alert(this.id) //should give you the changed inputs id
//alert($(this).find().closest().attr('id'));
});
do something like this http://jsfiddle.net/elviz/kqvdgrmk/
$(document).ready(function(){
$("#CreateStudentProfileForm input").keyup(function(){
alert(this.id);
});
});
Use either:
this.id;
Or get:
$(this).attr("id");
Supposing you have a similar HTML
<form id="CreateStudentProfileForm">
<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">
</form>
Then you can do something like
$('#CreateStudentProfileForm > input').on('input change', function () {
alert($(this).attr('id'));
});
Note that this event will fire on both input and change. You may want to fire it only on change OR input, depending on what you need to do.
$(document).ready(function ()
{$("#CreateStudentProfileForm").find("input").on('input', function () {var get_id = $(this).attr('id');});});

how to add and remove div using jquery

I'm making a scenario where user will be able to add a new row with "Remove" option by clicking "Add" button. If they click "Remove" button, the entire row will be deleted. I've put script for it. But, it's not working perfectly. Kindly, take a look on my fiddle: http://jsfiddle.net/learner73/gS8u2/
My problem is:
(1) If user click "Add" button, a new row will be added. That's good. But, it's gone below the "Add" button. I want, the new row will be added above the "Add" button, I mean "Add" button should be always at the bottom.
(2) At my code, if user click "Remove" button on the previously created row, the entire row will be deleted. That's good. But, when they click "Remove" button on dynamically created row, nothing will happened!
HTML:
<div class="optionBox">
<div class="block">
<input type="text" /> <span class="remove">Remove Option</span>
</div>
<div class="block">
<input type="text" /> <span class="remove">Remove Option</span>
</div>
<div class="block">
<span class="add">Add Option</span>
</div>
</div>
jQuery:
$('.add').click(function() {
$('.optionBox').append('<input type="text" /><span class="remove">Remove Option</span>');
});
$('.remove').click(function() {
$(this).parent('div').remove();
});
You need to use event delegation on your remove link code:
$('.add').click(function() {
$('.block:last').before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
});
$('.optionBox').on('click','.remove',function() {
$(this).parent().remove();
});
jsFiddle example
Also, you weren't adding a complete div block to match the other code you had. You left out the <div class="block"> and only added the input and span.
Demo http://jsfiddle.net/34Lbu/
API: .before https://api.jquery.com/before/
Hope rest fits your need :)
code
$('.add').click(function () {
$(this).before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
});
$(document).on('click', '.remove', function () {
$(this).parent('div').remove();
});
EDIT http://jsfiddle.net/amdzakir/gS8u2/38/
To check if all the input fields are filled with values.
$('.add').click(function() {
flag = true;
$('input').css('border-color','green');
$('input').each(function(){
if ($.trim($(this).val())===''){
$(this).css('border-color','red');
flag = false;
}
});
if(flag){
$(this).before('<div class="block"><input type="text" /><span class="remove">Remove Option</span></div>');
}
});
$(document).on('click','.remove',function() {
$(this).parent().remove();
});
try this:
$('.remove').click(function() {
$(this).closest('div').remove();
});
$('.add').click(function() {
$('.block:last').after('<input type="text" /><span class="remove">Remove Option</span>');
});
Here is one way -
http://jsfiddle.net/gS8u2/3/
$('.add').click(function () {
$('.block:last').before(' <div class="block"><input type="text" /><span class="remove">Remove Option</span></div>'); // make sure to add the div too
});
$('body').on('click', '.remove', function () { // use event delegation because you're adding to the DOM
$(this).parent('.block').remove();
});

jQuery: trigger click or focus input field

I have a page with multiple divs that all look like the example below.
Each div contains a field, a hidden field and a button.
How can I achieve that by click on the button the (visible) input field gets triggered ?
I need to trigger either a click or focus as both fire the same function.
Each button in question has the class="triggerBtn" and the corresponding input field has the class="inputField".
Example div:
<div>
<input type="text" class="inputField" id="field1" name="field1" />
<input type="hidden" name="field1" />
<button type="button" class="btn btn-primary triggerBtn">Find</button>
</div>
I guess you want:
$(".triggerBtn").click(function () {
$(this).closest('div').find('.inputField').focus();
});
add
Onclick="function()" see here
if you need to trigger it manually using jquery you can to this by
$("#field1").trigger("click");
see also here
$(".triggerBtn").on("click",function(e){
$(this).closest("div").find(".inputField").click();
//or $(this).closest("div").find(".inputField").focus();
});
$(".triggerBtn").parent().children("input[type:text]").first().focus()
Updated Jsfiddle: http://jsfiddle.net/ZmL4y/3/
$(document).on("click",".triggerBtn", function() {
var inputField = $(this).closest('div').find('.inputField');
if($(inputField).is(":visible"))
{
$(inputField ).focus();
}
});

Using Jquery to hide/unhide the textbox if button is clicked

I have input button , what I want is if a user clicks on the button then textbox should appear.
Below is the code which is not working :
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />
$("#driver").click(function() {
$('#text').show();
}
});
Also the textbox should not be visible initially
You can use toggle instead;
$('#text').toggle();
With no parameters, the .toggle() method simply toggles the visibility of elements
try this:
$(document).ready(function(){
$("#driver").click(function(){
$("#text").slideToggle("slow");
});
});
Here's an example using toggle:
http://jsfiddle.net/x5qYz/
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" style="display:none;" />
$("#driver").click(function() {
$('#text').css('display', 'block');
});
$(function()
{
// Initially hide the text box
$("#text").hide();
$("#driver").click(function()
{
$("#text").toggle();
return false; // We don't want to submit anything here!
});
});
Try this:
<script type="text/javascript">
jQuery(function ($) {
$('#driver').click(function (event) {
event.preventDefault(); // prevent the form from submitting
$('#text').show();
});
});
</script>
<input type="submit" value="Add Second Driver" id="driver" />
<input type="text" id="text" />
Make the textbox hidden when the page loads initially like this
Code:
$(document).ready(function () {
$('#text').hidden();
});
Then your should work the way you want.

Categories

Resources