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.
Related
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;
}
I'm trying to use javascript (used within another program) to automate the submission of a form with the appropriate textboxes filled in. Using the simple page below, I can successfully fill out the text box using:
javascript:document.getElementsByName('UserIDValue')[0].value = "12345";
but can't seem to get anything to work that will actually submit the form. None of these attempts at solving it work: (By 'work' I mean have the same effect as if I clicked the Log In button.)
document.forms["MFALogInForm"].submit();
document.getElementsByName("LoginButton")[0].submit();
document.getElementById("MFALogInForm").submit();
document.forms[0].submit();
the code for the page I'm working with is below: The link to it is here: https://ppcplus.121fcu.org/Mobile/Features/Auth/MFA/MFALogin.aspx
<html><body>
<form id="MFALogInForm" name="MFALogInForm" method="post" action="MFALogin.aspx?__ufps=981699">
<input type="hidden" name="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" value="">
<script language=javascript><!--
function __doPostBack(target, argument){
var theform = document.MFALogInForm
theform.__EVENTTARGET.value = target
theform.__EVENTARGUMENT.value = argument
theform.submit()
}
// -->
</script>
<img id="RoofImage" src="/Mobile/Images/Current_HandheldDevice/Universal/1Pixel.gif" alt="Private PC" /><br />
<img id="LogoHeader_LogoImage" src="/Mobile/Images/Current_HandheldDevice/Universal/Logo.gif" /><br />
<font size="+1" color="#006D9B"><b>LOGIN</b></font><br>
<font size="-1"><b>USER ID</b></font><br>
<input name="UserIDValue"/><br>
<input name="LoginButton" type="submit" value="Log In"/><input name="ResetButton" type="submit" value="Reset"/><br>
</form></body></html>
document.forms[0].elements["LoginButton"].click();
worked for me.
Alright ive been working on a project and have ran into an issue, I am trying to extract a whole table from a different website, the website changes based on user input, here is my code. The table id on the 173.193.183.122 site is table 4 So basically I need when the person hits Set Vin and it gets loaded into setVin I need the decode vin button to open the 173.193.183.122 website into an iframe (right now its set to to iframe i ) and only display table 4 (its listed as table 4 in index when looking through the other websites source code) I would like to keep all my code in one file like it is now. please help me out I cant figure out after hours and hours of researching.
let me know thanks
<html>
<head>Plate Lookup<head>
<br>
<TITLE>VIN</TITLE>
<BASE HREF="http://example.com/cfx/queryVin">
</HEAD>
<BODY>
<div id="vinDiv"> </div>
<script>
function setVin(){
myVin= document.forms["myform"]["text1"].value
}
function test() {
iframe = document.getElementById('i');
iframe.src = 'http://173.193.183.122/VIN-Decoded/vin/'+myVin;
}
function setPlate(){
plate= document.forms["myform2"]["text2"].value;
}
function setState(){
state= document.forms["myform3"]["text3"].value;
}
function sPlate() {
iframe = document.getElementById('k');
iframe.src = 'http://example.com/cfx/queryVin?Plate=' + plate+'&State=' + state;
}
//-->
enter code here
</script>
<form name="myform">
<input type="text" name="text1" value="Decode Vin">
<input type="button" value="Set Vin" onclick="setVin()">
</form>
<form name="myform2">
<input type="text" name="text2" value="Type license plate here no spaces">
<input type="button" value="Set Plate" onclick="setPlate()">
</form>
<form name="myform3">
<input type="text" name="text3" value="Type your 2 digit State code">
<input type="button" value="Set State" onclick="setState()">
</form>
<a onclick="test()" target="i" onmouseover="test()"></a>
<iframe src="" id="i" name="i" width="700" height="400" ></iframe>
<iframe src="" id="k" name="k" width="500" height="400"></iframe>
<br>
<button type="button" onclick="test()" >Decode Vin!</button> ^
<pre><pre>
<button type="button" onclick="sPlate()" >Decode plate!</button> ->
</body>
</html>
Using iframes to access the DOM, cookies, etc, between different domains is always prevented for security reasons.
Using iframes to access this kind of data when both the host page and the page within the iframe are on the same domain is okay.
I'm looking for some code that will allow me to click a button (Button with value "Next") which will then replace some of the code I have on my page with new code. This is my current code, I need to replace everything after the score counter. Apologies for the sloppy code, I'm pretty new to this.
<body>
<p>Score: <span id="counter">0</span></p><br/>
<p>1) What colour is this?</p><br />
<p><img style= "margin: 0 auto;" src="colour1.png" width="70%"></p><br /><br />
<p><button id="none" onClick="showDiv01()">Almond White</button><br>
<button id="score" onClick="showDiv02(); this.disabled = 'true';">Raspberry Diva</button><br>
<button id="none" onClick="showDiv01()">Melon Sorbet</button><br>
<button id="none" onClick="showDiv01()">Gentle Lavender</button><br></p>
<div id="answer1" style="display:none;" class="wronganswer">✗</div>
<div id="answer2" style="display:none;" class="rightanswer">✓</div>
<p><input type="button" name="next2" value="Next" onClick="showDiv2()" /></p>
</body>
try the below fiddle i am not sure its perfect u want or not but just tried
<body>
<p>Score: <span id="counter">0</span></p><br/>
<div id="div1">
<p>1) What colour is this?</p><br />
<p><img style= "margin: 0 auto;" src="colour1.png" width="70%"></p><br /><br />
<p><button id="none" onClick="showDiv01()">Almond White</button><br>
<button id="score" onClick="showDiv02(); this.disabled = 'true';">Raspberry Diva</button><br>
<button id="none" onClick="showDiv01()">Melon Sorbet</button><br>
<button id="none" onClick="showDiv01()">Gentle Lavender</button><br></p>
</div>
<div id="div2" hidden>
1) What car is this?</p><br />
<p><img style= "margin: 0 auto;" src="colour1.png" width="70%"></p><br /><br />
<p><button id="none" onClick="showDiv01()">abc</button><br>
<button id="score" onClick="showDiv02(); this.disabled = 'true';">def</button><br>
<button id="none" onClick="showDiv01()">rtrt</button><br>
<button id="none" onClick="showDiv01()">xyz</button><br></p>
</div>
<div id="answer1" style="display:none;" class="wronganswer">✗</div>
<div id="answer2" style="display:none;" class="rightanswer">✓</div>
<p><input type="button" id="btn" name="next2" value="Next" onClick="showDiv2()" /></p>
</body>
$('#btn').click( function() {
$("#div1").hide();
$("#div2").show();
});
http://jsfiddle.net/uxyQG/
If you want to replace the text on button click. I checked you button have an onClick="showDiv2()"
So try like this (for an example)
function showDiv2 () {
document.getElementById('counter').innerHTML = ""; //empty the value
}
Here is example fiddle, I have create when you click next the counter will be replaced.
What you want to do here is place all the content you want to replace inside a <div>.
then you will want to give that div an id attribute.
e.g.
<div id="yourID">
HTML CONTENT HERE
</div>
Then in javascript, you would need to create a function that would fire on an onclick event.
Markup:
<input type="button" onclick="changeContent('yourID', '<div>OtherHTML</div>')" value="NEXT" />
when you have these 2 components, you will want to make a script that will execute your function.
<script type="text/javascript">
function changeContent(id, html) {
//Get the element that needs it's contents replaced.
var container = document.getElementById(id);
//insert new HTML onclick.
container.innerHTML = html;
}
</script>
This is a simple example of what you need.
You could externalize this javascript in a seperate file.
If you want to do this, you will need to include the script in the <head> of your html document.
<script type="text/javascript" src="path/to/js.js"></script>
Because this will load before any of the DOM will have been loaded, you will get errors.
To solve this, the new contents of the file will be:
js.js
window.onload = function() {
function changeContent(id, html) {
//Get the element that needs it's contents replaced.
var container = document.getElementById(id);
//insert new HTML onclick.
container.innerHTML = html;
}
}
This should work for you in this scenario.
Hope this helped
‐ Sid
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;
}