I am trying to type a url into a form text input, and onBlur, update the contents of an included iframe with the webpage specified in the url. I can't seem to get it to work and I can't figure out why... :)
Can someone help me ?
Here is the code...
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<script language="javascript" type="text/javascript" >
<!-- hide
function setIframeSource() {
var theSelect = document.getElementById('location');
var theIframe = document.getElementById('myIframe');
var theUrl;
theUrl = document.getElementById("location");
theIframe.src = theUrl;
}
// end hide -->
</script>
</head>
<body><center>
<form id="form1" method="post">
<input type="text" style="width:150px;" name="location2" id="location" onBlur="setIframeSource();">
</form>
<table width="100%" height="100%" border="1">
<tr>
<td width="300"><iframe src="http://www.ibm.com" id="myIframe" width="280" height="300" name="frame1"></iframe></td>
</tr>
</table>
</center>
</body>
</html>
function setIframeSource() {
var theSelect = document.getElementById('location');
var theIframe = document.getElementById('myIframe');
var theUrl;
theUrl = document.getElementById("location");
theIframe.src = theUrl;
}
Perhaps the problem is line 5 above -- it should read:
theUrl = document.getElementById("location").value;
Presently, you're assigning the input element itself to theUrl, which is not a valid value for theIframe.src!
try adding this after you set the iframe's src:
theIframe.contentDocument.location.reload(true);
and, get the value from the input:
document.getElementById('location').value;
Related
I'm attempting to create a page with a simple input form, use that to create the URL required and display the resulting page in a div all in one go. When I sent the user directly to the created URL from clicking submit that worked perfectly, but I can't seem to get it to do anything with the following code:
<head>
<script src="jquery-1.12.0.min.js"></script>
</head>
<form id="theForm">
<input id='subj'/>
<input type='submit'/>
</form>
<script>
var theForm = document.getElementById('theForm');
var theInput = document.getElementById('subj');
var show;
theForm.onsubmit = function(e){
show = "www.someurl.com/" + encodeURIComponent(theInput.value);
return show;
$('#display').load(show);
}
</script>
<div id="display"></div>
I've changed three things and got the code to work:
1. Changed the div to an iFrame
2. Added an "action" attribute to the form and set it to "#" so that the program doesn't exit the webpage upon clicking the form.
3. Removed the "encodeURIComponent" command from the code, because it didn't work with it..
This is my example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="theForm" action="#">
<input id='subj'/>
<input type='submit'/>
</form>
<iframe id="display"></iframe>
<script>
var theForm = document.getElementById('theForm');
var theInput = document.getElementById('subj');
var show;
theForm.onsubmit = function(e){
var show = "http://someUrl.com/" + (theInput.value);
console.log(show);
document.getElementById("display").src= show;
}
</script>
</body>
</html>
Disclaimer: I am not looking for someone to code this for me just some pointers to help me fix this problem :)
I have the following web page that allows me to add fields dynamically to a form. The current page works. What I want to do is figure out how to make the javascript at the bottom of the page more generic. example I want to pass the templet id and the target id to the function without hard coding the templet id and the target id into the script. Here is the code that I have and works just fine.
I want to make the morefields function so that I can reuse. I want to pass to the function the template and the target. example function moreFields ( templete, target). this way I can use the same function without editing over and over in different web pages. if you look in to the moreFields function you will see that it is hard coded for "readroot" and "writeroot" I want to change the function so it will take parameters and do the same thing it is doing now.
<HTML>
<HEAD>
<META NAME="generator" CONTENT=
"HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org">
<TITLE></TITLE>
<STYLE TYPE="text/css">
div.c1 {display: none}
</STYLE>
</HEAD>
<BODY >
<DIV ID="readroot" CLASS="c1">
Variable Name <INPUT NAME="VarName"><BR>
</DIV>
<FORM METHOD="post" ACTION="/cgi-bin/show_params.cgi">
Function Name: <INPUT NAME="CFunction"> <BR>
Function Alias: <INPUT NAME="AFunction"><BR>
<BR>
<SPAN ID="writeroot"></SPAN>
Function return: <INPUT NAME="AFunction"><BR>
<INPUT TYPE="button" ID="AddMoreFields" VALUE="Give me more fields!" ONCLICK= "moreFields()"> <INPUT TYPE="submit" VALUE="Send form">
</FORM>
<SCRIPT >
var counter = 0;
function moreFields() {
counter++;
var newFields = document.getElementById("readroot").cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById("writeroot");
insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload = moreFields()
</SCRIPT>
</BODY>
</HTML>
I need to enforce character count limit in my application. I found some JavaScripts from web but they are not working, Here is my code. I would be very thankful if someone can kindly see the code & correct whats causing problem.
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{ $("#update").keyup(function()
{
var box=$(this).val();
var main = box.length *100;
var value= (main / 140);
var count= 140 - box.length;
if(box.length <= 140)
{
$('#count').html(count);
}
else
{
alert('Character Limit Exceeded!');
return false;
}
});});
</script>
</HEAD>
<BODY>
<textarea id="update" rows="10" cols="3"></textarea>
<div align="left" id="character-count">
<div id="count">140</div>
</div>
</BODY>
</HTML>
You have a space in between http://ajax.googleapis.com/ and ajax
Your code will not handle someone keeping a key pressed (as it will not fire keyup events until you release the key). It will also not handle pasting text with more chars than the allowed number..
Have a look at this plugin http://remysharp.com/2008/06/30/maxlength-plugin/ which handles most cases..
Script of counting characters in a text box/textarea using Javascript
<script type="text/javascript">
var count = "175";
function limiter() {
var tex = document.myform.comment.value;
var len = tex.length;
if(len > count) {
tex = tex.substring(0,count);
document.myform.comment.value =tex;
return false;
}
document.myform.limit.value = count-len;
}
</script>
<body>
<form name="myform" METHOD=POST>
<textarea name=comment wrap=physical rows=3 cols=40 onkeyup=limiter()></textarea><br>
<script type="text/javascript">
document.write("<input type=text name=limit size=4 readonly value="+count+">");
</script>
</form>
</body>
I'm having a problem with this form I'm working on. Whenever I add, or refresh the page, the values are still there. I believe this is because the clone method copies the value attribute from the textBox. Is there any way I can get rid of them when I add another textBox?
<html>
<head>
<title>JQuery Example</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
function removeTextBox()
{
var childCount = $('p').size() //keep track of paragraph childnodes
//this is because there should always be 2 p be tags the user shouldn't remove the first one
if(childCount != 2)
{
var $textBox = $('#textBox')
$textBox.detach()
}
}
function addTextBox()
{
var $textBox = $('#textBox')
var $clonedTextBox = $textBox.clone()
//document.getElementById('textBox').setAttribute('value', "")
$textBox.after($clonedTextBox)
}
</script>
</head>
<body>
<form id =
method="POST"
action="http://cs.harding.edu/gfoust/cgi-bin/show">
<p id= "textBox">
Email:
<input type = "text" name="email" />
<input type ="button" value ="X" onclick = "removeTextBox()"/>
</p>
<p>
Add another email
</p>
<input type="submit" value="submit"/>
</form>
</body>
</html>
The Following addition should work:
var $clonedTextBox = $textBox.clone();
$($clonedTextBox).val('');
I am beginner to html. I have two text boxes say t1 and t2 If t1 is filled with some data then then other text box t2 should be disable. Please let me know hot to do it. Thanks in advance
Based on your simple scenario description, here's an implementation that works cross-browser and without any third-party javascript library:
<html>
<head>
<script type="text/javascript">
window.onload = function(){
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
t1.onchange = function(){
t2.disabled = t1.value.length > 0;
}
}
</script>
</head>
<body>
<form>
t1:<input type="text" id="t1" name="t1" /><br/>
t2:<input type="text" id="t2" name="t2" />
</form>
</body>
</html>
<head>
<script type="text/javascript">
function verify(){
var t1 = document.getElementById ('first');
var t2 = document.getElementById ('second');
if (t1.value != '') {
t2.setAttribute('disabled','disabled');
return true;
}
if (t2.value != '') {
t1.setAttribute('disabled','disabled');
return true;
}
}
</script>
</head>
<body>
...
<input type="text" id="first" onblur="verify()">
<input type="text" id="second" onblur="verify()">
...
</body>
You can't achieve this with plain HTML.
Following the guidelines of progressive enhancement, you should first implement a server side check in whatever form handler you are using to process the submitted data.
Then you can consider adding JavaScript for a client side check. Something along the lines of:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Disabling form controls</title>
</head>
<body>
<form id="myForm" action="http://example.com/">
<div>
<input name="t1">
<input name="t2">
</div>
</form>
<script type="text/javascript">
(function () {
var t1 = document.forms.myForm.elements.t1;
var t2 = document.forms.myForm.elements.t2;
var handler = function handler() {
t2.disabled = (t1.value !== "");
};
t1.onchange = handler;
}());
</script>
</body>
</html>
(Although I would use a library such as YUI or jQuery to add event handlers in a fashion that is better protected from overwriting in a crossbrowser compatible way).
You might want some tutorials on JavaScript and the DOM so that this makes sense.