I have created two frames with two different forms as shown in link below:
http://demo.4page.info/framedemo/main.html (Please view in IE)
Now, when I click on Get Text button, a predefined value should display in the text box above it, and then when I click on the Copy Here button the same value from textbox1 should display in the text box above it.
So my question is how to access that value in second frames form by clicking copy here button?
Below is my code:
<!--main.html-->
<html>
<head>
<frameset cols="50%, 50%">
<frame name="f1" src="left.html" />
<frame name="f2" src="right.html" />
</frameset>
</head>
</html>
This successfully divides page into two frames.
<!--left.html-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/vbscript">
dim msg
msg="Hello"
function func()
document.form1.text1.value=msg
end function
</script>
</head>
<body>
<form name="form1">
<table align="center" cellspacing="5">
<tr><td><input type="text" name="text1" /></td></tr>
<tr><td><input type="button" value="Get Text" onClick="func()" /></td></tr>
<tr><td><input type="reset" name="reset" value="Reset" /></td></tr>
</table>
</form>
</body>
</html>
left.html is working properly and accessing value on button click.
<!--right.html-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/vbscript">
</script>
</head>
<body>
<form name="form2">
<table align="center" cellspacing="5">
<tr><td><input type="text" name="text2" /></td></tr>
<tr><td><input type="button" value="Copy Here!" onClick="??????" /></td></tr>
<tr><td><input type="reset" name="reset" value="Reset" /></td></tr>
</table>
</form>
</body>
</html>
What do I have to put in right.html?
You can access content of other frames via the frames property of the parent object, so something like this should work:
<script type="text/vbscript">
Sub CopyHere
document.form2.text2.value = parent.frames("f1").document.form1.text1.value
End Sub
</script>
...
<form name="form2">
<input type="text" name="text2" /></td></tr>
<input type="button" value="Copy Here!" onClick="CopyHere()" />
</form>
Note that you may need to adjust your browser's security settings for the code to work.
On a more general note I'd recommend using id attributes instead of name attributes, because the latter is deprecated.
Related
When I gave an input(text) in the textfield and the text that i input is appearing in TD and then its always gone.
first_name is the userinput
f1 is the td
function ajax_post(){
var fn = document.getElementById("first_name").value;
var table = $("#f1");
table.text(fn);
}
my submit button
<input name="myBtn" type="submit" value="Submit Data" onClick="ajax_post();">
i'm using <form> </form>
i'm wondering that my script is kinda wrong
function ajax_post(){
var fn = document.getElementById("first_name").value;
var table = document.getElementById("f1");
table.innerText = fn;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form onsubmit="return false;">
<input type="text" id="first_name" />
<input name="myBtn" type="submit" value="Submit Data" onClick="ajax_post();">
</form>
<table>
<tr>
<td id="f1"></td>
</tr>
</table>
</body>
</html>
Sorry I'm not sure how to phrase this properly
Is it possible to do this?:
Example I want to have 4 buttons/divs for the user to click on
Maybe with a form like this?
input value="Yes" name="response"
input value="No" name="response"
input value="Maybe" name="response"
input value="Later" name="response"
If the user clicks "Yes" then it will form submit that data with "Yes" to be stored in the database slot of "response"
So it's like 4 boxes with "Yes" "No" "Maybe" and "Later" which can be click by the user after which will be submitted like a form
Sorry once again as I'm lost as to how to do this(hopefully the solution is simple?)
Thanks in advance!
Hi i have one idea to do this With JQuery
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div>
<input class="btn1" type="button" value="Yes" />
</div>
<div>
<input class="btn1" type="button" value="No"/>
</div>
<div>
<input class="btn1" type="button" value="Maybe"/>
</div>
<div>
<input class="btn1" type="button" value="Later"/>
</div>
<div id="display">
</div>
<script>
$(document).ready(function() {
$('.btn1').click(function(e) {
e.preventDefault();
document.getElementById('display').innerHTML=$(this).val();
});
});
</script>
</body>
</html>
Fiddle link: https://jsfiddle.net/pranavadurai/jbxdbkLk/2/
There are two different ways you could approach this. A form can have multiple submit buttons, via <input type='submit' name='custom_name' .... You could also have a drop down (<select>) that the user selects from the options you present them, and have a separate submit button.
Examples
Multiple Submit Buttons
<form id="my_form" ...>
<!-- actual form contents -->
<input type="submit" name="submit_value" value="Yes" />
<input type="submit" name="submit_value" value="No" />
...
</form>
In this situation, the POST/GET data for submit_value would be set to whatever the user clicked.
Dropdown
<form id="my_form" ...>
<!-- actual form contents -->
<!-- drop down -->
<select name="my_option">
<option value="yes">Yes</option>
<option value="no">No</option>
...
</select>
<!-- normal submit button -->
<input type="submit" value="Submit" />
</form>
In this case, the POST/GET data for this form would be my_option for the choice you were asking about.
i will propose a solution evolving jQuery, HTML and some database
<html>
<head>
<title>Hi folk</title>
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//Here goes your database query
});
$("#btn2").click(function(){
//Here goes your database query
});
$("#btn3").click(function(){
//Here goes your database query
});
$("#btn4").click(function(){
//Here goes your database query
});
});
</script>
</head>
<div>
<div>
<input id="btn1" type="button" value="Yes" />
</div>
<div>
<input id="btn2" type="button" value="No"/>
</div>
<div>
<input id="btn3" type="button" value="Maybe"/>
</div>
<div>
<input id="btn4" type="button" value="Later"/>
</div>
</div>
</html>
I created a form in which you can enter a text
With onSubmit, this text creates a URL
I would like to have this website opened in an iframe on the same page where the form is.
What I've done:
<form onsubmit= "location.href = 'http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&userid=' + score.value + '&ftab=FeedbackAsSeller'; return false; target="eBay";">
<input type="text" name="score" placeholder="Copy Seller ID here"> <input type="submit" value="Enter/Click">
</form>
<iframe name="eBay"src="" width="90%" height="90%"></iframe>
I supposed that the target attribute would do the trick, but I still get redirected to the generated URL. What am I doing wrong? Thanks for any help :)
I have put whole code
<html>
<head>
<title>Please Rate if it helps</title>
<!-- PUT A PATH OF JQUERY LIBRARY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
function onSubmitCallIt() {
$("#eBay").attr("src", 'http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&userid=' + score.value + '&ftab=FeedbackAsSeller');
}
</script>
</head>
<body>
<form>
<input type="text" id="score" name="score" placeholder="Copy Seller ID here">
<input type="button" value="Enter/Click" onclick="onSubmitCallIt();">
</form>
<iframe id="eBay" name="eBay" src="" width="90%" height="90%"></iframe>
</body>
</html>
Rate, If it helps...
function openWin(){
alert("in func");
var frame=document.getElementById("iFrame");
var sellID=document.getElementById("score").value;
var win="http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback2&userid=" + sellID + "&ftab=FeedbackAsSeller";
frame.src=win;
alert("done");
}
<form onsubmit="openWin()">
<input type="text" name="score" id="score" placeholder="Copy Seller ID here"> <input type="submit" value="Enter/Click">
</form>
<iframe name="eBay"id="iFrame" src="" width="90%" height="90%"></iframe>
This is my code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<html>
<script type="text/javascript" src="http://widgets.amung.us/tab.js"></script><script type="text/javascript">WAU_tab('itd362bk84w5', '')</script>
</html><title>EngineersHub Results Portal-It's OU & JNTU Here-Powered by Sparcsis</title>
<head background="hmm.png" id="header">
<center><img src="hmm.png" width="920" height="180"></img></center>
<link rel="stylesheet" href="ress1.css" media="screen" type="text/css" />
<style type="text/css">
.alignCenter{text-align: center;}
.alignLeft{text-align: left;}
.alignRight{text-align: right;}
.alignTopLeft{text-align: left; vertical-align: top;}
.alignBottomLeft{text-align: left; vertical-align: bottom;}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
});//]]>
</script>
</head>
<body>
<body background="hmm.png">
</td></tr></td></br>
<center><table id='mytable' cellspacing='0' border=3 align=center>
<form id="form" action="" method="post" name="result" style="align:center;">
<tr><td><p align="center"><font size="3"><b>JNTUH - B.Tech IV Year II Semester (R07) Advance Supplementary Results - July 2012</b></font></p></td></tr>
<tr><td><p align="center"><b>Last Date for RC/RV : 8th August 2012</b></p></td></tr>
<td><p align="center">Hall Ticket No :</b> <input type="text" name="id" id="id" maxlength="10" autofocus="autofocus" "></p></td>
<tr> <td align="center" colspan="3">
<script type="text/javascript">
(function (d) {
d.getElementById('form').onsubmit = function () {
d.getElementById('submit').style.display = 'block';
d.getElementById('loading2').style.display = 'block';
};
}(document));
</script>
<div id="loading2" style="display:none;"><img src="loading.gif" width="50" height="50" alt="" /></br><font color="black">Processing...All the Best</font> </div>
<input type="submit" id="submit" class='btnExample' value="Click here to get your Result"> </td></tr>
</form></br>
</table></center>
<script>
$("#id").keyup(function(){
if($(this).val().length == 10)
$('#form :submit').click();
})
</script>
</body>
</html>
In this form user will enter 10 numbers or characters then he clicks on submit to get the result,
But i want to make user to get result when he enter the 10th character or number with out clicking on submit
Please help me
AFTER EDITING
This is my Entire code... if i remove table it is working but with this code it is not working please help me
Sounds like a job for jQuery. With it is as simple as this:
$(document).ready(function() {
$("#id").keyup(function() {
if ($(this).val().length >= 10) {
$("#form").submit();
}
});
};
Of course you might want to fire an ajax request instead of submitting,
but that's up to you ...
I think that the use of JavaScript (with jQuery) will solve this one. If you attach a Javascript key press event handler to the tag and use this to count the number of characters entered. When the count reaches 10 then you can submit the form again using JavaScript.
Good luck with this.
write a callback on keyup on input, check if value has length 10, submit the form..
<form id="form" action="#" method="post" name="result" style="align:center;">
<td>
<p align="center">Hall Ticket No :</p>
<input type="text" name="id" id="input_field" maxlength="10" autofocus="autofocus" />
</td>
<td>
<input type="submit" id="submit" class='btnExample' value="Click here to get your Result">
</td>
</form>
<script>
$("#input_field").keyup(function(){
if($(this).val().length == 10)
$('#form :submit').click();
})
</script>
Working Example
This question already has answers here:
Back and forward buttons in an iframe
(5 answers)
Closed 9 years ago.
Thanks for viewing my question. So, I have a question with iframes. I want an iframe that is almost like an actual browser. I need to make it have atleast a forward button, a back button, and a URL loader. I have accomplished this but it is not working well.
My Code:
<html>
<head>
<title> iFrame </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('.frmSubmit').click(function(e)
{
$('#myIframe').attr('src', $('.frmUrlVal').attr('value'));
e.preventDefault();
});
});
</script>
</head>
<body>
<form>
<input type="text" value="http://"class="frmUrlVal">
<input type="submit" class="frmSubmit" value="Go">
<input type="button" VALUE="< < Back " onClick="myIframe.history.back()">
<input type="button" VALUE="Forward > >" onClick="myIframe.history.forward()">
</form>
<iframe align="center" width="50%" height="50%" src="http://gravitate.webs.com" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
<form>
A reload/cancel button would also be preffered. Maybe even a statusbar. Thanks!!
<html>
<head>
<title> iFrame </title>
<script language="javascript">
function LoadPage(){
var objFrame=document.getElementById("myIframe");
objFrame.src=document.getElementById("URL").value;
}
</script>
</head>
<body>
<div style="Clear:both;">
<input type="text" value="http://amazon.co.uk" class="frmUrlVal" ID="URL">
<input type="submit" class="frmSubmit" value="Go" onclick="LoadPage()">
<input type="button" VALUE="< < Back " onClick="myIframe.history.back()">
<input type="button" VALUE="Forward > >" onClick="myIframe.history.forward()">
</div>
<iframe align="center" width="100%" height="90%" src="http://amazon.co.uk" frameborder=yes scrolling="yes" name="myIframe" id="myIframe"> </iframe>
</body>
</html>