How to open a URL in the same window in JavaScript? - javascript

I am using this code currently and it works great. I am now wanting it to open the url in the same window instead of in a new window. I've read up on this and tried "_self" and I must be doing something wrong.
This is a sample of the code.
<HTML>
<HEAD>
<TITLE> Radio Window </TITLE>
<script>
function OpenWindow(){
for(i=0;i<document.FormName["RB1"].length;i++){
if(document.FormName["RB1"][i].checked){
window.open(document.FormName["RB1"][i].value);
break;
}
}
}
</script>
</HEAD>
<BODY>
<form name="FormName">
<input type="radio" name="RB1" value="http://www10.brinkster.com/A1ien51" checked>Eric's Webpage<BR>
<input type="radio" name="RB1" value="http://www.javaranch.com">JavaRanch<BR>
<input type="radio" name="RB1" value="http://www.google.com">Google<BR>
<input type="button" value="Open New Window" name="butt" onclick="OpenWindow()">
</form>
</BODY>
</HTML>

Add attribute action='url of page you want to open' in your form tag and it would work.
like change this <form name="FormName"> to <form name="FormName" action='url'>
Also replace your last input with this in the form <input type="submit" value="Submit">

What you want to do is to change the current page location, so you can do so by changing your function like this :
function OpenWindow() {
var inputs = document.forms.FormName["RB1"];
for (var i = 0; i <inputs.length; i++) {
if (inputs[i].checked) {
document.location.assign(inputs[i].value);
return;
}
}
}
See the documentation on MDN: https://developer.mozilla.org/en/docs/Web/API/Location/assign

Related

Javascript to change page title based on input

Based on the similar question found at
Input Box That Changes Page Title:
<!DOCTYPE html>
<html>
<title>Old title</title>
<body>
<h1 id="h1"></h1>
<input type="text" name="name" id="iText" value="start typeing" />
<form onsubmit="myFunction()">
Enter name: <input id ="iText" type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('iText').onkeyup = myFunction;
function myFunction() {
window.parent.document.title = document.getElementById("iText").value;
document.getElementById("h1").innerHTML = document.title;
}
</script>
</body>
</html>
This is working perfectly with the onkeyup event. However, I don't want the flicking but only change page title once when people click the submit. But my code is not working as expected.
Basically what i wanna do is when user writes something to input and submits it, the page title will be changed to the input.

combining data elements from two html forms is not working properly

I am trying to combine data from two HTML forms and then post it as a single form which is working fine except that some elements are not being copied from one form to the other. I have defined the following javascript function to combine form elements:
var form = document.forms['auth_form'];
var issuedata = window.opener.document.getElementById('Create').elements;
for (var i = 0; i < issuedata.length; i++) {
var data = issuedata[i];
alert(data.innerHTML);
if(data.type !== "submit")
form.appendChild(data);
}
Actual files
This is the first form:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var childWindow = null;
function child_open() {
childWindow = window.open('new.html', "_blank",
"resizable=no,width=600, height=280,top=200,left=200");
}
function parent_disable() {
if (childWindow && !childWindow.closed)
childWindow.focus();
}
</script>
</head>
<body onclick="parent_disable();">
<input type="button" value="Create Jira Ticket" onclick="child_open()" />
<form name="auth_form" id="Create" method="post">
<input name="bug_status" value="NEW" type="hidden">
<input name="rep_platform" value="All" type="hidden">
<input name="component" value="AFAS" type="hidden">
<input name="bug_severity" value="Beeper Call" type="hidden"/>
<input type="hidden" name="comment" value="hello hi"><br>
</form>
</body>
</html>
and this is second form:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var count = 0;
function submit_and_close() {
var form = document.forms['auth_form'];
var issuedata = window.opener.document.getElementById('Create').elements;
for (var i = 0; i < issuedata.length; i++) {
var data = issuedata[i];
alert(data.innerHTML);
if(data.type !== "submit")
form.appendChild(data);
}
alert(form.innerHTML);
form.submit();
// close the window after form submission is complete.
var docLoaded = setInterval(function() {
if (document.readyState !== "complete") {
return;
}
clearInterval(docLoaded);
//window.close();
}, 30);
}
</script>
</head>
<body>
<header>
<div id="dialog" title="JIRA Dialog">
<h1>JIRA Credentials</h1>
</div>
</header>
<div>
<form name="auth_form" id="auth_form" method="post">
<label> User Name: </label> <input type="text" name="username"><br>
<label> Password: </label> <input type="password" name="password"><br>
<input type="button" value="Log In" onclick="submit_and_close()">
</form>
</div>
</body>
</html>
For example I am not able to see the following elements being copied over from 'Create' form to 'auth_form' in second html page.
<input name="rep_platform" value="All" type="hidden">
<input name="bug_severity" value="Beeper Call" type="hidden"/>
Even after spending sometime debugging, I am not able to figure out why some elements are being succesfully copied while others not.
.elements returns a live collection of elements. When you append an element from the collection, it gets removed from the collection, so your index i into the collection get out of sync, and therefore every other element gets skipped.
Instead, just append the first element from the collection until the collection is empty. (Just detach the submit button element when it is encountered). Alternatively, loop through the collection from last to first rather than first to last.
(querySelectorAll() works because it returns a static collection, rather than a live one.)
Try changing your second form from ...
var issuedata = window.opener.document.getElementById('Create').elements;
to
var issuedata = window.opener.document.querySelectorAll('input[name]');
... and replace all innerHTML with outerHTML

How do i alert the textbox input to a user

