onclick function with iframes - javascript

i have this in left frame and i want the result in other frame and i tried a lot but nothing work for me , any help with that?
<script type="text/javascript">
function goToPage() {
var page = document.getElementById('datepicker').value;
window.location = "http://example.com";
}
</script>
<p><b><font color="#FF0000" size="4">Date:</font></b>
<input type="text" id="datepicker" size="20" name="datepicker" value="Date Field" maxlength="8"><input type="submit" value="submit" onclick="goToPage();" /></a></p>

You need a reference to the iframe where you want to load the url.
Assuming your target iframe id is 'targetIframe' and that jQuery is loaded on all iframes, you could do this from another iframe:
var iframe = window.top.$('#targetIframe');
iframe.attr('src', url);
You could also do:
iframe.contentWindow.location = url;

Related

Input text value into a div?

Say I have this text box:
<input type="text" id="myText" placeholder="Enter Name Here">
Upon pressing a button, I would like to send the value entered into this div:
<div id="text2"></div>
I'm not entirely sure how to do this. Do I create a function and call it to the div? How would I do that?
Could someone clear this up for me? Thanks.
Add an onclick to your button:
<input type="button" id="somebutton" onclick="addText()">
Then write the javascript:
function addText()
{
document.getElementById('text2').innerHTML = document.getElementById('myText').value;
}
Solution using onclick event:
<input type="text" id="myText" placeholder="Enter Name Here">
<div id="text2"></div>
<button id="copyName" onclick="document.querySelector('#text2').innerHTML = document.querySelector('#myText').value" value="Copy Name"></button>
JSFiddle: http://jsfiddle.net/3kjqfh6x/1/
You can manipulate the content inside the div from javascript code. Your button should trigger a function (using the onclick event), which would access the specific div within the DOM (using the getElementById function) and change its contents.
Basically, you'd want to do the following:
<!DOCTYPE html>
<html>
<script>
function changeContent() {
document.getElementById("myDiv").innerHTML = "Hi there!";
}
</script>
<body>
<div id="myDiv"></div>
<button type="button" onclick="changeContent()">click me</button>
</body>
</html>
Mark D,
You need to include javascript to handle the button click, and in the function that the button calls, you should send the value into the div. You can call $("#myText").val() to get the text of the text box, and $("#txtDiv").text(txtToAppend) to append it to the div. Please look at the following code snippet for an example.
function submitTxt() {
$("#txtDiv").text($("#myText").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myText" placeholder="Enter Name Here">
<button onclick = "submitTxt()"> Submit </button>
<div id="txtDiv"> </div>
HTML could be:
<input type='text' id='myText' placeholder='Enter Name Here' />
<input type='button' id='btn' value='click here' />
<div id='text2'></div>
JavaScript should be external:
//<![CDATA[
var pre = onload; // previous onload? - window can only have one onload property using this style of Event delegation
onload = function(){
if(pre)pre();
var doc = document, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
var text2 = E('text2'); // example of Element stored in variable
E('btn').onclick = function(){
text2.innerHTML = E('myText').value;
}
}
//]]>
I would recommend using a library like jQuery to do this. It would simplify the event handling and dom manipulation. None the less, I will include vanilla JS and jQuery examples.
Assuming the HTML in the body looks like this:
<form>
<input id="myText" type="text" placeholder="Enter Name Here">
<br>
<input type="submit" id="myButton">
</form>
<div id="text2"></div>
The Vanilla JS example:
//Get reference to button
var myButton = document.getElementById('myButton');
//listen for click event and handle click with callback
myButton.addEventListener('click', function(e){
e.preventDefault(); //stop page request
//grab div and input reference
var myText = document.getElementById("myText");
var myDiv = document.getElementById("text2");
//set div with input text
myDiv.innerHTML = myText.value;
});
When possible avoid using inline onclick property, this can make your code more manageable in the long run.
This is the jQuery Version:
//Handles button click
$('#myButton').click(function(e){
e.preventDefault(); //stop page request
var myText = $('#myText').val(); //gets input value
$('#text2').html(myText); //sets div to input value
});
The jQuery example assumes that you have/are adding the library in a script tag.

target="_blank" in form javascript

but it shows in the main window. Is there any way to open in a new window when click submit button?
<script type="text/javascript">
function search_navigate() {
var obj = document.getElementById("navbar_search");
var keyword = obj.value;
var dst = "http://smite.guru/stats/" + keyword;
window.location = dst;
}
</script>
<span id="navbar_form">
<input type="search" placeholder="Search Articles..." id="navbar_search" />
<input type="button" id="navbar_submit" value="Submit" onClick="search_navigate()" />
</span>
Use window.open() instead of window.location Details
Loads a resource into either a new browsing context (such as a window)
or one that already exists, depending on the specified parameters.
window.open(dst);
DEMO
Try this
function search_navigate() {
var obj = document.getElementById("navbar_search");
var keyword = obj.value;
var dst = "http://smite.guru/stats/" + keyword;
window.open(dst);
}
<span id="navbar_form">
<input type="search" placeholder="Search Articles..." id="navbar_search" />
<input type="button" id="navbar_submit" value="Submit" onClick="search_navigate()" />
</span>
window.open(dst)
this will be the best option to open a link in a new window.
window.open(dst,"_blank"); which opens it in a new window

HTML form input direct to URL

How do I direct the browser to another URL based on user input for example:
abc.com/apple.html
abc.com/banana.html
abc.com/pear.html
BUT, if the user doesn't enter apple,banana or pear then they are directed to:
abc.com/wrong.html
Any help would be awesome! I only know HTML forms.
<form id='formName' name='formName' onsubmit='redirect();return false;'>
<input type='text' id='userInput' name='userInput' value=''>
<input type='submit' name='submit' value='Submit'>
</form>
<script type='text/javascript'>
function redirect() {
var input = document.getElementById('userInput').value;
switch(input) {
case 'apple':
window.location.replace('apple.html');
break;
case 'banana':
window.location.replace('banana.html');
break;
default:
window.location.replace('default.html');
break;
}
}
</script>
You may use Javascript/JQuery to do it like this:
HTML:
<form name="form_input" action="post_values.php" method="post">
<input type="text" name="fruit" id="fruit" />
<input type="submit" value="Submit" />
</form>
JS/JQuery:
<script>
$("form").submit(function() {
var fruit = $("#fruit").val();
if(fruit=='apple' || fruit=='pear' || fruit=='banana'){
window.location = "http://www.abc.com/"+fruit+".html";
}else{
window.location = "http://www.abc.com/wrong.html";
}
return true;
});
</script>
In the HTML file of "abc.com", which is mostly index.html, between your <HEAD> tags do this:
<meta HTTP-EQUIV="REFRESH" content="0; url=http://www.abc.com/wrong.html">
Adjust content= to how many seconds you want your browser to wait before redirecting.
Update:
The http method is not recommended by W3C because of this:
If a page redirects too quickly (less than 2-3 seconds), using the "Back" button on the next page may cause some browsers to move back to the redirecting page, whereupon the redirect will occur again. This is bad for usability, as this may cause a reader to be "stuck" on the last website.
Hence the recommended method via JS:
<head>
<script>
function replaceDoc()
{
window.location.replace("http://www.abc.com/wrong.html")
}
</script>
</head>
I found the above method here:
W3Schools Window.Replace()
<script language="JavaScript">
var page = new Array("apple","banana","pear"); // list of your pages
function redirect(){
if(page.indexOf(document.forms["NameOfForm"]["NameOfInput"].value)!=-1){
window.location = document.forms["NameOfForm"]["NameOfInput"].value + ".html";
}
else {
window.location = "wrong.html";
}
return false;
}
</script>
<form name="NameOfForm" onsubmit="return redirect()">
<input name="NameOfInput" />
<input type="submit" />
</form>
put that code into abc.com/ and you just have to add, change the list of page ;)

Need JQuery to stop repeating for every button thats clicked

The basics of the functions work, but for every cancel button thats clicked, the next button will add that number of clicks to it. For example if a user clicks a cancel button once, then next time a different button with a different id is clicked, firebug shows the page that contains the form (page2) to load that many times, instead of once. This all generated dynamically, so there may be up to 10 of these div's on the parent page. What should happen is:
user clicks the readonly textbox on the parent page
onfocus empties that div from parent page and loads the child page
3.form from the child page is in the readonly's textbox space now
user either submits a comment or cancels
either action should put the readonly textbox back in the page
(up to this point, this all works)
when pressing another div to leave a comment that page should only load once, not as many times from clicking the previous buttons.
In the 1st page I have:
<head>
<script type="text/javascript">
$(document).ready(function(){
var ajaxInProgress = false;
$(function(){
if (ajaxInProgress) return;
$('.ce').focus(function(){
var cid = this.id;
$('#comfield'+cid).empty();
$('#comfield'+cid).load('content_comment.php?id=<%=intmemberid%>&cid=' + cid);
});
});
</script>
</head>
<body>
<div id="comform"
<div id="comfield2">
<input class="ce" id="2" type="text" value="Write a comment..." readonly="readonly" />
</div>
</div>
<div id="comdata2"></div>
<div id="comform"
<div id="comfield3">
<input class="ce" id="3" type="text" value="Write a comment..." readonly="readonly" />
</div>
</div>
<div id="comdata3"></div>
</body>
In page 2 I have
<script type="text/javascript">
$(document).ready(function() {
document.commentform2.comment.focus();
$("#cancelcomment2").click(function(){
$('#comfield2').empty();
$('#comfield2').html('<input class="ce" id="2" type="text" value="Write a comment..." readonly="readonly" />');
var ajaxInProgress = false;
$(function(){
$('.ce').focus(function(){
if (ajaxInProgress) return;
var cid = this.id;
$('#comfield'+cid).empty();
$('#comfield'+cid).load('content_comment.php?id=55&cid=' + cid);
});
});
});
$("#submitcomment").click(function(){
$('#formcomment').ajaxForm(function (data, textStatus){
$('#formcomment').clearForm();
$('#comfield2').empty();
$('#comfield2').html('<input class="ce" id="2" type="text" value="Write a comment..." readonly="readonly" />');
$('#comdata2').append(data).fadeIn(700);
var ajaxInProgress = false;
$(function(){
if (ajaxInProgress) return;
$('.ce').focus(function(){
var cid = this.id;
$('#comfield'+cid).empty();
$('#comfield'+cid).load('content_comment.php?id=55&cid=' + cid);
});
});
});
});
});
</script>
<form id="formcomment">
<textarea id="commenttext2>" name="comment" class="commentarea"></textarea>
<input type="submit" id="submitcomment" value="comment />
<button id="cancelcomment2">Cancel</button>
</form>
This may not be the "best" way to do it, but it will work.
replace all occurences of
$('.ce').focus(function(){
with
$('.ce').unbind("focus").focus(function(){
in both scripts.
The better way would be event delegation, though that will take more changes to the code.

Execute stringByEvaluatingJavaScriptFromString before click event

I am using UIWebView in iPhone and loaded one HTML page from resources.
Following is my HTML page code:
<html>
<head>
<title></title>
<SCRIPT language="JavaScript">
function callme(id)
{
var input = 'input'+id;
document.getElementById(input).value = document.getElementById('code').value;
}
</SCRIPT>
</head>
<body>
<input type=hidden id='code' name='code'>
<a href="#" id="click1" name="click1" onclick='callme(1);'>Click1</a>
<input type="text" id="input1" name="input1">
</br>
<a href="#" id="click2" name="click2" onclick='callme(2);'>Click2</a>
<input type=text id="input2" name="input2">
</br>
<a href="#" id="click3" name="click3" onclick='callme(3);'>Click3</a>
<input type=text id=input3 name=input3>
</body>
</html>
I have inject some Javascript on page using following code:
[webView stringByEvaluatingJavaScriptFromString:#"var field1 = document.getElementById('code'); field1.value='Code010203';"];
What I want is when user click on link first injected script should run and then onclick event's function(callme(1) or 2 or 3) for link(Click1,Click2 or Click3) should execute.
function callme(id)
{
injectedCode();
var input = 'input'+id;
document.getElementById(input).value = document.getElementById('code').value;
}
where injected code is:
[webView stringByEvaluatingJavaScriptFromString:#"var field1; function injectedCode() {field1 = document.getElementById('code'); field1.value='Code010203';}"];
I'm not 100% sure I understand your question.
If you want the click event to run the injected code, would this approach work for you :
(this is the injected code below)
document.querySelector("#click1").onclick = function() {
// do your new stuff here
clickMe(1);
};
You could make this generic with a bit of effort e.g.
document.querySelector("a[id^=click]").onclick = function() {
// do your new stuff here
var clickMeArg = this.id.substring("click".length);
clickMe(parseInt(clickMeArg, 10));
};

Categories