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>
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 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>
I am a total noob, so please go easy.
I am trying to replace one image with a second image while hovering on a different element. My problem is that only the first image is being replaced by the link images. I've give each image an ID, I just am not sure how to apply it.
Thank you in advance for any help you can provide!
Here is what I have so far:
Script:
<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("http://www.dxmgp.com/group/images/color_si.jpg", "http://www.dxmgp.com/group/images/bw_si.jpg","http://www.dxmgp.com/group/images/color_dxm.jpg", "http://www.dxmgp.com/group/images/bw_dxm.jpg","http://www.dxmgp.com/group/images/color_tsg.jpg", "http://www.dxmgp.com/group/images/bw_tsg.jpg","http://www.dxmgp.com/group/images/color_image.jpg", "http://www.dxmgp.com/group/images/bw_image.jpg")
</script>
HTML:
<div id="wrap">
<div id="upper">
<div class="u-top">
<img src="http://www.dxmgp.com/group/images/bw_si.jpg" name="targetimage" id="si" border="0" />
<img class="picright" src="http://www.dxmgp.com/group/images/bw_dxm.jpg" name="targetimage" id="dxm" border="0" />
</div>
<div class="u-mid">
<img src="http://www.dxmgp.com/group/images/bw_owners.png" />
</div>
<div class="u-low">
<img class="picleft" src="http://www.dxmgp.com/group/images/bw_tsg.jpg" id="tsg" />
<img class="dxmlogo" src="http://www.dxmgp.com/group/images/logo_dxm.png" />
<img class="picright" src="http://www.dxmgp.com/group/images/bw_image.jpg" id="img" />
</div>
</div>
<div id="lower">
<div class="dots"><img src="http://www.dxmgp.com/group/images/topdots.png"></div>
<div class="logos">
<a href="http://www.thescoutguide.com">
<img class="picll" src="http://www.dxmgp.com/group/images/logo_tsg.png"></a>
<img class="picmid" src="http://www.dxmgp.com/group/images/logo_si.png">
<a href="http://www.imagebydxm.com">
<img class="piclr" src="http://www.dxmgp.com/group/images/logo_image.png"></a>
</div>
<div class="dots"><img src="http://www.dxmgp.com/group/images/lowdots.png"></div>
</div>
</div>
How about something like this? Consider you have a div containing image1.png. When you mouse over a hyperlink, you want to replace image1.png with image2.png. Then, when you move your mouse away from the hyperlink, image2.png will once again be replaced with image1.png:
This is your div containing the image:
<div id="image">
<img src="image1.png" />
</div>
This is the hyperlink:
Mouse over to change image
Here are the JavaScript functions that will replace the inner HTML of the div with different images:
<script type="text/javascript">
function mouseOver() {
document.getElementById("image").innerHTML = '<img src="image2.png" />';
}
function mouseOut() {
document.getElementById("image").innerHTML = '<img src="image1.png" />';
}
</script>
Let me know if this is what you are looking for.
I want to develop a web application where you can specify a question and then provide a choice of multiple answers. I require extra answer 'boxes' to be added when the plus button is clicked, but only added to the specific formRow (see code).
I have tried the JQuery last function but it will always add after the answer box with id=4.
HTML:
<div class="formRow">
<img src="images/icons/color/cross.png" alt="" />
<label>Multiple Choice: </label>
<div class="formRight" style="height:28px;">Question1: <input type="text" class="MCQuestion" QID="'+QID+'" /><img src="images/icons/color/plus.png" alt="" /></div>
<div class="formRight MCAns" id="1">Answer 1: <input type="text" class="MCAnswer"/><img src="images/icons/color/cross.png" alt="" /></div>
<div class="formRight MCAns" id="2">Answer 2: <input type="text" class="MCAnswer"/><img src="images/icons/color/cross.png" alt="" /></div>
<div class="clear"></div>
</div>
<div class="formRow">
<img src="images/icons/color/cross.png" alt="" />
<label>Multiple Choice2: </label>
<div class="formRight" style="height:28px;">Question2: <input type="text" class="MCQuestion" QID="'+QID+'" /><img src="images/icons/color/plus.png" alt="" /></div>
<div class="formRight MCAns" id="3">Answer 1: <input type="text" class="MCAnswer"/><img src="images/icons/color/cross.png" alt="" /></div>
<div class="formRight MCAns" id="4">Answer 2: <input type="text" class="MCAnswer"/><img src="images/icons/color/cross.png" alt="" /></div>
<div class="clear"></div>
</div>
Javascript
$(document).ready(function() {
$("body").on("click", ".AddAns", function(event) {
$(".MCAns").last().after("New Answer Optition"); //Tried this first
$(".MCAns :last-child").after("New Answer Optition"); //Then this
});
});
Use this :
$(document).ready(function() {
$("body").on("click", ".AddAns", function(event) {
$(this).closest('.formRow').find('.MCAns').last().after("New Answer Optition");
});
});
The probleme with your code is that you are selecting every MCAns and take the last one. You should take the last of .formRow add button you clicked.
Use that code:
$(document).ready(function() {
$("body").on("click", ".AddAns", function(event) {
$('.formRow').find('.MCAns').last().after("New Answer Optition");
});
});
Check jsfiddle
You can try to get the container formRow first, then you can add as many tags as you want.
Here is the code:
$(document).ready(function() {
$("body").on("click", ".AddAns", function(event) {
var parent = $(this).parents('.formRow'); // Find the container .formRow first
parent.find('.MCAns:last').after("New Answer Optition"); // Add new content after last one
});
});
how to display some information of image in another div by clicking on image and information should be shown/hidden as clicking on this image.
$(document).ready(function () {
$(".cell").click(function () {
$(this).find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<span style="display:none;"> <img src="Images/sachin.jpg" alt="" width="180" height="180" /></span> <span class="name">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
I want that name displayed in another div when i click on particular image
If I'm understanding correctly, I think what you're asking is for the name to be displayed when you click on its image?
$(document).ready(function () {
$(".inner>img").click(function () {
$(this).parent().find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" alt="" width="180" height="180" />
<span class="name" style="display: none;">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
Take notice of the reformatted html that removes the span around the image (it's not necessary) and the style attributes of your image and name span.
Try:
$(.cell).click(function() {
$(this).toggle("slow");
$(otherDiv).html( $(this).find('span.name').html() );
// other processing ...
});
But this is for your current code, which should be cleaned up a bit. So see below.
You shouldn't need a span to wrap your image. I would try something more along the lines of:
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" data-name="Sachin Tendulkar" alt="" />
<input type="hidden" name="22" class="friend_id" value="22" />
</div>
</div>
Along with:
$('.cell').click(function() {
var img = $(this).find('img');
$(img).toggle('slow');
$(otherDiv).html( $(img).attr('data-name') );
// other processing ...
});