How to fetch text value from within iFrame - javascript

this my code :
<iframe src="http://www.golanpal.com/ahmad/test.txt" id="iframe" ></iframe>
</br>
<input type="button" value="Start" onclick="get()">
</br>
<input id="textid" type="text">
<script language="JavaScript" type="text/javascript">
function get() {
?????????????
}
</script>
in The text.txt file contains a value of (61.00%)
i want When press the Start button, I want to fetch the value (61.00%), and place it in the textinput (textid)
*Note that the value in the example (61.00%) is variable
Greetings :)

you can try below and make sure you access iframe in same domain
<script language="JavaScript" type="text/javascript">
function getPercent() {
var iframe = document.getElementById('iframe');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var percent = innerDoc.body.textContent.match(/(\d+\.\d+%)/g)
// ["17.00%", "0.00%", "61.00%"]
document.getElementById('textid').value = percent[2];
}
</script>
<iframe src="http://www.golanpal.com/ahmad/test.txt" id="iframe"></iframe>
</br>
<input type="button" value="Start" onclick="getPercent()">
</br>
<input id="textid" type="text">

Here's how to do it with vanilla JS. I've swapped the inline JS for a more modern JS technique.
HTML
<iframe src="http://www.golanpal.com/ahmad/test.txt" id="iframe"></iframe>
<button type="button">Start</button>
<input id="textid" type="text">
JS
// Cache the elements
const iframe = document.querySelector('#iframe');
const button = document.querySelector('button');
const input = document.querySelector('input');
// Add an event listener to the button
button.addEventListener('click', handleClick, false);
function handleClick() {
// Extract the textContent from the iframe content
const { textContent } = iframe.contentWindow.document.body;
// Update the input value
input.value = textContent;
}

Related

How to dynamically change the script src by taking user value from user input?

I'm trying to dynamically change the <script src=oldValue"/> InputValue depends on what user types in input and after submitting page will reload with new <script src=newValue"/>
<input type="text" id="text" />
<input type="button" id="btn" value="Submit" onClick="javascript: window.open('http://www.mywebsite.com/print/' + document.getElementById('text').value);" />
<script src="//script.ashx?company=InputValue" async></script>
The first example changes the src attribute for the script element. The second example is inserting a new script element. I don't know what would work best in your case.
The first example:
document.forms.test.addEventListener('submit', e => {
e.preventDefault();
var new_script = e.target.script.value;
var script_elm = document.scripts.customscript;
script_elm.src = `/script.ashx?company=${new_script}`;
console.log(script_elm);
});
<form name="test">
<input name="script" type="text" />
<button>Add script</button>
</form>
<script name="customscript" async></script>
The second example:
document.forms.test.addEventListener('submit', e => {
e.preventDefault();
var script_elm = document.createElement('script');
script_elm.async = true;
script_elm.innerText = 'function testing(){alert("testing")};';
document.body.append(script_elm);
testing();
});
<form name="test">
<button>Add script</button>
</form>

Why is my button not activating my validation function

