How can I get the textbox which is in a form and that form is in an iframe from javascript?
The simplified code is:
<!-- other code -->
<div id="Login_Panel_Div">
<iframe id="popupLoginScreen" src="login.jsp" name="popupContent">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form id="loginForm" method="post" name="loginForm">
<h2>Login to your account</h2>
<label>Username:</label>
<input id="username" type="text" name="j_username">
<label>Password:</label>
<input id="password" type="password" name="j_password">
<button id="submitLoginBtn" value="Login" name="submitLoginBtn" type="submit">Login</button>
</form>
</body>
</html>
</iframe>
</div>
<!-- other code -->
If I want to get the input with id "txtbox" what should I do?
Thanks and Regards.
As xiao 啸 pointed me, the solution is:
var iframe = document.getElementById('popupLoginScreen');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var usernameTextBox = innerDoc.getElementById('username');
usernameTextBox.focus();
Requesting for thread close.
Thanks.
Related
So just starting coding in html and js, need some help as to why the page isn't redirecting after validation. The page just resets after logging in, and i'm trying to get it to redirect to login.html. Any help please?
DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Task Manager</title>
<link rel="stylesheet" href="style.css">
<script src ="login.js"> </script>
</head>
<body>
<div class="center">
<h1>Task Manager</h1>
<form method="post">
<div class="txt_field">
<input type="text" required name="" id="username">
<span></span>
<label>Username</label>
</div>
<div class="txt_field">
<input type="password" name="" id="password">
<span></span>
<label>Password</label>
</div>
<div class="pass">Forgot Password?</div>
<input type="submit" name="" value="Login" onclick="validate()">
<div class="signup_link">
Not a member? Signup
</div>
</form>
</div>
</body>
</html>
Javascript:
function validate()
{
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if(username=="admin"&& password=="user")
{
alert("login succesfully");
window.location.href = "./todo.html";
return false;
}
else
{
alert("login failed");
return false;
}
}
Your problem is in the java script in the return part so I don't remember exactly how to end the redirect in true
You can change
window.location.href = "./todo.html";
to
window.location = "./todo.html";
Code with bootstrap:
function ValidateForm() {
var fname = document.forms["form1"]["fname"].value;
var requiredValue = "this value is required";
if (fname == "") {
document.getElementById("validation").innerHTML = requiredValue;;
return false;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form action="/action_page.php" onsubmit="return ValidateForm()" method="post">
<fieldset>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<p id="validation"></p>
<input type="text" id="fname" name="fname" placeholder="Enter First Name" data-type="alphanum" />
<button type="submit" class="btn btn-info">Save</button>
</div>
</div>
</div>
</fieldset>
</form>
Code Without Bootstrap:
function ValidateForm() {
var fname = document.forms["form1"]["fname"].value;
var requiredValue = "this value is required";
if (fname == "") {
document.getElementById("validation").innerHTML = requiredValue;
return false;
}
}
<form id="form1" action="" onsubmit="return ValidateForm()" method="post">
<p id="validation"></p>
<input type="text" id="fname" name="fname" placeholder="Enter First Name" />
<button type="submit">Save</button>
</form>
why ValidateForm() does not work in without a bootstrap code? I am simply accessing the validation id but it does not work.But strangely it works in with bootstrap code. i am simply making a script for a user in which this value is required should be displayed. Now it does not make sense to me why it is not working with bootstrap?
NOTE: In my environment all these code work.
As far as I understand your code, these are in separate files. The first form have the following code:
<form action="/action_page.php" onsubmit="return ValidateForm()" method="post">
The second one has this:
<form id="form1" action="" onsubmit="return ValidateForm()" method="post">
Obviously "action_page.php" is not being loaded anymore. Are you loading the script from a different file? Where is this file located and how do you load the actual script on your page?
The following code works as intended, when put in to a single file saved as HTML:
<!DOCTYPE html>
<html lang="en">
<body>
<script>
function ValidateForm(){
var fname = document.forms["form1"]["fname"].value;
var requiredValue = "this value is required";
if(fname == ""){
document.getElementById("validation").innerHTML= requiredValue;
return false;
}
}
</script>
<form id="form1" action="" onsubmit="return ValidateForm()" method="post">
<p id="validation"></p>
<input type="text" id="fname" name="fname" placeholder="Enter First Name"/>
<button type="submit">Save</button>
</form>
</body>
</html>
i'm testing a HTML using a to check what a servlet returned,
to choose which message i'll show. The app runs ok, the servlet returns correctly. The get what the servlet returned and chooses the message. But, the tag shows the message only for a second (like a flash) and erase shortly thereafter. Below you can see my code:
<!DOCTYPE html>
<html lang ="pt-br">
<head>
<title> loginServlet2 </title>
<meta http-equiv = ”Content-Type” content=”text/html; charset=UTF-8”>
<link rel="stylesheet" type="text/css" href="c:/java/html/css/estilo.css"/>
<script>
function oMsg()
{
var wMsg1 = document.getElementById('wMsg').innerHTML;
if (wMsg1 == "Test OK!")
{
document.getElementById('wMsga').innerHTML="Test is OK";
}
else
{
document.getElementById('wMsga').innerHTML="Test is not OK";
}
}
</script>
</head>
<body>
<h2> Login Page2 </h2>
<p>Please enter your username and password</p>
<form method="GET" action="loginServlet2">
<p> Username <input type="text" name="userName" size="50"> </p>
<p> Password <input type="text" name="password" size="20"> </p>
<p> <input type="submit" value="Submit" name="B1" onclick="oMsg()"> </p>
</form>
<p id="wMsg"> Msg1 : <%=request.getAttribute("wMsg")%></p>
<p id="wMsga"> Msg2 : </p>
</body>
</html>
Could you help me, please? Thanks.
I'm not sure if I'm answering what you are looking for, but adding return false to onclick will keep you on the same page:
<input type="submit" value="Submit" name="B1" onclick="oMsg(); return false;">
The onSubmit tag does not seem to be working. I am trying to call the submit() javascript function when the submit button is clicked on the webpage. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="login.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.serializeJSON.min.js"></script>
</head>
<body>
<script type="text/javascript">
function submit() {
.......
}
</script>
<div class="login-container">
<div class="title">Login Form</div>
<div class="form-fields">
<form name="login-form" id="login-form" onSubmit="return submit()">
<input type="text" name="username" id="username" placeholder="Username" required></input>
<input type="password" name="password" id="password" placeholder="Password" required></input>
<input type="submit" value="Log in" id="submit-button"></input>
</form>
</div>
</div>
</body>
There is a naming conflict.
The form has a native built in function which can be seen with
<form id="x" onsubmit="console.log(submit);"><input type="submit"/></form>
When you look at the console you will see
function submit() { [native code] }
So when you call submit() you are calling that native submit function aka document.getElementById("login-form").submit(); and not yours. To get around it, change the name.
Change the function name to something other than submit.
function xSubmit(){
}
and
<form name="login-form" id="login-form" onSubmit="return xSubmit()">
You can not use "submit" as the function name. Submit is a JavaScript keyword. Simply rename your function to something else.
function submitForm() {
console.log('I work now');
}
<form name="login-form" id="login-form" onSubmit="return submitForm()">
It should be a lowercase s.
<form name="login-form" id="login-form" onsubmit="return submit()">
check out http://www.w3schools.com/jsref/event_onsubmit.asp for more info.
EDIT:
Sorry, I did some testing and found out that it was the name submit.
Take a look at this fiddle http://jsfiddle.net/9z95chze/.
You also shouldn't need to say return
I have an iframe in my page and how can i get a the value of t text box in the frame from my parent page on a button click?
here is my code
<div>
<iframe src="test.html" >
<input type=text id="parent_text">
<input type="button">
</div>
here is d test.html
<input type="text" id="frame_text">
thanks
Something like this:
var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var input = innerDoc.getElementById('frame_text');
First you get the the iframe.
Then you get the first valid dom document from inside the iframe.
And finaly get the input box.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function getIframeText() {
var iframe0 = document.getElementById("iframe0");
var iframe0document=iframe0.contentDocument||iframe0.contentWindow.document;
var inputIframe = iframe0document.getElementById("frame_text");
alert(inputIframe.value);
}
</script>
</head>
<body>
<div>
<button onclick="getIframeText()">get iframe text</button>
<iframe id="iframe0" src="test.html" >
<input type=text id="parent_text">
</div>
</body>
</html>
If you have Div/ input as follows in one Iframe
<iframe id="ifrmReportViewer" name="ifrmReportViewer" frameborder="0" width="980"
<div id="EndLetterSequenceNoToShow" runat="server"> 11441551 </div> Or
<input id="txtSequence" type="text" value="10500101" />
<form id="form1" runat="server">
<div style="clear: both; width: 998px; margin: 0 auto;" id="divInnerForm">
Some Text
</div>
</form>
</iframe>
Then you can find the text of those Div using the following code
var iContentBody = $("#ifrmReportViewer").contents().find("body");
var endLetterSequenceNo = iContentBody.find("#EndLetterSequenceNoToShow").text();
var txtSequence = iContentBody.find("#txtSequence").val();
var divInnerFormText = iContentBody.find("#divInnerForm").text();
I hope this will help someone.
$('iframe').contents().find('#mytextbox').val("myvalue");
Here is parent page code (I mean main page call to iframe):
<script>
function frameClick(string){
var name=string;
document.getElementById("parent_text")=name;
}
</script>
<div>
<iframe src="test.html" id="frame1">
<input type=text id="parent_text">
</div>
Here is iframe code(test.html):
<form method="post" action="" id='frm1' >
<input type="text" id="frame_text">
<input type="button" id="btm1" name="hangup" onclick="parent.frameClick(this.form.frame_text.value);" value="submit">
</form>