Here is a code to retrieve the value of a TAG which "id" is "token". This TAG is present in the page called "script.php". Javascript is working, but document.write(val) does not display anything...
<!DOCTYPE html>
<html>
<head>
<title>Void</title>
</head>
<body>
<iframe src="script.php" name="myFrame" id="myFrame"></iframe>
<script>
document.write('<br/>');
var doc = document.getElementById('myFrame');
var val = doc.contentWindow.document.getElementById("token").value;
document.write(val);
</script>
</body>
</html>
The page "script.php" contains the following code:
<form id="profile" action="" method="post" enctype="multipart/form-data">
<div>
<label>Username:</label>
<input id="username" type="text" name="username" value="az">
</div>
<br>
<div>
<label>Status:</label>
<input id="status" type="checkbox" name="status" disabled >
</div>
<br>
<input id="token" type="hidden" name="token" value="e4dea0c3a5a6246d98a6573f06ddfc97" />
<button type="submit">Submit</button>
</form>
As long as your iframe's domain is same as yours
var iframe = document.getElementById('myFrame');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
alert(innerDoc.getElementById("token").value);
Several predefined variables in PHP are "superglobals" no matter their scope.For that reason you can access them from almost everywhere in your code.So try to reach them like that: var val = $GLOBALS['name_of your value'];
Related
so here is what trying to get i need only a way to add ( onsubmit="submitted=true") to the form via javascript
and thank you guys
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var submitted=false;
</script>
<iframe name="invisibleFrame" id="invisibleFrame" style="display:none;" onload="if(submitted)
{window.location='Confirmation.html';}">
</iframe>
<form action="https://link.com" method="post" target="invisibleFrame" onsubmit="submitted=true;" id="contact_form" autocomplete="on">
<label for="entry.164" class="phone" >phone</label><br>
<input type="text" name="entry.1647992981" placeholder="phone" required><br>
<label for="entry.1">name</label><br>
<input type="text" name="entry.1" placeholder="name" required><br>
<label for="entry.7">city</label><br>
<input type="text" name="entry.7" placeholder="city" required><br><br>
<button type="submit" class="order-button">submit</button>
</form>
</body>
</html>
actually im not good at all in coding so i just trying to get something done . thank you guys
Use addEventListener() to add a listener that does what you want.
<script>
document.querySelector("form").addEventListener("submit", function() {
submitted = true;
});
</script>
If you just want to make the iframe load the confirmation page when you submit the form, you can do that in the listener instead of setting the variable.
<script>
document.querySelector("form").addEventListener("submit", function() {
let iframe = document.querySelector("#invisibleFrame");
iframe.src = "Confirmation.html";
iframe.style.display = 'block';
});
</script>
Does anyone know how can I resolve the following: I want the form input by the user, to be alerted in a different HTML file.
This is what I wrote so far. It works for the id called 'name', but I dont know why it does not for the 'position'.
"index.html" file:
<script>
function myFunction() {
name = document.getElementById("name").value;
position = document.getElementById("position").value;
window.location.replace("signature.html");
return false;
}
</script>
<form class="formulario" onsubmit="return myFunction()">
Name: <input type="text" name="name" id="name"><br>
Position: <input type="text" name="position" id="position"><br>
<br>
<input type="submit" value="Generate Signature">
</form>
"signature.html" file - notice the alert(name) and the alert(position) => the alert(name) works, but not the alert(position). I want to understand how to fix that please.
<html>
<head>
</head>
<body>
<div class="signature_general">
<div class = "signature_middle">
<div id = "signature_details">
<font size="2px">Regards,</font><br>
<b><font color="#808080" size="3px" id="nameInput">Francisco Jurado</font></b><br>
<font size="2px" id="posInput">Accounting Systems Team Leader</font>
</div>
</div>
</div>
<script>
alert(name);
alert(position);
</script>
</body>
</html>
Thanks very much
Edit: I have noticed that I am getting an error, in which "position" is "undefined". Does anyone knows?
You can change your html file as:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form class="formulario" action="signature.html" method="get">
Name: <input type="text" name="name" id="name"><br>
Position: <input type="text" name="position" id="position"><br>
<br>
<input type="submit" value="Generate Signature">
</form>
</body>
</html>
And your signature.html file as :
<html>
<head>
</head>
<body>
<div class="signature_general">
<div class = "signature_middle">
<div id = "signature_details">
<font size="2px">Regards,</font><br>
<b><font color="#808080" size="3px" id="nameInput">Francisco Jurado</font></b><br>
<font size="2px" id="posInput">Accounting Systems Team Leader</font>
</div>
</div>
</div>
<script>
var values = window.location.search.substring(1).split('&')
var name = values[0].split('=')[1]
var position = values[1].split('=')[1]
alert(name)
alert(position)
</script>
</body>
</html>
That name you are setting in index.html is not the same name you are printing in the alert of signature.html.
You can see this by renaming name to name2 in both places.
If you want to pass those variables from one page to another, I suggest using query strings how to exchange variables between two HTML pages?
I'm new to Javascript. Can I show direct data from an HTML form on the same page. My code is here:
<html>
<head>
<title></title>
</head>
<script>
document.getElementById("btn").onclick = avc;
function avc(){
var a = document.getElementsByName("firstname").value;
document.getElementsByName("abc").innerHTML = a;
}
</script>
<body>
<form method="post">
First name: <input id="fname" type="text" name="firstname"><br>
<input id="btn" type="submit">
</form>
<div name="abc"></div>
</body>
</html>
Using the ID for the element would also work when getting the value.
var a = document.getElementById('fname').value;
Yes you can with
<script>
document.getElementById('abc').innerHTML=document.getElementById('fname').value;
</script>
at the end
if you want that every time you write something in text box changes the value in div abc try this:
<html>
<head></head>
<body>
<form method="post">
First name: <input id="fname" type="text" name="firstname" onKeyUp="f()"><br>
<input id="btn" type="submit">
</form>
<div id="abc"></div>
<script>
function f() {
document.getElementById('abc').innerHTML=document.getElementById('fname').value;
}
f(document.getElementById('fname').value);
</script>
</body>
</html>
Yes, but you need to subscript the correct element like so...
var a = document.getElementsByName("firstname")[0].value;
The iframe is on the same domain, I tried the following code, but none of it worked:
myframe.document.getElementById("myform").submit();
parent.top.frames[0].document.forms[0].submit();
myframe.document.getElementById("myform").submit();
MyIFrame = document.getElementById("myframe");
myIFrame.getElementById("myform").submit();
Update:
This is the HTML:
<html>
<body>
<iframe frameborder="0" scrolling="no" width="530" height="298"
src="/iframe.php" name="myframe" id="myframe">
<p>iframes are not supported by your browser.</p>
</iframe><br />
<form action="/styles.css" method="post" id="form1">
<input type="text" name="input1" value=""/>
<input type="text" name="input2" value=""/>
<input type="button" value="test" onclick="submitFrame()">
<input type="submit" value="submit">
</form>
<script>
function submitFrame(){
var MyIFrame = document.getElementById("myframe");
var MyIFrameDoc = (MyIFrame.contentWindow || MyIFrame.contentDocument);
if (MyIFrameDoc.document) MyIFrameDoc = MyIFrameDoc.document;
MyIFrameDoc.getElementById("myform").submit(); // ## error
}
</script>
</body>
</html>
iframe.php:
<form method="post" class="af-form-wrapper" id="myform" name="myform" action="/" >
<input type="text" name="input1" value="2073809442" />
<input type="text" name="input2" value="1" />
<input type="submit" name="submit" value="submit" />
</form>
Firebug says:
MyIFrameDoc.getElementById("myform").submit is not a function
Try this:
var MyIFrame = document.getElementById("myframe");
var MyIFrameDoc = (MyIFrame.contentWindow || MyIFrame.contentDocument);
if (MyIFrameDoc.document) MyIFrameDoc = MyIFrameDoc.document;
MyIFrameDoc.getElementById("myform").submit();
UPDATE
I can't figure out why this doesn't work, but here is something that does:
MyIFrameDoc.getElementById("mybutton").click();
iframe.php:
<input type="submit" name="submit" value="submit" id="mybutton" />
UPDATE 2
The reason you're getting the submit is not a function error is because you've named your submit button submit, so MyIFrameDoc.getElementById("myform").submit actually references an HTMLInputElement, not the HTMLFormElement.submit() method.
All you need to do is rename your submit button, e.g.:
<input type="submit" name="submit2" value="submit" />
Submit the Iframe's URL from javascript
if (window.parent.$("#IframeId").length > 0) {
window.parent.$("#IframeId")[0].contentDocument.forms[0].submit();
}
You do not need to post into iframe. You can use normal blank "visible" window. Define your form like this:
var request = document.createElement("FORM")
request.id = "request"
request.name = "request"
request.action = "callYour.php"
request.method = "POST"
request.target = "_blank"
and in your php, when you are done just close the window by:
window.close();
within the HTML part, or within embedded script tags. The new window temporarily opens up but closeses itself when it is completed.
i am sure this is quite a numb question to ask and most probably the most basic one. i am just a starter for JS.
i am trying to access the value of input field by document.getElementById and it is returning null to me i am not sure why here is the code.
<html>
<head>
<script type="text/javascript">
var name = document.getElementById("e_name");
alert(name);
</script>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" id="e_name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
</body>
</html>
the following code prints the value null in alert box. what is wrong?
Update :
When i use the following code.
<html>
<head>
</head>
<body>
<form action="" method="post">
<input type="text" name="name" id="name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
<script type="text/javascript">
var name = document.getElementById('name').value;
alert(name);
</script>
</body>
</html>
it prints Enter your Name but if i change the value it does not print the changed value. i would want to perform the following for validation purpose
a) holds the value of e_name in a javascript variable in the head tag
b) so that i should be able to process it for validation.
how do i do it?
Because you're calling that line of script even before document object is ready!
Try this
<body>
<form action="" method="post">
<input type="text" name="name" id="e_name" value="Enter your Name"/>
<input type="submit" name="submit"/>
</form>
<script type="text/javascript">
var name = document.getElementById("e_name").value;
alert(name);
</script>
</body>
Or this in your head tag.
<script type="text/javascript">
window.onload = function() {
var name = document.getElementById("e_name");
alert(name);
}
</script>
The Javascript code is executing before that HTML has loaded. The element with id="e_name" doesn't actually exist in the document yet.
function validate()
{
var nam=name.value;
alert("name"+nam);
}