If i had a button and an input field. How would i alert whatever is in the input field to the user, when the button is clicked.
Explain your code please.
Make it as simple as possible.
<input type="text" id="input" />
<button onclick="displayEnteredText()">Display</button>
<script>
function displayEnteredText() {
var inputText = document.getElementById("input"); // get the element with id "input" which is the textField
alert(inputText.value); // show the value of the input in alert message
}
</script>
One possible approach:
<!DOCTYPE html>
<html>
<head></head>
<body>
<input id="name" value="">
<input type="button" value="show me the name" onclick="alert(document.getElementById('name').value)">
</body>
</html>
Another possible approach:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var buttonElement = document.getElementById('button');
buttonElement.addEventListener('click', function() {
alert(document.getElementById('name').value);
});
}
</script>
</head>
<body>
<input id="name" value="">
<input id="button" type="button" value="show me the name">
</body>
</html>
With the second approach you can separate responsabilities, one person can create de html, and another person can focus in create javascript code.
Exists several ways to do this, but with two examples i think is enough in the current context
<body>
<input type="text" name="basicText" id="alertInput">
<button class="alertButton">Click me!</button>
</body>
<script type="text/javascript">
$(".alertButton").click(function(){
var value = $("#alertInput").val();
alert(value + " was entered");
});
</script>
In order to show what you typed in your alert, you need to reference the value inside the textbox. Since jquery is tagged in the post, I used it to get what's in the text box.
You can also try this one
HTML
<input type="button" id="btnclick" style="width:100px" value="Click Me" />
<input type="text" id="txtbox">
JS
$("#btnclick").click(function(){
var txtvalue = $("#txtbox").val();
alert("User enter " + txtvalue);
})
FIDDLE

Changing the text/background color through JavaScript immediately changes back

Trying to change text color and background color of the text according to what I write in the textbox. Seems to work briefly; it shows me the color for a split second, like a quick snap and that's it.
<!DOCTYPE html>
<html>
<head>
<title>Prelab5 Ex1</title>
<style>
</style>
</head>
<body>
<h2>Prelab5 Ex1</h2>
<form method="post">
<input type="text" name="background" id="background"/><input type="submit" value="Background" onclick="changeBack();"/>
<br/>
<input type="text" name="text" id="text"/><input type="submit" onclick="changeText();" value="Text"/>
<br/>
<div id="content">Some text</div>
</form>
<script>
var DivText = document.getElementById("content");
function changeBack(){
var backColor = (document.getElementById("background").value);
DivText.style.backgroundColor= backColor;
}
function changeText(){
var textColor = (document.getElementById("text").value);
DivText.style.color = textColor;
}
</script>
</body>
</html>
Your onclick handlers for your submit buttons don't return false so your form is submitted resetting the page. You could add return false like
var DivText = document.getElementById("content");
function changeBack() {
var backColor = (document.getElementById("background").value);
DivText.style.backgroundColor = backColor;
}
function changeText() {
var textColor = (document.getElementById("text").value);
DivText.style.color = textColor;
}
<!DOCTYPE html>
<html>
<head>
<title>Prelab5 Ex1</title>
</head>
<body>
<h2>Prelab5 Ex1</h2>
<form method="post">
<input type="text" name="background" id="background" />
<input type="submit" value="Background" onclick="changeBack(); return false" />
<br/>
<input type="text" name="text" id="text" />
<input type="submit" onclick="changeText(); return false" value="Text" />
<br/>
<div id="content">Some text</div>
</form>
</body>
</html>
Your "submit" input performs the action on the form, which is currently set to "post". This will post the form to the same page (and cause a refresh).
You can override the default functionality by adding return false; to the ONCLICK attribute on all input type= "submit" elements.
In other words, this:
needs to become this:
<input type="submit" onclick="changeText();" value="Text"/>
but why use input type = submit at all?
You can just as easily use a link or button without the form:
<a href="#" onclick="changeText();"/>Test</a>
or
Click me!
which will do the same thing without needing to override the a forum action :)

How to pass the selected value of radio button using JavaScript from popup window to parent window?

I have made a form , which takes input value from a pop up window input field.
I am success to pass value of input type "text " value from child window to parent window, but I am facing problem to pass radio button value from child window to parent window. Please help me to pass radio button value
parent.html
<html>
<script language="javascript">
function openWindow() {
window.open("target.html","_blank","height=200,width=400, status=yes,toolbar=no,menubar=no,location=no");
}
</script>
<body>
<form >
<input id=text1 type=text>
<input id=text2 type=text>
<input id=text3 type=text>
<input type=button onClick="javascript:openWindow()" value="Open window..">
</form>
</body>
</html>
target.html
<html>
<body>
<script>
function changeParent(){
var userGrade = document.getElementById('grade');
//var radios = document.getElementById("level");
var userLevel= document.getElementById('school');
window.opener.document.getElementById('text1').value=userGrade.value;
var rates = document.getElementById('level');
var radio_value;
for(var i = 0; i < rates.length; i++){
if(rates[i].checked){
radio_value = rates[i].value;
window.opener.document.getElementById('text2').value=radio_value.value;
}
}
window.close();
}
</script>
<form>
<input type="text" id="grade" /><br/>
<INPUT TYPE="radio" id="level" value="level1">level 1
<INPUT TYPE="radio" id="level" value="level2">level 2 <br/>
<br/>
<button onClick="javascript:changeParent()" >Submit</button>
</form>
</body>
</html>
I'm not sure, whether the sending process is correct, but as you can see from the jsFiddle http://jsfiddle.net/bBZFG/ , you are addressing the radio elements incorrectly.Also, the line window.opener.document.getElementById('text2').value=radio_value.value; is incorrect, since in this scope, the radio_value variable already is the value.
use the following code to get value
window.opener.document.getElementById('text2').value=document.form.level.value;
after that
windows.close();

Categories

Resources