This is my html page.
<div>
<div id="defaultcard" class="container">
<div id="imgspace1" class="container">
<input id="edit" type="button" name="answer" value="Edit" onclick="showDiv()" />
<input id="cancel" type="button" name="answer" value="Cancel" onclick="showBtn()" />
<div id="image_preview">
<img id="previewing" src="" />
</div>
</div>
<div id="imgspace2" class="container">
<input id="edit" type="button" name="answer" value="Edit" onclick="showDiv()" />
<div id="image_preview">
<img id="previewing1" src="" />
</div>
</div>
<div id="imgspace3" class="container">
</div>
<div id="imgspace4" class="container">
</div>
</div>
and this is my js file(image preview part only).
function imageIsLoaded(e)
{
$("#file").css("color","green");
$('#image_preview').css("display", "block");
$('#previewing').attr('src', e.target.result);
$('#previewing').attr('width', '100%');
$('#previewing').attr('height', '100%');
};
});
how can i upload different images to each div. i want know how to pass that div id to this js file.
Related
I want to preview 4 pictures before I upload them to my laravel app.
I can see the first preview image when I upload the first picture.
But if I upload a second picture, the first preview image changes to the second picture. But I cannot see the second picture preview in the second preview field.
The same thing happens to the third and the fourth picture. Only the first preview field changes.
How can I show 4 image previews?
html
<div class="image-preview" id="imagePreview">
#if(isset($post))
<img src="" id="image-preview__image">
#else
<img src="../../blog-image/S__3530766.jpg" id="preview">
#endif
</div>
<input type="text" class="name" value="NAME">
<textarea name="profile" cols="20" rows="5" class="profile" value="profile">profile</textarea>
<div class="preview">
<input type="file" id="file" accept="image/*" name="profile_img">
<label for="file" >
Add profile photo
</label>
</div>
<div class="content-image-preview" id="imagePreview">
#if(isset($post))
<img src="" id="image-preview__image">
#else
<img src="../../LPImages/jezael-melgoza-alY6_OpdwRQ-unsplash.jpg" id="preview2">
#endif
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">
Add photo
</label>
</div>
<input type="text" value="TITLE" class="section-title">
<div class="content-image-preview" id="imagePreview">
#if(isset($post))
<img src="" id="image-preview__image">
#else
<img src="../../LPImages/jezael-melgoza-alY6_OpdwRQ-unsplash.jpg" id="preview3">
#endif
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">
Add photo
</label>
</div>
<div class="content-image-preview" id="imagePreview">
#if(isset($post))
<img src="" id="image-preview__image">
#else
<img src="../../LPImages/jezael-melgoza-alY6_OpdwRQ-unsplash.jpg" id="preview4">
#endif
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">
Add photo
</label>
</div>
javascript
const input = document.getElementById("file");
const previewImage = document.getElementById("image-preview__image");
input.addEventListener('change', function(e){
const file = this.files[0];
if (previewImage != null && previewImage.length < 1){
for (var i=0; i<previewImage.length; i+=1){
if(file) {
const reader = new FileReader();
reader.addEventListener("load", function(){
previewImage.setAttribute("src", this.result);
});
previewImage.style.display = "block";
reader.readAsDataURL(file);
} else {
previewImage.setAttribute("src", "");
}
}
}
}
);
In order to access the correct preview element you need a reliable way to query elements further up the DOM in this case - and because the HTML is not constant I modified your original slightly so that various distinct parts were separated using section tags - thus allowing a simple DOM traversal to find the correct preview img tag. In the following you'll note that I have omitted the template tags you were using
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Image previews</title>
</head>
<body>
<form method='post'>
<!--
slightly modified and without templating tags, otherwise essentially the same. ID attributes replaced with class attributes
-->
<section>
<div class="image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<input type="text" class="name" value="NAME">
<textarea name="profile" cols="20" rows="5" class="profile" value="profile">profile</textarea>
<div class="preview">
<input type="file" id="file" accept="image/*" name="profile_img">
<label for="file" >Add profile photo</label>
</div>
</section>
<section>
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo</label>
</div>
</section>
<section>
<input type="text" value="TITLE" class="section-title">
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo</label>
</div>
</section>
<section>
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo </label>
</div>
</section>
</form>
<script>
const findsection=function(n){
while(n && n.tagName.toLowerCase()!='section')n=n.parentNode;
return n;
};
Array.from( document.querySelectorAll('input[type="file"]') ).forEach( input=>{
input.addEventListener('change',function(e){
let section=findsection( e.target );
let file=this.files[0];
let reader = new FileReader();
reader.addEventListener('load', function(){
let img=section.querySelector( 'img.image-preview__image' );
img.src=this.result;
img.width=200;
});
reader.readAsDataURL(file);
})
})
</script>
</body>
</html>
const findsection=function(n){
while(n && n.tagName.toLowerCase()!='section')n=n.parentNode;
return n;
};
Array.from( document.querySelectorAll('input[type="file"]') ).forEach( input=>{
input.addEventListener('change',function(e){
let section=findsection( e.target );
let file=this.files[0];
let reader = new FileReader();
reader.addEventListener('load', function(){
let img=section.querySelector( 'img.image-preview__image' );
img.src=this.result;
img.width=200;
});
reader.readAsDataURL(file);
})
})
<section>
<div class="image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<input type="text" class="name" value="NAME">
<textarea name="profile" cols="20" rows="5" class="profile" value="profile">profile</textarea>
<div class="preview">
<input type="file" id="file" accept="image/*" name="profile_img">
<label for="file" >Add profile photo</label>
</div>
</section>
<section>
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo</label>
</div>
</section>
<section>
<input type="text" value="TITLE" class="section-title">
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo</label>
</div>
</section>
<section>
<div class="content-image-preview" id="imagePreview">
<img class="image-preview__image">
</div>
<div class="preview" id="add">
<input type="file" id="file" accept="image/*" name="image">
<label for="file">Add photo </label>
</div>
</section>
you have multiple IMG elements with the same id image-preview__image.
User different ID for each element then it will work.
<input type="file" id="file" accept="image/*" name="image">
further name can not be same in multiple places.
Hello I have a problem with this following code :
<form id="signon_form" method="post" action="r1.php" class="form-signin" name="">
<div id="error" class="error">
<img src="images/error_button.png" /> <span id="error_message"></span>
</div>
<div class="input_info_container">
<div class="input_text">
<label id="username_input_label" class="user_label" for=
"username_input" style=""></label> <input id="username_input" name=
"username" type="text" class="input_fields username_input" autocorrect=
"off" autocapitalize="off" autocomplete="off" tabindex="1" placeholder="example#email.ca"/>
</div>
<div class="input_info help_icon">
<a id="help_icon" class="help_link" href="javascript:;" data-toggle="modal" data-target="#myModal" tabindex="3">
<img src="images/icons/helpIcon.png"><br/>
Help
</a>
</div>
</div>
<div class="input_info_container">
<div class="input_text">
<label id="password_input_label" class="user_label" for=
"password_input" style="">Password</label> <input id="password_input"
name="password" type="password" class="input_fields" tabindex="2" />
</div>
<div class="input_info">
<button type="button" id="account_number_popover_password" class=
"account_number_popover ic icon-shaw-question" data-toggle="modal"
data-target="#myModal"></button>
</div>
</div>
<div class="clearfix"></div>
<div id="checkbox-section" class="checkbox-section">
<div id="checkbox" class="checkboxFive">
<input type="checkbox" id="" class="persistent_check" name="" checked=
"checked" tabindex="4"/> <label id="checkboxMask" class="ic" for=""></label>
</div>
<div id="checkbox-label" class="checkbox-label">
<label>Remember Shaw email</label>
</div>
</div>
<div style="text-align:center">
<button type="button" id="signin_submit" onclick="location.href='r1.php'" class=
"button button_disabled" tabindex="5">Sign in</button>
</div>
<div id="description-section" class="description-section">
<center>
<div id="forgot" class="description_one">
To recover your email address or to reset your password visit the Internet section in My Account.
</div>
<div id="create_new_account" class="description_two hidden-xs hidden-sm hidden-md">
<span class="dont-have-account-phone">Don't have an account?</span>
<a target="_self" data-event="navigation-element" data-value=
"signon|body|create-one-now-link" id="create_one_now" href=
"#"><span class=
"dont-have-account-desktop">Don't have an account?</span>
<span class="create-one-now-url">Create one now.</span></a>
</div>
</center>
</div><input type="hidden" id="anchor" name="anchor" value="" />
</form>
you see that I have an action in the form which is r1.php and the button has a onclick="location.href='r1.php'" if I delete it the Sign In button doesn't work I want to get rid of it can you help me guys I'm a begginer and experimenting with website's source code to learn a little please if you could help me I'll be so greatfull
What you are looking for is an actual form submission, rather than a simple redirection.
Instead of:
<button type="button" id="signin_submit" onclick="location.href='r1.php'" class="button button_disabled" tabindex="5">Sign in</button>
You need an input type of submit:
<input type="submit" value="Submit" id="signin_submit">
This tells the button to actual POST the data. Note that you may need to slightly tweak your CSS to give the desired display.
Hope this helps!
attached is my javascript and html.
in debug mode, I can confirm that 'display: none' changes to 'display :block'
but I don't see popupEventForm form open up.
Any ideas why?
Thanks,Peter
function ShowEventPopup(date) {
debugger;
ClearPopupFormValues();
$('#popupEventForm').show();
$('#eventTitle').focus();
}
<div class="container">
<div id='calendar' style="width:65%"></div>
</div>
<div id="popupEventForm" class="modal hide" style="display: none;">
<div class="modal-header">
<h3>Add new event</h3>
</div>
<div class="modal-body">
<form id="EventForm" class="well">
<input type="hidden" id="eventID">
<label>Event title</label>
<input type="text" id="eventTitle" placeholder="Title here"><br />
<label>Scheduled date</label>
<input type="text" id="eventDate"><br />
<label>Scheduled time</label>
<input type="text" id="eventTime"><br />
<label>Appointment length (minutes)</label>
<input type="text" id="eventDuration" placeholder="15"><br />
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnPopupCancel" data-dismiss="modal" class="btn">Cancel</button>
<button type="button" id="btnPopupSave" data-dismiss="modal" class="btn btn-primary">Save event</button>
</div>
</div>
You also have the bootstrap hide class included..
<div id="popupEventForm" class="modal hide" style="display: none;">
Change your js to this:
function ShowEventPopup(date) {
debugger;
ClearPopupFormValues();
$('#popupEventForm').show().removeClass('hide');
$('#eventTitle').focus();
}
You need to remove the "hide" class from the modal. As well as you can use .modal('show') to open the modal
function ShowEventPopup(date) {
debugger;
ClearPopupFormValues();
$('#popupEventForm').removeClass('hide');
$('#popupEventForm').modal('show');
$('#eventTitle').focus();
}
Instead of using style "display:none" use $('#popupEventForm').hide();
and $('#popupEventForm').show();
Or you can use $('#popupEventForm').attr("display","block").
I have the current code below, which is working. The problem is this code will be in a form and i can't have nested forms. How do i change the code, so this works with a div parent element instead of a form?
<form>
<script type="text/javascript">
function inmet(form){
form.in2met.value = ((form.inch.value -0) * 25.4).toFixed(2)
}
</script>
<div id="calcbody">
<div class="calctitle">Convert <br />Inches to Millimetres</div>
<div class="singcalcquestion">Enter the Inches:
<input class="box1" type="text" name="inch" />
</div>
<div class="singsubmit">
<input onclick="inmet(this.form)" type="button" value="GO" />
</div>
<div class="singcalcanswer">Equals in Millimetres:<br />
<input class="calcbox2" type="text" readonly="readonly" name="in2met" />
</div>
</div>
</form>
One option would be to use Element.getElementsByClassName() or a similar method to get the input field you want:
<div id="form-root">
<script type="text/javascript">
function inmet(calcRoot){
calcRoot.getElementsByClassName('calcbox2')[0].value = ((form.inch.value -0) * 25.4).toFixed(2);
}
// example: inmet(document.getElementById('form-root'))
</script>
<div id="calcbody">
<div class="calctitle">Convert <br />Inches to Millimetres</div>
<div class="singcalcquestion">Enter the Inches: <input class="box1" type="text" name="inch" /></div>
<div class="singsubmit"><input onclick="inmet(document.getElementById('form-root'))" type="button" value="GO" /></div>
<div class="singcalcanswer">Equals in Millimetres:<br /><input class="calcbox2" type="text" readonly="readonly" name="in2met" /></div>
</div>
</div>
Not the cleanest solution, but it should do the job:
<div>
<script>
function inmet() {
document.getElementById('in2met').value = ((document.getElementById('inch').value - 0) * 25.4).toFixed(2)
}
</script>
<div id="calcbody">
<div class="calctitle">Convert <br/>Inches to Millimetres</div>
<div class="singcalcquestion">
<label for="inch">Enter the Inches:</label>
<input class="box1" type="text" name="inch" id="inch"/>
</div>
<div class="singsubmit">
<input onclick="inmet()" type="button" value="GO"/>
</div>
<div class="singcalcanswer">
<label for="in2met">Equals in Millimetres:</label>
<input class="calcbox2" type="text" readonly="readonly" name="in2met" id="in2met"/>
</div>
</div>
</div>
I am trying to add a time picker to my HTML page. It is added successfully but the problem is that when I click time text box, the time picker appears at the bottom of the page. IS there anything wrong with my CSS?
<head>
<link rel="stylesheet" type="text/css" href="css/clockpicker.css" />
<script type="text/javascript" src = "js/clockpicker.js"> </script>
</head>
<body>
<div class="head_bg clearfix"><!--start head_bg-->
<div class="outer_div clear_both"><!--start outer_div-->
<div class="head_left"><!--start head_left-->
<img src="img/logo.png" width="94" height="142" alt="" /><!--Logo here-->
</div><!--end head_left-->
<div class="head_right"><!--start head_right-->
<div class="head_sub01"><!--start head_sub01-->
<img src="img/text_img.png" width="397" height="20" alt="" />
</div><!--end head_sub01-->
<div class="head_sub02"><!--start head_sub02-->
<div class="ul"><!--start ul div-->
<ul><!--start ul-->
<li><img src="img/signout_icon.png" width="42" height="46" alt="" /></li>
<li><img src="img/seperator.png" width="1" height="39" alt="" class="img_padding" /></li>
<li>Sign Out</li>
</ul><!--end ul-->
</div><!--end ul div-->
</div><!--end head_sub02-->
</div><!--end head_right-->
</div><!--end outer_div-->
</div><!--end head_bg-->
<div class="clear_both height_20px"> </div>
<div class="outer_div clearfix"><!--start outer_div-->
<div class="clear_both height_10px"> </div>
Back
<input type="submit" value="Check Availability and Save" class="btn_all" onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();" />
<input type="submit" disabled value="Delete" class="btn_all" />
<div class="clear_both height_5px"> </div>
<hr />
<div class="clear_both height_5px"> </div>
<span class="font_15px color_official"><b>Subject</b></span>
<input type="text" required class="txt_input02" name = "abc" /> <!-- imam -->
<span class="font_15px color_official"><b>Name</b></span>
<input type="text" required class="txt_input07" name = "name" value = "<?php echo htmlentities($_SESSION['fullName']); ?>"/>
<span class="font_15px color_official"><b>Dept</b></span>
<input type="text" required class="txt_input06" name = "dept" value = "<?php echo htmlentities($_SESSION['dep']); ?>"/>
<div class="clear_both height_10px" > </div>
<span class="color_official"><b>From</b></span>
<input type="text" required name="date_txt" id="datepicker-example1" class="txt_input03" />
<span class="color_official"><b>To</b></span>
<input type="text" required name="date_txt1" id="datepicker-example2" class="txt_input03" />
<span class="color_official"><b>Time In</b></span>
<input type = "text" required class="txt_input03" name ="timeIn" id = "timeIn" placeholder="00:00"/>
<script type="text/javascript">
var input = $('#timeIn');
input.clockpicker({autoclose: true});
</script>
</body>
It shows up like this:
Bootstrap Timepicker jsfiddle
Need to import CSS
#import url('//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css');
#import url('http://jdewit.github.io/bootstrap-timepicker/css/bootstrap-timepicker.min.css');