on change doesn't work - javascript

i have input type file of array that user can click add more.In my code part javascript i have method on change
jQuery('.focus_image').on('change', function () {
alert("hello");
above code i test input type file when user click add new input type file and browse file in directory but i test already input type file name orange work perfectly but name banana doesn't show hello What code is wrong? Help me to solve this problem.Below is my full code
<table>
<tr>
<th>
<label for="test">test</label>
</th>
<td>
<div id="popup1">
<div id="image-zone" style="width:200px;float:left;text-align:center">
<input type='button' class='button-primary' value='Add' id='add_focus'>
<input type="file" class="focus_image" name="orange">
</div>
</div>
<script type="text/javascript">
var count_focus = 0;
var num_focus = count_focus;
var temp_focus = count_focus + 1;
var name_focus = 'Focus_DIV' + temp_focus;
jQuery(document).ready(function($) {
$("#add_focus").click(function() {
if (num_focus == 10) {
alert("Only 10 textboxes allow");
return false;
}
id_div = 'Focus_DIV' + temp_focus;
file_id_name = "file_Focus_DIV" + temp_focus;
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Focus_DIV' + temp_focus);
newTextBoxDiv.html('<input type="file" id="' + file_id_name + '" name="banana" class="focus_image">');
newTextBoxDiv.appendTo("#image-zone");
temp_focus++;
name_focus = 'Focus_DIV' + temp_focus;
num_focus++;
});
});
//Below code is doesn't work when add new input type file
jQuery('.focus_image').on('change', function() {
alert("hello");
//
});
</script>
</td>
</tr>
</table>
Problem can solve
This problem can solve by in code html add new element dynamically must re register event

Look on Below jsfiddle for your code
http://jsfiddle.net/guNvz/
Actually Problem with little arrangement. If you add new element in HTML by dynamically than on that element you need to re register that event.
Try with below script :
<script type="text/javascript">
var count_focus = 0;
var num_focus = count_focus;
var temp_focus = count_focus + 1;
var name_focus = 'Focus_DIV' + temp_focus;
jQuery(document).ready(function($) {
jQuery("#add_focus").click(function() {
if (num_focus == 10) {
alert("Only 10 textboxes allow");
return false;
}
id_div = 'Focus_DIV' + temp_focus;
file_id_name = "file_Focus_DIV" + temp_focus;
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Focus_DIV' + temp_focus);
newTextBoxDiv.html('<input type="file" id="' + file_id_name + '" name="banana" class="focus_image">');
newTextBoxDiv.appendTo("#image-zone");
temp_focus++;
name_focus = 'Focus_DIV' + temp_focus;
num_focus++;
jQuery('.focus_image').unbind('change').change(function() {
alert("hello");
//
});
});
});
//Below code is doesn't work when add new input type file
</script>
Let me know you have query.
Thanks..!!

Keep that on event function inside the ready function
Here is the modified code:
<table>
<tr>
<th>
<label for="test">test</label>
</th>
<td>
<div id="popup1">
<div id="image-zone" style="width:200px;float:left;text-align:center">
<input type='button' class='button-primary' value='Add' id='add_focus'>
<input type="file" class="focus_image" name="orange">
</div>
</div>
<script type="text/javascript">
var count_focus = 0;
var num_focus = count_focus;
var temp_focus = count_focus + 1;
var name_focus = 'Focus_DIV' + temp_focus;
jQuery(document).ready(function($) {
$("#add_focus").click(function() {
if (num_focus == 10) {
alert("Only 10 textboxes allow");
return false;
}
id_div = 'Focus_DIV' + temp_focus;
file_id_name = "file_Focus_DIV" + temp_focus;
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Focus_DIV' + temp_focus);
newTextBoxDiv.html('<input type="file" id="' + file_id_name + '" name="banana" class="focus_image">');
newTextBoxDiv.appendTo("#image-zone");
temp_focus++;
name_focus = 'Focus_DIV' + temp_focus;
num_focus++;
});
//keep the code here
jQuery('.focus_image').on('change', function() {
alert("hello");
//
});
});
//Below code is doesn't work when add new input type file
//Removed the code from here
</script>
</td>
</tr>
</table>
JSFiddle

use this, to rule out that it's a css problem
$('#banana').focus(function() {
alert('Handler for .focus() called.');
});

Don't use on like that, use it like this, using it on #image-zone will attach this event to anything that has css class focus_image on #image-zone now and if they are added dynamically.
jQuery(document).ready(function($) {
$('#image-zone').on('change', '.focus_image', function() {
// Your code
});
// Your other code like the click event
});
Test out this fiddle which shows how you should do it

Related

Multiple files Uploader jQuery

I am trying to add multiple file uploading functionality to a my website. Basically I have a button "add files" which triggers and appends a input fields of file type which can be used to upload a document.
Both on change and click events are not triggered. Thanks
files = $('.button-container');
fileSerialNumber = 1;
var addFileInputBtn = $('<button class="add-file">+ Add file</button><br><br>')
files.append(addFileInputBtn)
addFileInputBtn.click(function (event) {
event.preventDefault();
addFileInputBtn.text("+ Add another file")
var fileBoxContainer = $('<div class="fileBoxContainer"/><br>')
var fileNameLabel = $('<label style="margin-left: 20px;" for="namefile' + fileSerialNumber + '"> Name: </label>');
var fileName = $('<input class="file-name" name="namefile' + fileSerialNumber + '" type="text"></input>');
var rmButton = $("<button class='remove-button' style='color:grey;'><i class='fa fa-times-circle' aria-hidden='true'></i></button>");
var fileInput = $('<input class="file-input" name="file' + fileSerialNumber + '" type="file"></input>')
fileBoxContainer.append(fileInput);
fileBoxContainer.append(fileNameLabel);
fileBoxContainer.append(fileName);
fileBoxContainer.append(rmButton);
files.append(fileBoxContainer);
debugger
fileInput.on('change', function () {
debugger
var fName = this.value
fName = fName.replace(/.*[\/\\]/, '');
fileName.val(fName);
});
rmButton.click(function (event) {
event.preventDefault();
fileBoxContainer.remove();
});
fileSerialNumber += 1;
})
$('.remove-button').click(function (event) {
event.preventDefault();
$('.fileBoxContainer').remove();
});
<html>
<head>
<script src="https://use.fontawesome.com/f65531ab46.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form class="button-container">
</form>
</body>
</html>

jquery adding new div on button click only if previous div's textbox value is not empty

I want to add a new div one after one upto 10 "div", and each div has three textboxes.
Everytime I want to add new div only when the 3rd textbox value of previous div is not blank !!!
Here is my code:
<div class="input_fields_wrap">
<button class="add_field_button">Add Booking</button>
</div>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var counter = 2;
$(".add_field_button").click(function() {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<div id="target"><label>Textbox #' + counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="firsttextbox' + counter + '" value="" > <input type="text" name="textbox' + counter +
'" id="secondtextbox' + counter + '" value="" > Remove<input type="text" id="box' + counter + '" value="">this is 3rd textbox of each div</div>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$(this).on("click", "#remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('#target').remove();
counter--;
});
});
</script>
how to do this?
If you want only the value of last div of the previous group than check this
var boxid="#box" + (counter-1);
var prev_value=$(boxid).val();
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
else if(prev_value == ""){
alert("please fill the box");
return false;
}
LIVE DEMO
if ($("#TextBoxDiv" + counter).is(":empty")){
//Create new div
}else{
alert('div should not be empty');
}
never done this but after some googling this is what i came up with hope it helps

