I design a popup window to select imgage. this is code in Index.php
<input type="button" value ="Browse" onclick="browse_img()" />
<input type="text" id="img_url" name="img_url" value="selected img"/>
<script type="text/javascript">
function browse_img(){
window.open("img_browse.php","windows2");
}
</script>
This is code in img_browse.php
<img id="img_id_1" src="url/puc1.jpg" onclick="select_img()"/>
<img id="img_id_2" src="url/puc2.jpg" onclick="select_img()"/>
<input type="text" id="img_url" name="img_url" value="selected img"/>
<scrip>
function select_img(){
var file_url=$(this).src;
alert(file_url);
document.getElementById("img_id_2").value=file_url;
}
</scrip>
The aler say "undefined". help me!
And how do i pass img_url from windows2 (img_browse.php) to index.php
You could do something like:
<img id="img_id_1" src="url/puc1.jpg" onclick="select_img(this.src)"/>
And the javascript:
function select_img(src) {
alert(src);
document.getElementById("img_id_2").value=src;
}
Related
I'm trying to use an HTML variable src in JavaScript this way:
<iframe id="myFrame" style="display:none" width="600" height="300"></iframe>
<input type="button" value="PDF 1" id="src"
onclick="openPdf()" src="https://drive.google.com/" />
<input type="button" value="PDF 2" id="src"
onclick="openPdf()" src="https://drive.google.com/" />
<input type="button" value="PDF 3" id="src"
onclick="openPdf()" src="https://drive.google.com/"/>
<script type="text/javascript">
function openPdf() {
var omyFrame = document.getElementById("myFrame");
omyFrame.display = "hidden"; // 1
omyFrame.style.display="block";
omyFrame.src = "https://drive.google.com/"; // 2
}
</script>
I am not sure if this is working. If i press on pdf file 2 then if some other pdf file is alreasdy open, it should close and then "PDF 2" should open. In short, only one pdf file should open at a time and other pdf file should close or hide but all the buttons should be visible.
It is working but I have to repeate the code in every button. I want to change this constant address with a variable and i want to mention the address of pdf file in the buttons as above src=. so that i don't have to repeat the fuction inside every button.
You don't have to read anything from the HTML, if you use JavaScript Function Parameters.
<iframe id="myFrame" style="display:none" width="600" height="300"></iframe>
<input type="button" value="PDF 1" onclick="openPdf('https://example.com/pdf1.pdf')" />
<input type="button" value="PDF 2" onclick="openPdf('https://example.net/pdf2.pdf')" />
<input type="button" value="PDF 3" onclick="openPdf('https://example.com/pdf3.pdf')" />
<script type="text/javascript">
function openPdf(url) {
var omyFrame = document.getElementById("myFrame");
omyFrame.style.display="block";
omyFrame.src = url
}
</script>
You may also want to hide the <iframe> again, if the parameter is not set or is empty:
<iframe id="myFrame" style="display:none" width="600" height="300"></iframe>
<input type="button" value="PDF 1" onclick="openPdf('https://example.com/pdf1.pdf')" />
<input type="button" value="PDF 2" onclick="openPdf('https://example.net/pdf2.pdf')" />
<input type="button" value="PDF 3" onclick="openPdf('https://example.com/pdf3.pdf')" />
<input type="button" value="HIDE 1" onclick="openPdf('')" />
<input type="button" value="HIDE 2" onclick="openPdf()" />
<script type="text/javascript">
function openPdf(url) {
var omyFrame = document.getElementById("myFrame");
if (typeof url !== 'undefined' && url != '') {
omyFrame.style.display="block";
omyFrame.src = url
} else {
omyFrame.style.display="none";
}
}
</script>
You don't even need JavaScript, just use an anchor with myframe specified as target. Obviously, CORS should be enabled, or this wont work.
If you want, you can style the anchor as a button using CSS.
<!DOCTYPE html>
<html>
<body>
Click here
<iframe name="myframe" width=500 height=500></iframe>
</body>
</html>
You can get clicked element with event.target. And to get value of its attribute you can use getAttribute('scr'). So to get your desired value you can use var scr = event.target.getAttribute('scr');.
I have removed id from every input as it was not in any use. Also corrected typo from scr with correct src.
As per suggestion from #tevemadar adding event to onclick="openPdf(event)" instead of using directly in code.
Try it below.
function openPdf(e) {
var src = e.target.getAttribute('src');
console.log(src);
// your code
}
<input type="button" value="PDF File 1" onclick="openPdf(event, this)" src="https://drive.google.com/" /></br>
<input type="button" value="PDF File 2" onclick="openPdf(event)" src="https://google.com/" /></br>
<input type="button" value="PDF File 3" onclick="openPdf(event)" src="https://stack.com/" />
No, unfortunately, you can't put a dynamic variable in it.
You can get the id inside the function to see which button is pressed, and write different src accordingly.
$('#submit-img').on('click', function() {
$('#img').attr('src', $('#url').val());
});
function validate() {
if ($('#img').attr('src') === '../static/img/placeholder.png'){
return false;
}
}
<form method="post" action="/{{ curr_user }}" enctype="multipart/form-data" onSubmit="return validate(this);" >
<div class="imagey">
<img id="img" src="../static/img/placeholder.png" onerror="this.src = '../static/img/placeholder.png'" alt="image" />
</div>
<span class="input-url">
<input type="text" name = "url" id="url" placeholder="http://" maxlength="320"/>
</span>
<input type="submit" id="submit-img" name="op" value="Submit" class="form-submit"/>
</form>
This validation code does not work for me. Any guesses why?
Also, if replace the if statement in the validate function with just alert($('#img').attr('src'))
The alert says Undefined
There's mulitple errors in your code.
First of all this creates an endless loops of 404s in the browser
<img id="img" src="../static/img/placeholder.png" onerror="this.src = '../static/img/placeholder.png'" alt="image" />
Second, it should be $('.submit-img'), not $('#submit-img'), since you've set the class attribute, not the id attribute.
Thirdly, you need to wrap jQuery code into $(document).ready(function() { ... });
After fixing that, the code works for me on jsfiddle
[Edit:]
Ok, probably this is what you are looking for:
$(document).ready(function() {
$('#url').on('keyup', function() {
$('#img').attr('src', $('#url').val());
});
});
When the users enters a URL, the image is shown.
Example on jsfiddle
I have a php function that echos code of a form that has a button. when that button is click it will append a file field and a another button that if clicked would repeat the above. however when the added button is clicked nothing happened.
I am thinking it has something to do with binding the button.
Here is the code:
$formtoreturn = '
<div class="form_holder">
<form action="'.site_url().'xxxxx" method="post" enctype="multipart/form-data" >
<div id="fields_holder">
<span class="form_holder-label" id="fileC">Select image or images</span>
<div class="fields" id="field1">
<input type="file" name="fileID-input[]" id="fileID-input" class="fileC-input">
<a rel="add" id="add_file1" class="add_file" href="javascript:;"><img src="wp-content/plugins/wl_extendor_wishlist/images/add-icon.png"></a>
</div>
</div>
<div class="clear"></div>
<input type="hidden" value="'.$u_id.'" name="user_id" id="user_id">
<input type="submit" name="submittestimonial" value="Submit Testimonial">
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</div>
<script>
var filecount = 1;
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j(\'#fields_holder\').on(\'click\', \'.add_file\', function() {
var toappend = \'<div class="fields" id="field1"><input type="file" name="fileID-input[]" id="fileID-input" class="fileC-input"><a rel="add" id="add_file1" class="add_file" href="javascript:;"><img src="wp-content/plugins/wl_extendor_wishlist/images/add-icon.png"></a></div>\';
if($j(this).attr("rel") == "add"){
$j(this).attr("rel", "ded");
$j("#fields_holder").append(toappend);
filecount++;
}
});
});
</script>
';
echo $formtoreturn;
Hope the code and my question is clear.
Thanks in advanced.
I would suggest you to change your JavaScript code from
$j('#fields_holder').on('click', '.add_file', function() {
// ...
});
to
$j(document).on('click', '#fields_holder .add_file', function() {
// ...
});
Then the event will bubble up and handled in click handler of a document.
UPDATE
Though I've made a test and it's working well for me in both variants.
The idea behind this small project of mine is to have an user enter an URL for an img, when the user hits a button the img should then be inserted into a new <div> within the page.
I tried looking for hours at stackoverflow but I honestly don't understand how I can use other answers to my own code. Most of the CSS and HTML code is already done, I just need help with the javascript part if its possible at all.
Here is what I have so far:
HTML code:
<form name="imgForm">
enter URL:
<input type="text" name="inputbox1" value="src" />
<input type="button" value="Get Feed" onclick="GetFeed()" />
</form>
Javascript code:
<script type="text/javascript">
function GetFeed(imgForm) {
var imgSrc = document.getElementById("src").value;
}
</script>
Can anyone help me out? I dont know where to go from here.. at least give me some pointers how can i get the value from the txt box and add a new
<div><img src="user input from txt box should go here"/></div> for every time an unser inserts and new URL for an img?
I think according to your need how can i get the value from the txt box and add a new <div><img src="user input from txt box should go here"/></div> you need this
HTML
<form>
<input type="text" id="txt">
<input id="btn" type="button" value="Get Image" onclick="getImg();" />
</form>
<div id="images"></div>
JS (goes inside your head tags)
function getImg(){
var url=document.getElementById('txt').value;
var div=document.createElement('div');
var img=document.createElement('img');
img.src=url;
div.appendChild(img);
document.getElementById('images').appendChild(div);
return false;
}
Here is an example.
You should add an id attribute to your <input>:
<input type="text" name="inputbox1" id="box1" value="src" />
...then, adjust your code:
var imgSrc = document.getElementById('box1').value;
Once you have the source, you can get back an object for the img tag, and set its properties using the value from the text box. The img object's properties are defined by the Document Object Model:
http://www.w3schools.com/jsref/dom_obj_image.asp
Something like this will create a div with an image element that has a src equal to the text in the input box. It then appends the div to end of the page.
<html>
<head>
<script type="text/javascript">
function GetFeed(form){
var imgSrc = form.elements["inputbox1"].value;
var imgDiv = document.createElement('div');
imgDiv.innerHTML = "<img src=\"" + imgSrc + "\"/>"
document.body.appendChild(imgDiv);
}
</script>
</head>
<body>
<form name="imgForm">
enter URL:
<input type="text" name="inputbox1" value="src" />
<input type="button" value="Get Feed" onclick="GetFeed(this.form)"/>
</form>
</body>
</html>
your codes better should be like this:
html Codes:
<div class="input-group col-md-5" style="margin: 0px auto;">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-image">
Choose
</button>
</div>
<input type="text" id="image_label" class="form-control" name="image" aria-abel="Image" aria-describedby="button-image" onclick="getImg()">
</div>
<div id="image-holder">
<img id="imgThumb" class="img-thumbnail" src="{{Your Image Source}}" alt="">
</div>
js Codes:
function getImg(){
var url = document.getElementById('image_label').value;
var img = document.getElementById('imgThumb');
img.src = url;
return true;
}
http://img163.imageshack.us/img163/6248/93306989.jpg
the images above show what i want,
i'm using Facebox to do the pop up content,so how can i make the pop up content dynamic?
<script type="text/javascript">
$(function() {
$('.openExample').click(function() {
$.facebox($('#exampleSource').val());
return false;
});
});
</script>
the code above work just fine,but how can edit to reusable???
<form>
<textarea id="exampleSource" class="expand">
<html>
<body>
<h1>Heading</h1>
<p>paragraph.</p>
</body>
</html>
</textarea>
<input type="Submit" value="Submit" class="openExample" />
<input type="reset" value="Reset" />
</form>
Create a function that accepts string or id of the element.
example:
function popWindow(elementID)
{
$('.openExample').click(function() {
$.facebox($(elementID).val());
return false;
});
}
call it like this popWindow('#exampleSource');