dj pro dj pro - 19 days ago 8
Javascript Question

How to refer input id with a div id in javascript

Here is my div image:

enter image description here

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"><a href="#" class="btn btn-inverse add-photo"><i class="icon-plus icon-white"></i> Add Photo</a></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:

enter image description here

<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"><a href="#" class="btn btn-inverse add-photo"><i class="icon-plus icon-white"></i> Add Photo</a></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


enter image description here

Answer

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>

Comments