I have dynamic input type file fields which can be added more by clicking on add more
I have scripted to get file name when it is selected, but it is working for only first field not for other fields.
So how to get all file names when it is selected?
$("#em_add").click( function(){
var decoration_box = $(".one").html();
$(".logos").append('<div class="one">'+decoration_box+'</div>');
});
$('.logo').change(function () {
var filePath=$(this).val();
alert(filePath);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="em_add">Add New</button>
<div class="logos">
<div class="one">
<input type="file" name="logo[]" id="logo" class="logo" />
</div>
</div>
you are adding elements dynamically but when you add you are not attaching an event handler to these new elements. To fix this you can use event delegation, by attaching the event to parent .logos.
$("#em_add").click( function(){
var decoration_box = $(".one").html();
$(".logos").append('<div class="one">'+decoration_box+'</div>');
});
$('.logos').on('change', '.logo', function () {
var filePath=$(this).val();
alert(filePath);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="em_add">Add New</button>
<div class="logos">
<div class="one">
<input type="file" name="logo[]" id="logo" class="logo" />
</div>
</div>
Refer Jquery .on('change') not firing for dynamically added elements
$("#em_add").click( function(){
var decoration_box = $(".one").html();
$(".logos").append('<div class="one">'+decoration_box+'</div>');
});
$('.logos').on('change', 'input:file', function () {
var filePath=$(this).val();
alert(filePath);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="em_add">Add New</button>
<div class="logos">
<div class="one">
<input type="file" name="logo[]" id="logo" class="logo" />
</div>
</div>
Related
Created 3 dynamic divs(sea_p,sea_p_div,div_btns), inside the third(div_btns) created 2 buttons
how can i change the text inside these dynamic buttons before adding to body?
let div = $(`<div class="Search_div"></div>`)
let p = $(`
<div class="sea_p">
<div class="sea_p_div">
<div class="p_img">
<img src="" alt="" width="80" />
<div class="div_span">
<span class="p_name"></span>
<span class="p_surname"></span>
</div>
</div>
<div class="div_btns">
<button class="req_btn req_check1" data-id="">Text1</button>
<button class="req_btn req_check2" data-id="">Text2</button>
</div>
</div>
</div>`)
div.append(p)
//change text here
$('body').append(div)
let div = $(`<div class="Search_div"></div>`)
let p = $(`
<div class="sea_p">
<div class="sea_p_div">
<div class="p_img">
<img src="" alt="" width="80" />
<div class="div_span">
<span class="p_name"></span>
<span class="p_surname"></span>
</div>
</div>
<div class="div_btns">
<button class="req_btn req_check1" data-id="">Text1</button>
<button class="req_btn req_check2" data-id="">Text2</button>
</div>
</div>
</div>`)
div.append(p)
//change text here
p.find(".req_check1").html('New Text');
p.find(".req_check2").html('New Text 2');
$('body').append(div)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Please try this.
window.onload = function() {
$(".req_check1").html('New Text');
$(".req_check2").html('New Text 2');
}
Thank you.
You can use text() method of jQuery, on the jQuery object of button whose text you want to change.
NOTE : Use it just after appending the p tag to the body.
var buttonWrap = $('.sea_p .div_btns button');
buttonWrap.eq(0).text("Text for button 1");
buttonWrap.eq(1).text("Text for button 2");
I want to change image source in innerHtml data when the submit button is clicked.
<div id="areaEditor">
<div class="holder">
<img src="blob.blob"/>
<input class="filesss" type="file" value="one.jpg"/>
</div>
<div class="holder">
<img src="blob.blob"/>
<input class="filesss" type="file" value="two.jpg"/>
</div>
<div class="holder">
<img src="blob.blob"/>
<input class="filesss" type="file" value="three.jpg"/>
</div>
</div>
$('#newsButton').click(function(e){
e.preventDefault();
alert("klik");
var source = $(".holder").find(".filesss").val();
var imageTag = $(".holder").find("img").attr("src",source);
var htmlData = $("#areaEditor").html();
alert(htmlData);
})
However, the htmlData I alert there only shows me that the img src for the all three image tags is one.jpg.
How to make it corrects so that the image src is based on each the closest input file there?
Many thanks for the help.
You have many .holder elements, you should loop them and get the .filesss value for each one and replace the image src as follows:
$('#newsButton').click(function(e){
e.preventDefault();
alert("klik");
$(".holder").each(function() {
var source = $(this).find(".filesss").val();
$(this).find("img").attr("src", source);
});
var htmlData = $("#areaEditor").html();
})
The idea is to loop over the elements so it can take a single value each time, in your case; you are telling JQuery to get the source from the class holder which it finds it in the first element, so it does not need to look for anything else.
So you can do something like:
<div id="areaEditor">
<div class="holder">
<img src="blob.blob"/>
<input class="filesss" type="file" value="one.jpg"/>
</div>
<div class="holder">
<img src="blob.blob"/>
<input class="filesss" type="file" value="two.jpg"/>
</div>
<div class="holder">
<img src="blob.blob"/>
<input class="filesss" type="file" value="three.jpg"/>
</div>
</div>
<script>
$('#newsButton').click(function(e){
e.preventDefault();
alert("klik");
$(".holder").each(function() {
var source = $(this).find(".filesss").val();
$(this).find("img").attr("src",source);
});
var htmlData = $("#areaEditor").html();
alert(htmlData);
})
</script>
After start the application, i load content of formularzZgloszeniowy to empty div(#zawartoscTabeli). After click in li element, i load dates from div #ogloszenia to div(#zawartoscTabeli). From this moment, i can't catch event from button #kik.
Has someone any idea how to solve this problem??
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<meta charset="utf-8">
<title>Dokument bez tytułu</title>
<script>
$(document).ready(function() {
$('#zawartoscTabeli').stop().css('opacity', '0').html($('#formularzZgloszeniowy').html()).animate({
opacity: 1
}, 500);
$("section ul").on('click', 'li', function() {
var id = this.id;
$('#zawartoscTabeli').stop().css('opacity', '0').html($('#ogloszenia div:nth-child(' + id + ')').html()).animate({
opacity: 1
}, 500);
});
$('#kik').click(function() {
alert('dddd');
});
});
</script>
</head>
<body>
<div id="wrapper">
<section>
<ul>
<li id="1" style="font-size: 12px;">CLICK</li>
</ul>
<div id="zawartoscTabeli">
</div>
</section>
<!--formularz zgloszeniowy-->
<div id="formularzZgloszeniowy" style="display: none">
<form id="form1" action="rejestracjaUzytkownika.jsp" method="POST">
<div class="formualrz">
<div class="width20">Preferowane miejsce pracy<sup>*</sup>:</div>
<div class="width20">
<input type="text" name="miejsce_pracy" />
</div>
</div>
<div class="formualrz">
<div class="left">Imię i nazwisko<sup>*</sup>:</div>
<div class="right">
<input type="text" name="imie_nazwisko" />
</div>
</div>
<BR/>
<BR/>
</form>
</div>
<!--formularz zgloszeniowy-->
<div id="ogloszenia" style="display: none">
<div>
<p class="bold">Opis stanowiska:</p>
<ul>
<li>123</li>
<li>1234</li>
<li>326236</li>
</ul>
<button id="kik">BACK</button>
</div>
</div>
</div>
</body>
</html>
Link to demo
As you're updating the html of element, the events are unbinded. Use event delegation:
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$('#zawartoscTabeli').on('click', '#kik', function () {
alert('Łot de fack');
});
Demo: http://jsfiddle.net/tusharj/95v7fbbe/1/
Docs: http://learn.jquery.com/events/event-delegation/
I have the DOM structure as
<div id="content">
<div id="wrapper">
<input type="text" id="search" />
</div>
</div>
<div class="subContent">
</div>
<div class="subContent">
</div>
I want to select <div class="subContent"> on enter event of input box which is closest to the input box.
$('#search').on('keypress', function(){
$(this).parent().parent().next();
});
Is there a better way to do this ?
$(this).closest('#wrapper').nextAll('.subContent').first()
That way you can change it to use classes
I guess this can help you
$("#search").click(function () {
$(this).closest("div.module").hide();
});
Possible duplicate of
Hiding the closest div with the specified class
Use This:-
<html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="content">
<div id="wrapper">
<input type="text" id="search" />
<div class="subContent" style = 'background-color:red;'>div1</div>
<div class="subContent" style = 'background-color:red;'>div2</div>
<div class="subContent" style = 'background-color:red;'>div3</div>
</div>
</div>
</html>
<script>
$('#search').on('keypress', function(){
$(this).next().css( "background-color", "blue" );
});
</script>
I am trying to add some code to a page that keeps adding <div> sections to a page when a link is clicked. Here's my code:
<script type="text/javascript">
function ShowDiv() {
document.getElementById("show").style.display = "";
}
</script>
<p><a href="#" class="control" onclick="ShowDiv()"; >Add New</a></p>
<div id="show" style="display: none;">
<p>This is the div!</p>
</div>
This works great for one <div> but I need it to keep adding down the page when the link is clicked. I t is going to be used to hold a form with an array of ids for posting to PHP.
You can clone original div (which will be as template) and append cloned one to the page:
Fiddle.
HTML:
<p>
<a id="add" href="#" class="control">Add New</a>
</p>
<div id="show" style="display: none;">
<p>This is the div!</p>
</div>
JS:
$(document).ready(function()
{
var i = 0;
$('#add').click(function()
{
var newEl = $('#show').clone();
newEl.attr('id', "show" + i);
i++;
newEl.show().appendTo("body");
});
});
<script type="text/javascript">
function ShowDiv() {
var a = $("#show").clone(true); // clones element
$(".test").append(a); // appends to parent
}
</script>
<p><a href="#" class="control" onclick="ShowDiv()"; >Add New</a></p>
<div class="test"> <!-- defines parent for simple selection -->
<div id="show"> <!-- element to clone -->
<p>This is the div!</p>
</div>
</div>