I have an html page that access an external javascript file to validate the users input. My button doesnt seem to be doing anything and I dont understand why.
<html lang = "en">
<head>
<title>random</title>
</head>
<body>
<form>
<p>Please enter course information</p>
<input type="text" name="userInput" id="userInput" maxlength="15">
<input type="button" value="validate" onclick="validationFunction()">
<p id = "validationResults"></p>
</body>
</html>
//My external JS file that is supposed to validate the pattern WEB.110#4101_sp-2017
function validationFunction(input) {
var myRegularExpression = /([a-z]{3})(\W\d{3})(\W\d{4})(\W[a-z]{2})(\W\d{4})/gi;
return (myRegularExpression.test(input));
}
if (validationFunction(userInput)){
text = "valid";
} else {
text = "invalid";
}
document.getElementById("validationResults").innerHTML = text;
The below code works for what you want to achieve. Issues I noticed with your code:
Your form element had no closing tag
Rather than adding an onclick to a button within a form, you are better submitting the whole form, and grabbing the event object from an onsubmit event
You need to preventDefault on the event which stops the page refreshing
Your maxLength was set to 15 but your target expression is 20 characters
Your RegEx works, but could be cleaner
<!DOCTYPE html>
<html>
<head>
<title>random</title>
<script src="./script.js" defer></script>
</head>
<body>
<form id="form">
<p>Please enter course information</p>
<input type="text" name="userInput" id="userInput" maxlength="20"/>
<input type="submit"></input>
</form>
<p id="validationResults"></p>
</body>
</html>
const form = document.getElementById("form");
const paragraph = document.getElementById("validationResults");
form.addEventListener('submit', validationFunction);
function validationFunction(event) {
event.preventDefault();
const userInput = event.target.querySelector("#userInput").value;
const regEx = /([a-z]{3}(.\d{3})(#\d{4})(_[a-z]{2})(-\d{4}))/gi;
const isValid = regEx.test(userInput);
if (isValid) {
paragraph.innerHTML = "Valid";
} else {
paragraph.innerHTML = "Invalid";
}
};

JS duplicating the value of the input

How can I write the h1 with whatever I write on the input field?
Something like this:
<input id="inputtxt" type="text" value="Insert text here..">
<h1 id="newtxt"></h1>
<script>
var txtelement
txtelement = document.getElementById("inputtxt").value;
document.getElementById("newtxt").innerHTML=txtelement;
</script>
It duplicates when the page loads but not when I write
You could use .oninput event :
document.getElementById("inputtxt").oninput = function(e){
document.getElementById("newtxt").innerHTML=e.target.value;
};
Note : You could use placeholder instead of value to show default msg to users inside input field.
Hope this helps.
document.getElementById("inputtxt").oninput = function(e){
document.getElementById("newtxt").innerHTML=e.target.value;
};
<input id="inputtxt" type="text" placeholder="Insert text here..">
<h1 id="newtxt"></h1>
You can write a javascript function, then call that function when an event happens like onchange, onclick, etc.
Example:
HTML
<input id="inputtxt" type="text" value="Insert text here.." onkeyup="updateText()" />
<h1 id="newtxt"></h1>
JavaScript
var txtelement
var h1 = document.getElementById("newtxt");
var input = document.getElementById("inputtxt");
function updateText() {
txtelement = input.value;
h1.innerHTML=txtelement;
}
You can see it working in this JS Fiddle: https://jsfiddle.net/igor_9000/e82jahq2/
Hope that helps!
You can add onkeyup event:
var txtelement;
var input = document.getElementById("inputtxt");
var newtxt = document.getElementById("newtxt");
input.onkeyup = function() {
txtelement = input.value;
newtxt.innerHTML=txtelement;
};
input.onkeyup()
<input id="inputtxt" type="text" value="Insert text here..">
<h1 id="newtxt"></h1>

having trouble making my start button convert to stop

This is what i have so far
<script>
var robot = null
}
//**initiates movement
var moveRight = function(){
robot.style.left = parseInt(robot.style.left) + 10 +'px';
}
window.onload =init;
</script>
</head>
</html>
<body>
//initiates buttons convert for movement
<form>
<img id = "ted" src = "Ted.png"/>
<p>Click button to move image to right</p>
<input type = "button" value = "start" onlick = "moveRight"();"/>
</form>
You have a typo, syntax error in this line:
<input type = "button" value = "start" onlick = "moveRight"();"/>
That's invalid JavaScript and the attribute is called "onclick". Try this:
<input type="button" value="start" onclick="moveRight();" />

javascript / jquery: Get the changed content of textarea

I'm new to javascript & jquery. i have a textarea with a preset content. If i change the value on the site by entering "new" and press the "showme" button the alert box does show me the preset value, not the new contend of the textarea.
Why is this? What i have to change to get the new content from my chrome browser?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<form action="javascript:Output()">
<textarea id='area1'>preset</textarea>
<input type="submit" value="showme">
</form>
<script>
function Output() {
var s = $('#area1').html();
alert(s);
}
</script>
You need to use val method
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<form onsubmit="Output()">
<textarea id='area1'>preset</textarea>
<input type="submit" value="showme">
</form>
<script>
function Output() {
var s = $('#area1').val();
alert(s);
}
</script>

Categories

Resources