i have contactus.html which has iframe <iframe name="myframe" id="frame1" src="contact_inputs.php"></iframe> containt only three inputs in contact_inputs.php
and the button submit in contactus.html i want to submit the forms in iframe file contact_inputs.php using the button outside of iframe to submit to php_form.php
contactus.html
<iframe name="myframe" id="frame1" src="contact_inputs.php"></iframe>
<form action="php_form.php" method="post">
<input type="submit" name="DoIt" value="submit">
</form>
contact_inputs.php
<form>
<input type="" name="cn">
<input type="" name="ex">
<input type="" name="cr">
</form>
Here you can try this logic :
function sub(ev) {
ev.preventDefault();
let frame1 = document.getElementById("frame1");
let parser = new DOMParser();
let doc = parser.parseFromString(frame1.innerHTML, "text/html");
let iframeForm = doc.body.querySelector("form");
console.log(iframeForm);
//access value of form input field via name also
console.log(iframeForm.cn.value);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<iframe name="myframe" id="frame1" src="contact_inputs.php">
<form id="iframe1Form">
<input type="" name="cn" value ="HELLO"/>
<input type="" name="ex" />
<input type="" name="cr" />
</form>
</iframe>
<form onsubmit="sub(event)">
<input type="submit" name="DoIt" value="submit" />
</form>
</body>
</html>
Related
I'm trying to make my iframe to auto login.
Here is my code. It's not logging in automatically. Whats the problem with my code?
<form id="login" target="frame" method="post" action="https://172.16.8.187:6060/NCMContainer.cc">
<input type="hidden" name="username" value="user" />
<input type="hidden" name="password" value="pass" />
</form>
<iframe id="frame" name="frame"></iframe>
<script type="text/javascript">
// submit the form into iframe for login into remote site
document.getElementById('login').submit();
// once you're logged in, change the source url (if needed)
var iframe = document.getElementById('frame');
iframe.onload = function() {
if (iframe.src != "https://172.16.8.187:6060/NCMContainer.cc") {
iframe.src = "https://172.16.8.187:6060/NCMContainer.cc";
}
}
Your main HTML should look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><meta charset="utf-8" />
<title>Numpty</title>
</head>
<body>
<iframe src="frame.html"></iframe>
</body>
</html>
then create a new file, frame.html, which can look like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><meta charset="utf-8" />
</head>
<body>
<form id="login" method="post" action="https://172.16.8.187:6060/NCMContainer.cc">
<input type="hidden" name="username" value="user" />
<input type="hidden" name="password" value="pass" />
</form>
<script type="text/javascript">
document.getElementById('login').submit();
</script>
</body>
</html>
Now the iframe will be logged in to https://172.16.8.187:6060/
I have a JSP page with a form. I want to submit and return the input to the JSP page. I can't get it to work.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ejemplo</title>
<script type="text/JavaScript" src="Scripts/jquery-1.9.1.js"></script>
<script>
function enviarDatos() {
form = document.getElementById("datos");
form.datoIntroducido.value = "holaaaaaa";
form.submit();
<%System.out.println(request.getParameter("datoIntroducido"));%>
}
</script>
</head>
<body>
<h3>Ejemplo</h3>
<form name="datos" id="datos" action="mypage" method="post" enctype="multipart/form-data">
Escribe aquí: </br>
<textarea cols=50 rows=10 id="texto"></textarea><br />
<input type="hidden" name="datoIntroducido" id="datoIntroducido"/>
<input type="submit" value="Enviar datos" class="btn-primary" onclick="enviarDatos();"/>
</form>
</div>
</body>
</html>
It prints "null" when executing the first time but it doesnt write anything when pressing the button
I am a learner in phonegap and i have done a simple login page using html, css and Javascript.
I have two edit texts for entering user id and password.
I have not written the onclick function for the button click.
Here is the login.html code:
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady(){
navigator.notification.alert("PhoneGap is working");
}
function validate(){
var name = document.getElementById("usrname").value;
var pwd = document.getElementById("usrpswd").value;
if(name=="aaa" && pwd=="aaa"){
localStorage.name = name;
localStorage.password = pwd;
alert(name);
window.open("display.html");
}else{
alert("Error capturing data");
}
}
function reset(){
document.getElementById("usrname").value = "";
var pwd = document.getElementById("usrpswd").value = "";
}
</script>
<meta name="viewport", initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
</head>
<body onload="onLoad();">
<div data-role="header" data-position="fixed" data-theme="a" data-id="mainHeader"><h3 style="width:480px;">Login</h3></div>
<div class="bg" id="login">
<form name="login" id="formlogin" method="post" action="" accept-charset="utf-8" style="background:color="#cb1f72">
<br/>
<br/>
<br/>
<div class="inputcredentials">
<label>USER NAME:</label>
<input type="text" name="username" id="usrname"/>
<br />
<br/>
<br/>
<label>PASSWORD:</label>
<input type="password" name="password" id="usrpswd" style="margin-left:6px"/>
<br />
<br/>
<br/>
<button class="submit" name="submit" onclick="validate()">Submit</button>
<button class="reset" name="reset" onclick="reset()">Reset</button>
</div>
</form>
</div>
</body>
</html>
When i click on the buttons the data what i have entered in the edit text gets reset.
What is the reason behind this?
It might be that your form is submitting. This will result in a page reload.
Here's a sample form:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form onreset</title>
</head>
<body>
<form onreset="myFunction();">
<input type="text" name="fname">
<input type="text" name="lname">
<button type="reset" value="Reset">Reset</button>
</form>
<script>
function myFunction() {
alert("The form was reset!");
}
</script>
</body>
</html>
When I click the reset button, the form onreset event fires first, i.e. the alert message appears before resetting the form fields. How can it happen after the form fields rest?
I also tried the following to no avail:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form onreset</title>
</head>
<body>
<form>
<input type="text" name="fname">
<input type="text" name="lname">
<button type="reset" value="Reset" onclick="myFunction();">Reset</button>
</form>
<script>
function myFunction() {
alert("The form was reset!");
}
</script>
</body>
</html>
Try it
function myFunction() {
setTimeout(function () {
alert("The form was reset!");}, 100);
}
I'm having a little 'teething' problem here is my code so far
<form name="job_app">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" /> Word of Mouth <br/><br/>
<script language="text/JavaScript">
if (document.job_app.source.GAZ.checked){
document.write='Issue <br/><input type="text" name="issue" /><br/><br/>';
}
else if (document.job_app.source.JCP.checked){
document.write='Ref <br/><input type="text" name="ref" /><br/><br/>';
}
//word of mouth has no additional input so there is no if statement for it
</script>
</form>
what i want this to do is create (or unhide) the issue or ref text box depending on which radio button is selected without creating multiple text boxes.
sorry for any inconvenience if this is a rookie mistake, i have never worked with java before nor a language like it.
This is the working code as of 07:15 26/05/2012 as thanks to Amy McCrobie.
It has undergone some edits since Amy's version (see below) i have moved all scripts above the form to make adding the next few fields easier, added a statement for word of mouth, omitted <head> as that is part of index.php and meta.php while this is for form.php, added a spacer and made the function name more specific.
index.php
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<?php
include './meta.php';
?>
</head>
<?php
/*if(isset($_POST['submit'])){
include './submit.php';
}
else{*/
include './form.php';
//}
?>
</html>
meta.php
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta http-Equiv="Cache-Control" Content="no-cache" />
<meta http-Equiv="Pragma" Content="no-cache" />
<meta http-Equiv="Expires" Content="0" />
<title>job_app</title>
<link rel="StyleSheet" type="text/css" href="./style.css"/>
form.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#issueEl").hide();
$("#refEl").hide();
});
function showHide_source(){
if (document.getElementById('GAZ').checked)
{
document.getElementById('issueEl').style.display = 'block';
document.getElementById('refEl').style.display = 'none';
document.getElementById('src_spEl').style.display = 'none';
}
if (document.getElementById('JCP').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'block';
document.getElementById('src_spEl').style.display = 'none';
}
if (document.getElementById('WOM').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'none';
document.getElementById('src_spEl').style.display = 'block';
}
}
</script>
<form name="job_app" action="" method="post">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" onChange="showHide_source()" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" onChange="showHide_source()" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" onChange="showHide_source()" /> Word of Mouth <br/><br/>
<div class="hideable" id="issueEl">Issue <br/><input type="text" name="issue" /><br/><br/></div>
<div class="hideable" id="refEl">Ref <br/><input type="text" name="ref" /><br/><br/></div>
<div class="hideable" id="src_spEl"></div>
rest of form
<input...
.../>
</form>
style.css
div.hideable{
height: 62px;
}
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#issueEl").hide();
$("#refEl").hide();
});
</script>
<title>Test</title>
</head>
<body>
<form name="job_app" action="" method="post">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" onChange="showHide()" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" onChange="showHide()" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" onChange="showHide()" /> Word of Mouth <br/><br/>
<div id="issueEl">Issue <br/><input type="text" name="issue" /><br/><br/></div>
<div id="refEl">Issue <br/><input type="text" name="ref" /><br/><br/></div>
</form>
<script type="text/javascript">
function showHide(){
if (document.getElementById('GAZ').checked)
{
document.getElementById('issueEl').style.display = 'block';
document.getElementById('refEl').style.display = 'none';
}
if (document.getElementById('JCP').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'block';
}
}
</script>
</body>
</html>
I would suggest jQuery, it's not hard to learn, in fact I find it much easier than basic javascript
also I would go the route of two textboxes that are hidden, and then showing them via jQuery
as it stands now I think if the user checks one radio button and then the other two text boxes will appear
and with jQuery added (which is as easy as including the sript at the top of your page your code would be more like this...
<form name="job_app">
Source?<br/>
<input id="GAZ" type="radio" name="source" value="GAZ" id="GAZ" /> Stonoway Gazette <br/>
<input id="JCP" type="radio" name="source" value="JCP" id="JCP" /> Job Center <br/>
<input id="WOM" type="radio" name="source" value="WOM" id="WOM" /> Word of Mouth <br/><br/>
Issue <br/><input id="issue" type="text" name="issue" /><br/><br/>
Issue <br/><input id="ref" type="text" name="ref" /><br/><br/>
<script language="text/JavaScript">
$("#issue").css("display","none");
$("#ref").css("display","none");
if ($("#GAZ").checked){
$("#issue").css("display","inline");
$("#ref").css("display","none");
}
if ($("#JCP").checked){
$("#issue").css("display","none");
$("#ref").css("display","inline");
}
//word of mouth has no additional input so there is no if statement for it
</script>
</form>