Passing entered text field value into getJSON string?

I am trying to add some functionality to the entered tags in this image searcher using the flickr API. I have it working but it only works when I write the string within the code. For example I have "cats" in the for now. My goal is the pass the entered value from the textbox (id="textbox1") into the tags in the script above. I want to be able to search from the text box and not go into the code. Thanks for any tips/advice!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#button").click(function() {
$("#images").empty();
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
tags: "cats",
tagmode: "any",
format: "json"
}, function(data) {
console.log(data);
$.each(data.items, function(i, item) {
$(".buttonclick").remove();
$('<img/>').attr("src", item.media.m).appendTo('#images');
if (i == 1) return false;
});
});
});
$('#images').on('click', 'img', function() {
var $imgClone = $(this).clone().attr('src', $(this).attr('src').replace('_m.', '_b.'));
$('#main').html($imgClone);
});
});
$(document).ready(function() {
var counter = 2;
$("#addButton").click(function() {
if (counter > 10) {
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label></label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function() {
if (counter == 1) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function() {
var msg = '';
for (i = 1; i < counter; i++) {
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
<h1>Image Search</h1>
<button type="button" id="button">Search</button>
<input type='button' value='Remove Tag' id='removeButton'>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<input type='textbox' id='textbox1'>
<input type='button' value='Add tag' id='addButton'>
</div>
</div>
<div id="images" /></div>
</body>
</html>
In $.getJSON you can switch "cats" with
$("#textbox1").val(),
and it will use the value of the input (whatever the user has typed into it) as the value of "tags".
//Stuff before
tags:$("#textbox1").val(),
//Stuff after
I hope this helped!
Edit:
In case you want to learn more about jQuery's .val(), you can read the documentation here.

js/jQuery How to assign check box value to div

I'm using Eric Hynds jQuery MultiSelect Widget that is being populated from a javascript file. The issue is that either selection adds to both sides. Option 1-3 should only add to Main1-3, same for option/Main 4-6. Please see my fiddle of how it works and the issue http://jsfiddle.net/3u7Xj/112/
I think it would be eaisiest to break it out something like
var lbl = $("#MDCselect").val();
if (number1.checked) {...
('.holder').append...
var lbl2 = $("#ClinicalSelect").val();
if (number2.checked) {...
('.holder2').append...
currently
$(document).ready(function () {
$(".multiselect").multiselect({
header: "Choose up to 5 areas total",
click: function (event, ui) {
var number1 = $("#MDCselect").children(":checked").length,
number2 = $("#Clinicalselect").children(":checked").length;
if (ui.checked && ((number1 + number2 >= 5) || $(this).children(":checked").length >= 5)) {
return false;
}
var lbl = ui.value;
if (ui.checked) {
var ctrl = '<input type="checkbox" name="chk" checked="checked" class="chk" id="' + lbl.replace(/[^a-z0-9\s]/gi, '').replace(/[,\s]/g, '') + '">';
$("[id^=id]:checked").each(function () {
$(this).nextAll('.holder:first').append('<div>' + ctrl + lbl + '</div>');
});
} else {
$("[id^=id]:checked").each(function () {
$(this).nextAll('.holder:first').find('#' + lbl.replace(/[^a-z0-9\s]/gi, '').replace(/[,\s]/g, '')).parent().remove();
})
}
},
selectedList: 5
});
$(".checkers").click(function () {
if (!$(this).is(':checked')) {
$(this).nextAll('.holder:eq(0)').find('div input').parent().remove();
} else {
var checkedOnes = $('#MDCselect').nextAll('.ui-multiselect-menu').find('ul li input:checked');
$(".holder").html("");
for (var i = 0; i < checkedOnes.length; i++) {
var lbl = checkedOnes.eq(i).attr('value');
var ctrl = '<input type="checkbox" name="chk" checked="checked" class="chk" id="' + lbl.replace(/[^a-z0-9\s]/gi, '').replace(/[,\s]/g, '') + '">';
$("[id^=id]:checked").each(function () {
$(this).nextAll('.holder:first').append('<div>' + ctrl + lbl + '</div>');
});
}
}
});
});
I'm not entirely sure if I get what you want to do, try this and let me know if it is what you want, here is the fiddle if you want to try it http://jsfiddle.net/8xBcd/
I put the mains in a containing div, that way is easier to make selectors for the diferent mains. check the fiddle please.
<div id="main1-3" >
<input type="checkbox" name="chk1" value="Main1" id="id1" class='checkers'/><label for="Main1"><b>Main1</b></label>
<div class="holder"></div>
</br>
<input type="checkbox" name="chk2" value="Main2" id="id2" class='checkers'><label for="Main2"><b> Main2</b></label>
<div class="holder"></div>
</br>
<input type="checkbox" name="chk3" value="Main3" id="id3" class='checkers'><label for="Main3"><b> Main3</b></label>
<div class="holder"></div>
</div>
<select id="MDCselect" multiple="multiple" class="multiselect">
<option>1</option>
<option>2</option>
<option>3, this space</option>
</select><br>

How to handle javascript made inputs

I have a problem, i searched for the solution all over the internet, but i couldn't find it out :S
The problem is:
I'm creating file inputs on button click, but i can't handle these javascript made inputs because they aren't in my $_FILES array after i click on submit..
My code is:
HTML:
<form name = "galleryupload_form" method = "post" action = "#" enctype="multipart/form-data">
<ul id = "formul">
</ul>
<input type="button" value="Még egy kép feltöltése" onClick="addInput('formul');">
<input name = "galleryupload_submit" type = "submit" value = "Küldés"/>
</form>
javascript:
var counter = 0;
var limit = 5;
function addInput(ulName) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
} else {
var newli = document.createElement('div');
newli.innerHTML = "<label for = ''>Fájl " + (counter + 1) + "</label><input type='file' name='files[]'>";
document.getElementById(ulName).appendChild(newli);
counter++;
}
}
If you now the solution, please let me know. Thank you.
Referring to the question before editing:
File inputs appear in $_FILES not $_POST.
After editing, I cannot reproduce the problem.
check this code .
<?php
if(isset($_POST['galleryupload_submit'])){
print_r($_FILES);
}
?>
<form name = "galleryupload_form" method = "post" action = "" enctype="multipart/form-data">
<ul id = "formul">
</ul>
<input type="button" value="My textbox goes" onClick="addInput('formul');">
<input name ="galleryupload_submit" type ="submit" value ="Click Add"/>
</form>
<script>
var counter = 0;
var limit = 5;
function addInput(ulName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}else {
var newli = document.createElement('div');
newli.innerHTML = "<label for = ''>New TexBOx " + (counter + 1) +"</label><input type='file' name='files[]'>";
document.getElementById(ulName).appendChild(newli);
counter++;
}
}
</script>

Categories