I am trying to trigger a file input using javascript. I am using Django formset and I have obtained the id of the input fields current my Javascript functions looks like:
$(document).ready(function(){
$("#show-image-upload-inputs").click(function(){
$("#image-upload-div").toggle();
});
function open_input (id,input_id) {
$(this.id).on("click", function () {
$(this.input_id).trigger("click");
});
}
});
And in my HTML I am passing them to the function, using onclick:
<div id="file-0-selector" class="add-image" onclick="open_input(this.id,document.getElementById('id_form-0-image'))"><i class="mt-2 fas fa-plus fa-5x"></i></div>
However, when I click on it I do not see the upload box opening, I was wondering how I can achieve this. I have acquired the image input fields form my formset and the id seems to be correct.
Thanks in advance.
Your open_input function is just binding another click handler, you should remove this and to select an element by id in jQuery you need to prefix the id with # and you don't need to access variables using this.
function open_input(input_id) {
$("#" + input_id).trigger("click");
}
Now your onclick becomes a little more simple as you don't need to select the element you only need to pass it's id
onclick="open_input('id_form-0-image')"
Related
I have an html button with an onclick attribute which runs a jQuery AJAX function pointing to php code.
The php code writes HTML in an output HTML <select> element(the element remains hidden until the javascript runs.)
This is working great to populate the <select> when an "add another" button is clicked.
The problem is it adds one and only one. I want to be able to have a new <select> tag populate with each click of the "add another" button up to a max of 2.
The JS in question:
var genre_dropdown = function genre_dropdown() {
$('.genre_output').css('display', 'block');
$.ajax({
url:'../includes/functions/genre_dropdown.php',
complete: function (response) {
$('.genre_output').html(response.responseText);
},
error: function () {
$('.genre_output').html('Bummer: there was an error!');
}
});
return false;
}
The HTML in question:
<select name="genre_id[]" autocomplete="off" class="genre_output"></select>
<select name="genre_id[]" autocomplete="off" class="genre_output"></select>
<div class="button add-genre-button" onclick="return genre_dropdown();">+ Add Existing Genre</div>
I thought I could include 2 html <select> elements for the php to populate into, the code would execute from one to the next. I see why this is not correct, the code is running in both at the same time. I'm at a place where I'm considering have 2 buttons ("add one", "add another") but that seems redundant and not correct, especially considering I want a scale-able technique (the max may not always be 2.) I need help.
Your php request is fine.
I simply mean define a variable as your using javascript i.e.:
var sel = '<select name="genre_id[]" autocomplete="off" class="genre_output">' + response + "</select>';
and then each time you do a request it will include the response as the value of the element. This would allow you to append the parent div as many times as you want. Finally, use a simple if counter to decide whether to keep appending or not:
if ($(".genre_output").length <= 2){
$("PARENT_DIV_ID").append(sel);
};
Is this clearer? #kaari
Assuming you want to keep previous values in dropdown then you can try append() instead of html()
$('.genre_output').append(response.responseText);
I have a dynamic form that you can add elements. Like, you type a name, and then if you have to write a new name, you click on 'Add Name', and another textbox appears.
Their names are names[]. I can process those inputs with PHP on the server-side. However, I want to make a calculation with those inputs, like writing all of them on the page as the user types.
However, because those inputs, those textboxes are created dynamically, Javascript only selects the first textbox with the name name[].
Let me make it clear. This way it'll be better. I got a textbox. I input age in there. If I want to enter a new age, I click 'Add Age' button, and a new input box pops out. I write the new age value. And as I type, on a 3rd textbox, the average of those age values get printed. But because of those input boxes, with names ages[] are created on the execution time (not the compile time, I'm not sure these are the appropriate words for those. Probably not, because nothing is compiling? - or is it?), I can't process them.
What must I do to solve this problem?
I used both
$('input[name=ages\\[\\]]').change(function(){
console.log('1');
});
and
$('input[name=ages\\[\\]]').on('input', function() {
console.log('2');
});
but it didn't work.
Thanks in advance.
There's no need to escape the square brackets (though you should enclose the whole field name in double quotes). This works for me:
$('input[name="names[]"]').on('change', function(){
console.log($(this).val());
});
Here's a jsfiddle demonstrating: http://jsfiddle.net/t7J5t/
Your problem is actually probably related to the fact that you're adding the fields dynamically. The way you're using your selector will only work on the fields that already exist. Fields that are added after that selector will not be picked up. What you want to do, then, is put the selector inside the .on, like this:
$('.container').on('change', 'input[name="names[]"]', function(){
console.log($(this).val());
});
This will bind the listener to the container, not the fields (just make sure your fields get added inside of the container; you can call it whatever you want).
Incidentally, there's no reason you have to restrict yourself from using the name attribute of fields when using jQuery selectors. For example, you could use a class:
<div class="container">
<input class="age" name="ages[]">
<input class="age" name="ages[]">
<!-- ... as many more as needed, added dynamically is OK ... -->
</div>
<script>
$(document).ready(function(){
$('.container').on('change', 'input.age', function(){
console.log($(this).val());
});
});
</script>
Here's a sample of it in action, where you can dynamically add fields, and it calculates the average:
http://jsfiddle.net/t7J5t/1/
Try to use:
$(document).on('change', 'input[name=ages\\[\\]]', function() {
console.log('2');
});
I have a payment form,in which when I click on the internet banking ,all the input field be disabled and instead show some images. this is the fiddle upto which i have done http://jsfiddle.net/f8Fd3/4/ No where I cant hide the input text field using their class id.
this is the js
function cc()
{
$('#cards.credit-card').removeClass("visa mastercard").addClass("visa");
}
function dc()
{
$('#cards.credit-card').removeClass("visa mastercard").addClass("mastercard");
}
function ib()
{
}
please check the fiddle to get a clear picture
It is because, by default, when 'button' tag inside a 'form' is clicked, 'form' will be submitted.
It's not redirecting for the other two because there's a HTML5 form validation that prevents the form from being submitted. (that's why you will see an error message when you click Visa/Mastercard)
if you insist on binding events in the dom...you can pass an event object to the handler:
<button onclick="javascript:ib(event)" class="btn btn-1 btn-1c">Internet Banking</button>
and in your function:
function ib(event) {
event.preventDefault();
}
you may wanna do the same to the other two handlers as well.
so the default submit action will be prevented.
and to disable all the text fields:
$('#cards input[type=text]').prop('disabled', true);
to hide them:
$('#cards input[type=text]').hide();
EDIT
by the way. you don't have to use selectors like $('#cards.credit-card'), 'id' should be unique in the DOM, just by using $('#cards') you will get the same element.
The syntax class="class=tokenex_data full gr-input" is incorrect.
Instead use, class="tokenex_data full gr-input"
Then use :
`function ib()
{
$(".tokenex_data").hide();
$(".monthgr-input").hide();
}
`
You want to select all input & select elements and set their property disabled to true:
$('#cards input, #cards select').prop('disabled', true);
Fiddle
I'd like to have a field that doesn't show at first, but if the user decided to input to it, then it will appear in the form.
I can use Jquery and do something like
$('input[example]')
.bind('click', function() {
$('#clickfield')
.append('<input id="new_field" name="MODEL[new_field]" size="30" type="text">');
However, I'd like to add this field in several different forms for different models.
Since the model name is in the field, how would I write the Jquery script to be modular so I can use the same script for all my forms?
One solution is to make a function with the names you want as input parameters:
addInput(form, id, modelName) {
$(form).append(
'<input id="'+id+'" name="'+modelName+'['+id+']" size="30" type="text">'
);
}
Where form would be the selector of the field ('#clickfield' in the example case), id would be the id of the new input field, and modelName would be the name of the model you mentioned.
Other solution, assuming 'input[example]' selects some button or clickable area that triggers the event of showing the field; and '#clickfield' is some div or span or some area where you will show your field, is to load these hidden fields from the server, styled as display:none, with a mnemonic class, so you could do something like define a function:
showField(clickable, class) {
$(clickable).click(
function(){
$(class).show();
}
);
}
and then:
$(document).ready(
showField('input[example1]', '.class1');
showField('input[example2]', '.class2');
showField('input[example3]', '.class3');
// .
// .
// .
// One line for every clickable area that triggers
// the event of showing a field, and the class of the
// field to show
);
this way you could add some user friendly features like fading the field in with the fadeIn() Jquery function (instead of show()), or any other animation on appearing.
Hope you could use it! good luck!
I'm using JEditable and trying to populate a select based on a variable. I need a way to pass a variable from my page back through the JQuery to dynamically create the select.
JQuery:
$(".dblclick_district").editable('miscfreqs.php?mode=save_edit&module=miscfreqs&type=district',
{
type: 'select',
loadurl: 'tools.php?mode=get_districts_json',
submit: 'OK',
event: 'dblclick'
});
The HTML that I use is generated by PHP:
<div class="dblclick_province" id="freq_id">Province</div>
<div class="dblclick_district" id="freq_id">District</div>
I'd like to be able to somehow pass the value of province through the dblclick event of District, since the Districts available depend on which Province is selected.
First thing two elements on the same page cannot have same id.
In your case both div are having same id ie freq_id so it should be changed.
You can have html as below -
<div class="dblclick_province" id="province_id">Province</div>
<div class="dblclick_district" id="district_id">District</div>
Then write the below code in your js file.
It uses jquery's dbclick event.
$('document').ready(function(){
$('#district_id').dblclick(function() {
var province_value = $('#province_id').html();
// write you code here in which you want to process province value.
});
});