Jquery siblings() not working for element inside a div - javascript

I've been stuck with this for quite some time now.
I want to get the values of input fields on click using jquery, but it always alerts "undefined"
$('.inputbox .updateAdvertiser').on('click', function() {
var name = $(this).siblings('.name').val();
var adId = $(this).siblings('.adId').val();
alert(adId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div class="inputbox">
<input type="text" class="name" value="mark">
<label>Name</label>
</div>
<div class="inputbox">
<input type="text" class="adId" value="1">
<label>Userid</label>
</div>
<div class="inputbox">
<input type="submit" value="Update" class="updateAdvertiser">
</div>
</div>
<div class="box">
<div class="inputbox">
<input type="text" class="name" value="Peter">
<label>Name</label>
</div>
<div class="inputbox">
<input type="text" class="adId" value="2">
<label>Userid</label>
</div>
<div class="inputbox">
<input type="submit" value="Update" class="updateAdvertiser">
</div>
</div>


siblings won't work outside parent element
$('.inputbox .updateAdvertiser').on('click', function() {
var parent = $(this).closest('.box');
var name = parent.find('.name').val();
var adId = parent.find('.adId').val();
alert(adId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<div class="inputbox">
<input type="text" class="name" value="mark">
<label>Name</label>
</div>
<div class="inputbox">
<input type="text" class="adId" value="1">
<label>Userid</label>
</div>
<div class="inputbox">
<input type="submit" value="Update" class="updateAdvertiser">
</div>
</div>
<div class="box">
<div class="inputbox">
<input type="text" class="name" value="Peter">
<label>Name</label>
</div>
<div class="inputbox">
<input type="text" class="adId" value="2">
<label>Userid</label>
</div>
<div class="inputbox">
<input type="submit" value="Update" class="updateAdvertiser">
</div>
</div>

Related

Find all the checkboxes inside html

I am generating a dynamic form. Upon adding checkboxes the following HTML is generated:
<div class='selected_checkboxes'>
<div class="clearfix"></div>
<div id="931022941" class="checkboxes_line">
<div class="col-md-3">
<label>Checkbox Name: </label><input type="text" data-id="931022941" class="form-control checkbox_label" name="checkbox_name"><br>
</div>
<div class="col-md-3">
<label>CheckBox Value</label> <input type="text" data-id="931022941" class="form-control checkbox_value " name="checkbox_value">
</div>
<div class="col-md-3">
<a class="remove_checkbox btn btn-danger" value="Remove" data-id="931022941">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="343" name="34[]" data-id="931022941" class="checkbox_item"
value="343"> <label class="ceheckbox_text" data-id="931022941"></label>
</div>
</div>
<div calss="col-md-1">
<br>
</div>
<div class="clearfix"></div>
<div id="867429714" class="checkboxes_line">
<div class="col-md-3">
<label>Checkbox Name: </label><input type="text" data-id="867429714" class="form-control checkbox_label" name="checkbox_name"><br>
</div>
<div class="col-md-3">
<label>CheckBox Value</label> <input type="text" data-id="867429714" class="form-control checkbox_value " name="checkbox_value">
</div>
<div class="col-md-3">
<a class="remove_checkbox btn btn-danger" value="Remove" data-id="867429714">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="3434" name="34[]" data-id="867429714" class="checkbox_item"
value="3434"> <label class="ceheckbox_text" data-id="867429714"></label>
</div>
</div>
<div calss="col-md-1">
<br>
</div>
</div>
I need to get all the checkboxes inside the HTML and use their data attribute, I have tried to use this:
var checkboxes = $('.selected_checkboxes :checkbox');
Then I loop on the checkboxes, but that did not work.
Can someone please advise to help me sort it out

Without (POJS) or with JQuery:
// POJS
document.querySelectorAll(".selected_checkboxes .checkbox_item")
.forEach( cb => console.log(`data-id: ${cb.dataset.id}`) );
// JQuery
$(".selected_checkboxes :checkbox")
.each( (i, cb) => console.log(`data-id: ${cb.dataset.id}`) )
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='selected_checkboxes'>
<div class="clearfix"></div>
<div id="931022941" class="checkboxes_line">
<div class="col-md-3">
<label>Checkbox Name: </label><input type="text" data-id="931022941" class="form-control checkbox_label" name="checkbox_name"><br>
</div>
<div class="col-md-3">
<label>CheckBox Value</label> <input type="text" data-id="931022941" class="form-control checkbox_value " name="checkbox_value">
</div>
<div class="col-md-3">
<a class="remove_checkbox btn btn-danger" value="Remove" data-id="931022941">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="343" name="34[]" data-id="931022941" class="checkbox_item" value="343"> <label class="ceheckbox_text" data-id="931022941"></label>
</div>
</div>
<div calss="col-md-1">
<br>
</div>
<div class="clearfix"></div>
<div id="867429714" class="checkboxes_line">
<div class="col-md-3">
<label>Checkbox Name: </label><input type="text" data-id="867429714" class="form-control checkbox_label" name="checkbox_name"><br>
</div>
<div class="col-md-3">
<label>CheckBox Value</label> <input type="text" data-id="867429714" class="form-control checkbox_value " name="checkbox_value">
</div>
<div class="col-md-3">
<a class="remove_checkbox btn btn-danger" value="Remove" data-id="867429714">Remove</a> <input type="checkbox" style="visibility: hidden" data-name="" data-glabel="" data-label="343" data-value="3434" name="34[]" data-id="867429714" class="checkbox_item" value="3434"> <label class="ceheckbox_text" data-id="867429714"></label>
</div>
</div>
<div calss="col-md-1">
<br>
</div>
</div>

How i create a quiz system in jquery

Actually am making a online quiz func in my website here is my quiz code
<form method="POST">
<div id="questions">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Question <label id="question_no" value='1'>1</label></label>
<input type="text" name="question" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option A">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option B">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option C">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option D">
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-success mb-4">Submit</button> <button id="add_more" class="btn btn-primary mb-4">Add More</button>
</form>
actually i want that when add more button is clicked then the same code in div with id questions is append next to this div and also question no will be increased automatically
i tried diff method but none of them works prefectly and help
Thank You ...
~~~~~~~UPDATE~~~~~~~~
here is what i do simply wrote this code
<!--TEMPLATE-->
<script type="text/javascript" id="questions_template">
<div id="questions_template1">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Question 1</label>
<input type="text" name="question" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option A">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option B">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option C">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<input type="text" name="option1" class="form-control" placeholder="Option D">
</div>
</div>
</div>
</div>
</script>
<!--END OF TEMPLATE-->
and after that here is my jquery code
$("#add_more").click(function(e){
e.preventDefault();
$("#questions").append($("#questions_template").html());
})

First, add div for your template question, this is the one you will duplicate.
<form method="POST">
<div class="question">
.....
</div>
<button>submit</button>
<button>add_more</button>
</form>
Now use jquery to duplicate this 'question' and update it with correct id.
$("#add_more").click(function(e) {
e.preventDefault();
var id = $(".question").length;
id++;
var $newQuestion = $("form").find(".question:last").clone();
$newQuestion.find("label").attr("value", id);
$newQuestion.find("#question_no").text(id);
$newQuestion.insertBefore($(".btn-success"));
})
Jsfiddle : https://jsfiddle.net/xpvt214o/411294/

input text field validation check

In login page i want to create form validation.
i wrote below mentioned code. but it does not work. i want to hide sign up button and show button when all the fields is not empty.
function signupbtnactive (){
var inputsignup = document.getElementsByClassName('input').val();
while(inputsignup != null && !inputsignup.isEmpty()) {
$('#signupbtn').show();
};
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sign-up-htm">
<div class="group">
<label for="newloginusername" class="label">Username</label>
<input id="newloginusername" type="text" class="input">
</div>
<div class="group">
<label for="newloginusersname" class="label">Surname</label>
<input id="newloginusersname" type="text" class="input">
</div>
<div class="group">
<label for="newloginuser" class="label">Loginname</label>
<input id="newloginuser" type="text" class="input">
</div>
<div class="group">
<label for="newloginpwd" class="label">Password</label>
<input id="newloginpwd" type="password" class="input" data-type="password">
</div>
<div class="group">
<label for="newloginpwdconfirm" class="label">Repeat Password</label>
<input id="newloginpwdconfirm" type="password" class="input" data-type="password">
</div>
<div class="group">
<label for="loginemail" class="label">Email Address</label>
<input id="loginemail" type="text" class="input">
</div>
<div class="group">
<label for="loginemailcopy" class="label">Repeat Email Address</label>
<input id="loginemailcopy" type="text" class="input">
</div>
<div class="group">
<label for="dobsignup" class="label">Date of birth</label>
<input id="dobsignup" type="text" class="input" onblur="Checkemailsignup()">
</div>
<div class="group" id="signupdivbtn">
<input type="submit" class="button" id="signupbtn" value="Sign Up" style="display: none;">
</div>
</div>
above mentioned dont work. please advice what is problem?

var inputsignup = document.getElementsByClassName('inputField') ;
This will return all elements with the specified class.So.You have to loop through the each element and check if the value is empty
function signupbtnactive (){
var inputsignup = document.getElementsByClassName('inputField') ;
var flag = false;
for(var i in inputsignup){
if(inputsignup[i].value== '' ){
flag = true;
}else{
//console.log(inputsignup[i].value);
}
}
if(!flag) {
$('#signupbtn').show();
};
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sign-up-htm">
<div class="group">
<label for="newloginusername" class="label">Username</label>
<input id="newloginusername" type="text" class="inputField">
</div>
<div class="group">
<label for="newloginusersname" class="label">Surname</label>
<input id="newloginusersname" type="text" class="inputField">
</div>
<div class="group">
<label for="newloginuser" class="label">Loginname</label>
<input id="newloginuser" type="text" class="inputField">
</div>
<div class="group">
<label for="newloginpwd" class="label">Password</label>
<input id="newloginpwd" type="password" class="inputField" data-type="password">
</div>
<div class="group">
<label for="newloginpwdconfirm" class="label">Repeat Password</label>
<input id="newloginpwdconfirm" type="password" class="inputField" data-type="password">
</div>
<div class="group">
<label for="loginemail" class="label">Email Address</label>
<input id="loginemail" type="text" class="inputField">
</div>
<div class="group">
<label for="loginemailcopy" class="label">Repeat Email Address</label>
<input id="loginemailcopy" type="text" class="inputField">
</div>
<div class="group">
<label for="dobsignup" class="label">Date of birth</label>
<input id="dobsignup" type="text" class="inputField" onblur="signupbtnactive()">
</div>
<div class="group" id="signupdivbtn">
<input type="submit" class="button" id="signupbtn" value="Sign Up" style="display: none;">
</div>
</div>

<script>
//Set up the event listener to check every input when one changes
$(".group input").change(checkInputs)
//function that checks all the inputs for values
function checkInputs() {
let $signUpButton = $("#signupbtn")
let $inputs = $(".group input")
let numOfEmptyInputs = $inputs.filter((i, input) => !input.value).length
if(numOfEmptyInputs === 0) {
$signUpButton.show()
} else {
$signUpButton.hide()
}
}
</script>

Cannot disable inputs with respect to id of div through jquery

I have different forms inside divs with different ids. What I am doing is that I am using radio buttons to disable their respective divs.
My code isn't working here is what I tried
$(document).ready(function() {
$('.address_type').change(function() {
if (this.value == '0') {
var id = $(this).attr('id');
$("#add_0_" + id).find("input[class='secondary']").prop("disabled", false);
} else {
$("#add_0_" + id).find("input[class='secondary']").prop("disabled", true);
}
});
});
<form action="/ali_store/order/place" method="POST">
<div class="collapse in" id="ali_store">
<div class="panel-body">
<input type="hidden" name="_token" value="CJDqNipNtpNavJ9m1fogtUyCThJe2GCS75bI6KJ2">
</div>
<hr />
<div class="panel-body">
Address Information
<div class="row">
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali_store" value="1" checked /> Use This Address
<div id="add_1_ali_store">
<br /> asd
<br /> asd,
<br /> xcv
<br /> sdf
</div>
</div>
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali_store" value="0" /> Use This Address
<div id="add_0_ali_store">
<div class="form-group">
<label class="col-lg-4">House no.</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_hno" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Street</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_street" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Area</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_area" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">City</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_city" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">State</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_state" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Postal Code</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_postal" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Phone</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_phone" class="secondary form-control" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Mobile</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_mobile" class="secondary form-control" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div>
TOTAL: <strong>Rs. 186,145.00 /-</strong>
</div>
<input type="submit" formtarget="_blank" class="btn btn-primary" value="Place Order" />
</div>
</div>
</form>
<form action="/ali2/order/place" method="POST">
<div class="collapse in" id="ali2">
<div class="panel-body">
<input type="hidden" name="_token" value="CJDqNipNtpNavJ9m1fogtUyCThJe2GCS75bI6KJ2">
</div>
<hr />
<div class="panel-body">
Address Information
<div class="row">
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali2" value="1" checked /> Use This Address
<div id="add_1_ali2">
<br /> asd
<br /> asd
<br /> asd
<br /> asd
</div>
</div>
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali2" value="0" /> Use This Address
<div id="add_0_ali2">
<div class="form-group">
<label class="col-lg-4">House no.</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_hno" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Street</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_street" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Area</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_area" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">City</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_city" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">State</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_state" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Postal Code</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_postal" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Phone</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_phone" class="secondary form-control" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Mobile</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_mobile" class="secondary form-control" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div>
TOTAL: <strong>Rs. 1,331.00 /-</strong>
</div>
<input type="submit" formtarget="_blank" class="btn btn-primary" value="Place Order" />
</div>
</div>
</form>
<form action="/ali3/order/place" method="POST">
<div class="collapse in" id="ali3">
<div class="panel-body">
<input type="hidden" name="_token" value="CJDqNipNtpNavJ9m1fogtUyCThJe2GCS75bI6KJ2">
</div>
<hr />
<div class="panel-body">
Address Information
<div class="row">
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali3" value="1" checked /> Use This Address
<div id="add_1_ali3">
<br /> dsa
<br /> dsa
<br /> dsa
<br /> dsa
</div>
</div>
<div class="col-lg-6">
<input type="radio" name="add_type" class="address_type" id="ali3" value="0" /> Use This Address
<div id="add_0_ali3">
<div class="form-group">
<label class="col-lg-4">House no.</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_hno" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Street</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_street" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Area</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_area" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">City</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_city" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">State</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_state" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Postal Code</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_postal" class="secondary form-control" required/>
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Phone</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_phone" class="secondary form-control" />
</div>
</div>
<div class="form-group">
<label class="col-lg-4">Mobile</label>
<div class="col-lg-8">
<input type="text" name="address_secondary_mobile" class="secondary form-control" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div>
TOTAL: <strong>Rs. 1,500.00 /-</strong>
</div>
<input type="submit" formtarget="_blank" class="btn btn-primary" value="Place Order" />
</div>
</div>
</form>
I want that if I change the radio button and it has value '0' then its input fields get disabled only else enabled.

You can write code like
$(document).ready(function() {
$('.address_type').change(function() {
if (this.value == '0') {
var id = $(this).attr('id');
$("#add_0_" + id).find("input.secondary").prop("disabled", false);
} else {
$("#add_0_" + id).find("input.secondary").prop("disabled", true);
}
});
});

How to refer input id with a div id in javascript

Here is my div image:
I want to refer input id within gallery-1 dive. I tried this script:
$(document).ready(function () {
document.getElementById('#gallery-1','id_gallery_set-1-title').onchange = function() {
var e = document.getElementById('#gallery-1','id_gallery_set-1-slug');
if (!e._changed) { e.value = URLify(document.getElementById('#gallery-1','id_gallery_set-1-title').value, 50); }
}
});
But it did not work. How do I refer input id='id_gallery_set-1-title' within gallery-1 div?
Edit:
This code work for first formset:
$(document).ready(function () {
document.getElementById('id_gallery_set-0-title').onchange = function() {
var e = document.getElementById('id_gallery_set-0-slug');
if (!e._changed) { e.value = URLify(document.getElementById('id_gallery_set-0-title').value, 50); }
}
});
MY form html:
<form action="." method="post" enctype="multipart/form-data">
{{ formset.management_form }}
{% csrf_token %}
<legend>Event</legend>
<div class="event">
{{ form|crispy}}
</div>
<legend>
<div class="pull-right"><i class="icon-plus icon-white"></i> Add Photo</div>
Photo Gallery
</legend>
<div class="gallery form-inline">
{% for form in formset %}
{{ form|crispy }}
{% endfor %}
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
This is my full inspect of form:
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-8">
<div class="panel panel-default">
<div class="panel-body">
<form action="." method="post" enctype="multipart/form-data">
<input id="id_gallery_set-TOTAL_FORMS" name="gallery_set-TOTAL_FORMS" value="2" type="hidden"><input id="id_gallery_set-INITIAL_FORMS" name="gallery_set-INITIAL_FORMS" value="0" type="hidden"><input id="id_gallery_set-MIN_NUM_FORMS" name="gallery_set-MIN_NUM_FORMS" value="1" type="hidden"><input id="id_gallery_set-MAX_NUM_FORMS" name="gallery_set-MAX_NUM_FORMS" value="1000" type="hidden">
<input name="csrfmiddlewaretoken" value="QrSlXahV8qshQCefhNwcF1wrd4eWfDuX0UTslT3lYsyheDCdJ8GQrcBQ0IPrYqiK" type="hidden">
<legend>Event</legend>
<div class="event">
<div id="div_id_name" class="form-group"> <label for="id_name" class="control-label requiredField">
Name<span class="asteriskField">*</span> </label> <div class="controls "> <input class="textinput textInput form-control" id="id_name" maxlength="31" name="name" required="" type="text"> </div> </div> <div id="div_id_description" class="form-group"> <label for="id_description" class="control-label requiredField">
Description<span class="asteriskField">*</span> </label> <div class="controls "> <textarea class="textarea form-control" cols="40" id="id_description" name="description" rows="10" required=""></textarea> </div> </div> <div id="div_id_tags" class="form-group"> <label for="id_tags" class="control-label ">
Tags
</label> <div class="controls "> <select multiple="multiple" class="selectmultiple form-control" id="id_tags" name="tags">
</select> </div> </div>
</div>
<legend>
<div class="pull-right"><i class="icon-plus icon-white"></i> Add Photo</div>
Photo Gallery
</legend>
<div class="gallery form-inline">
<div id="div_id_gallery_set-0-title" class="form-group"> <label for="id_gallery_set-0-title" class="control-label requiredField">
Title<span class="asteriskField">*</span> </label> <div class="controls "> <input class="textinput textInput form-control" id="id_gallery_set-0-title" maxlength="35" name="gallery_set-0-title" type="text"> </div> </div> <div id="div_id_gallery_set-0-slug" class="form-group"> <label for="id_gallery_set-0-slug" class="control-label requiredField">
Slug<span class="asteriskField">*</span> </label> <div class="controls "> <input class="textinput textInput form-control" id="id_gallery_set-0-slug" maxlength="35" name="gallery_set-0-slug" readonly="readonly" type="text"> </div> </div> <div id="div_id_gallery_set-0-image" class="form-group"> <label for="id_gallery_set-0-image" class="control-label ">
Image
</label> <div class="controls "> <input class="clearablefileinput" id="id_gallery_set-0-image" name="gallery_set-0-image" type="file"> <p id="hint_id_gallery_set-0-image" class="help-block">Event Picture</p> </div> </div> <input id="id_gallery_set-0-id" name="gallery_set-0-id" type="hidden"> <div class="form-group"> <div id="div_id_gallery_set-0-DELETE" class="checkbox"> <label for="id_gallery_set-0-DELETE" class=""> <input class="checkboxinput" id="id_gallery_set-0-DELETE" name="gallery_set-0-DELETE" type="checkbox">
Delete
</label> </div> </div> <input id="id_gallery_set-0-event" name="gallery_set-0-event" type="hidden">
<div id="gallery-1">
<label for="id_gallery_set-1-title">Title:</label><input id="id_gallery_set-1-title" maxlength="35" name="gallery_set-1-title" type="text">
<label for="id_gallery_set-1-slug">Slug:</label><input id="id_gallery_set-1-slug" maxlength="35" name="gallery_set-1-slug" readonly="readonly" type="text">
<label for="id_gallery_set-1-image">Image:</label><input id="id_gallery_set-1-image" name="gallery_set-1-image" type="file"><br><span class="helptext">Event Picture</span>
<label for="id_gallery_set-1-DELETE">Delete:</label><input id="id_gallery_set-1-DELETE" name="gallery_set-1-DELETE" type="checkbox"><input id="id_gallery_set-1-id" name="gallery_set-1-id" type="hidden"><input id="id_gallery_set-1-event" name="gallery_set-1-event" type="hidden">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Console errors:
Unknown property ‘-moz-outline’. Declaration dropped.create:1:4347
Unknown property ‘-moz-box-shadow’. Declaration dropped.create:1:5300
Expected declaration but found ‘*’. Skipped to next declaration.create:1:6215
Expected ‘none’, URL, or filter function but found ‘alpha(’. Error in parsing value for ‘filter’. Declaration dropped.create:1:9330
<div id="gallery-1">
<tr><th><label for="id_gallery_set-1-title">Title:</label></th><td><input id="id_gallery_set-1-title" maxlength="35" name="gallery_set-1-title" type="text" /></td></tr>
<tr><th><label for="id_gallery_set-1-slug">Slug:</label></th><td><input id="id_gallery_set-1-slug" maxlength="35" name="gallery_set-1-slug" readonly="readonly" type="text" /></td></tr>
<tr><th><label for="id_gallery_set-1-image">Image:</label></th><td><input id="id_gallery_set-1-image" name="gallery_set-1-image" type="file" /><br /><span class="helptext">Event Picture</span></td></tr>
<tr><th><label for="id_gallery_set-1-DELETE">Delete:</label></th><td><input id="id_gallery_set-1-DELETE" name="gallery_set-1-DELETE" type="checkbox" /><input id="id_gallery_set-1-id" name="gallery_set-1-id" type="hidden" /><input id="id_gallery_set-1-event" name="gallery_set-1-event" type="hidden" /></td></tr>
</div>
photo.js:8:13
Use of getPreventDefault() is deprecated. Use defaultPrevented inste

You can try this clean syntax like:
$(document).ready(function () {
$('body').on('input','div[id^="gallery-"] input[id$="title"]',function() {
el = $(this).parent().find('> input[id$="slug"]');
el.val( URLify($(this).val(),50))
});
});
or change the ids to classes
note put this syntax in a script tag at the bottom of the page
$(document).ready(function() {
$('body').on('input','div[id^="gallery-"] input[id$="title"]',function() {
el = $(this).parent().find('> input[id$="slug"]');
el.val($(this).val() + 'xxxxxxxxxxxx');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="gallery-1">
<input type="text" id="id_gallery_set-1-title">
<input type="text" id="id_gallery-1-slug">
<div id="gallery-2">
<input type="text" id="id_gallery_set-2-title">
<input type="text" id="id_gallery-2-slug">
</div>
</div>
<div id="gallery-3">
<input type="text" id="id_gallery_set-3-title">
<input type="text" id="id_gallery-3-slug">
</div>
</body>
</html>

You don't need to use parent selector #gallery-1 because you have id. Id must be unique for all DOM elements.
I don't know what is e._changed and what you want to do with this check, so I'm sure that if(!e._changed) will always returns true.
$(document).ready(function () {
document.querySelector('#id_gallery_set-1-title').addEventListener('change', function() {
var e = document.querySelector('#id_gallery_set-1-slug');
if (!e._changed) {
e.value = URLify(document.querySelector('#id_gallery_set-1-title').value, 50); }
}
});

It should help you. whenever text change in textbox event occure in that text box refere by child of div with id gallery-1
$("#gallery-1 > #id_gallery_set-1-title").on("input",function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="gallery-1">
<input type="text" id="id_gallery_set-1-title">
<input type="button" value="submit">
</div>
</body>
</html>

You could use querySelector() :
document.querySelector('#gallery-1 #id_gallery_set-1-title');
Not sure what you're trying to achieve but since you're using jQuery you could attach event like :
$(document).ready(function () {
$('#gallery-1 #id_gallery_set-1-title').on('input', function(){
//Get click element using '$(this)'
if( CONDITION ){
}
});
});
Hope this helps.

Categories