I'm trying to make a little application that allows me to select between some checkboxes with lang codes and then with a click in a button, open new tabs with the URL with the lang-code changed.
URL FORMAT: https://example.com/en-us/example.html
What i want to change is the en-us. I have several issues here:
I know how to search a string, but there is a way to replace it avoiding a LOT of if statements? Because the web could have en-US code or maybe ko-KR or es-ES and so on.
I want to open a new tab for each checkbox(checked) with the selected lang-code.
So, there is a simple way to do this?
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="info-container">
<p>URL:</p>
<input type="text" id="URL">
<input type="button" id="opentab-button" value="Go!">
</div>
<div class="langcode-container">
<input type="checkbox" name="lang-check" value="ko-kr"> KOR<br>
<input type="checkbox" value="lang-check" value="nl-NL"> NLD<br>
<input type="checkbox" value="lang-check"> PTB<br>
<input type="checkbox" value="lang-check"> PTG<br>
<input type="checkbox" value="lang-check"> CHT<br>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
JavaScript:
document.getElementById("opentab-button").addEventListener("click", openTabs);
function openTabs() {
var str = document.getElementById("URL").value;
var checkQua = $(":checkbox:checked").length;
for (i = 1; i <= checkQua; i++) {
var res = str.replace("en-us", "ko-kr");
window.open(res,'_blank');
}
}
I know how to search a string, but there is a way to replace it avoiding a LOT of if statements? Because the web could have en-US code or maybe ko-KR or es-ES and so on.
Keep the replacement values in the checkboxes' value attributes, as you've already done with your first two <input>s. Then, instead of str.replace("en-us", "ko-kr"), do str.replace("en-us", checkbox.value).
document.getElementById("opentab-button").addEventListener("click", openTabs);
function openTabs() {
var str = document.getElementById("URL").value;
var checkQua = document.querySelectorAll('input[name=lang-check]:checked');
checkQua.forEach(function(checkbox) {
var res = str.replace('en-us', checkbox.value);
console.log('Opening', res);
window.open(res, '_blank');
});
}
<div class="info-container">
<p>URL:</p>
<input type="text" id="URL" value="https://example.com/en-us/example.html">
<input type="button" id="opentab-button" value="Go!">
</div>
<div class="langcode-container">
<input type="checkbox" name="lang-check" value="ko-KR"> KOR<br>
<input type="checkbox" name="lang-check" value="nl-NL"> NLD<br>
<input type="checkbox" name="lang-check" value="pt-BR"> PTB<br>
<input type="checkbox" name="lang-check" value="pt-PT"> PTG<br>
<input type="checkbox" name="lang-check" value="ch-CH"> CHT<br>
</div>
Note that the above doesn't actually open any windows because Stack Overflow has disabled popups in snippets. (Take a look at your console to see the permission errors.)
I think this can help you
$(function(){
$("#opentab-button").on("click", openTabs);
function openTabs() {
var str = document.getElementById("URL").value;
var data = getLocation(str);
// passing by each checkbox
$("[type='checkbox']:checked").each(function(){
var path = data.pathname.split('/');
// Replacing the second item (the language) for the value in the checkbox
path.splice(1,1,$(this).val());
// Replacing the old path of url by the new path
var newPath = data.full.replace(data.pathname,path.join('/'));
//window.open(newPath,'_blank');
alert(newPath);
});
}
function getLocation(url) {
var reURLInformation = new RegExp([
// protocol
'^(https?:)//',
// host (hostname and port)
'(([^:/?#]*)(?::([0-9]+))?)',
// pathname
'(/[^?#]*)',
// search
'(\\?[^#]*|)',
// hash
'(#.*|)$'
].join(''));
var match = url.match(reURLInformation);
return match && {
full: url,
protocol: match[1],
host: match[2],
hostname: match[3],
port: match[4],
pathname: match[5],
search: match[6],
hash: match[7]
}
}
});
<div class="container">
<div class="info-container">
<p>URL:</p>
<input type="text" id="URL">
<input type="button" id="opentab-button" value="Go!">
</div>
<div class="langcode-container">
<input type="checkbox" value="ko-kr"> KOR<br>
<input type="checkbox" value="nl-NL"> NLD<br>
<input type="checkbox" value="lang-check"> PTB<br>
<input type="checkbox" value="lang-check"> PTG<br>
<input type="checkbox" value="lang-check"> CHT<br>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
var str = document.getElementById("URL").value
var res = str.replace(str.split("/")[3],"whateveryouwant")
window.open(res,'_blank');
Related
I have been searching for an answer everywhere but just can not find what I need.
I have a webpage that has an HTML table on the left column and an HTML form on the right column. When I click on a row in the table on the left I want it to display the values in the form on the right.
I have this working perfectly for the text fields on the form, but not for the two checkboxes. My javascript will return either true or false or checked and unchecked to the document.getElementById within the script itself by using alert(); but I have no idea what it needs to allow the checkboxes to display these values. I thought the document.getElementById would return the values but it seems it does not.
I have tried all kinds of conveluted ways to get this to work but can not seem to get the correct code needed.
I am new to all this so there is most likely something really simple I am missing.
This is the HTML form code:
<div class="column right">
<table>
<tr></tr>
<tr>
<div class="lockinv">
<form autocomplete="off" name="lockform" class="keyassign" action="includes/lockinventory.inc.php"
method="post">
<label id="inventory" for="locknum">Lock Number</label>
<input id="invlocknum" type="text" name="locknum" value="" required>
<label id="inventory" for="locktype">Lock Type</label>
<input id="invlocktype" type="text" name="locktype" value="" required>
<label id="inventory" for="keycode">Key Code</label>
<input id="invkeycode" type="text" name="keycode" value="" required>
<label id="inventory" for="lockengraved">Lock Engraved</label>
<input id="invlockengraved" type="hidden" name="lockengraved" value="0">
<input id="invlockengraved" type="checkbox" name="lockengraved" value="1">
<label id="inventory" for="lockmastered">Lock Mastered</label>
<input id="invlockmastered" type="hidden" name="lockmastered" value="0">
<input id="invlockmastered" type="checkbox" name="lockmastered" value="1">
<label id="inventory" for="locknote">Lock Note</label>
<textarea id="inventorynote" name="locknote" rows="5" cols="60"></textarea>
<div class="wheel">
<?php
if (isset($_GET["error"])) {
if($_GET["error"] == "lockexists") {
echo "<p>Lock Already In Inventory!</p>";
}
else if ($_GET["error"] == "lockexistsfailed") {
echo "<p>Lock Already In Inventory!</p>";
}
}
?>
</div>
<input id="bt6" type="submit" name="submit" value="Save">
<button id="bt6" type="reset" name="button">Cancel</button>
</form>
</div>
</tr>
</table>
</div>
This is my JavaScript code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript"></script>
<script>
$(function () {
$('#lockTable td').click(function () {
var currentRow = $(this).closest("tr");
var locknum = currentRow.find("td:eq(0)").text();
var locktype = currentRow.find("td:eq(1)").text();
var keycode = currentRow.find("td:eq(2)").text();
var engraved = currentRow.find("td:eq(3)").find(":checkbox");
var mastered = currentRow.find("td:eq(4)").find(":checkbox");
var locknote = currentRow.find("td:eq(5)").text();
var lockengraved = engraved.prop("checked");
if (lockengraved === true) {
$grved = "checked";
} else {
$grved = "unchecked";
}
var lockmastered = mastered.prop("checked");
if (lockmastered === true) {
$msted = "checked";
} else {
$msted = "unchecked";
}
document.getElementById('invlocknum').value = locknum;
document.getElementById('invlocktype').value = locktype;
document.getElementById('invkeycode').value = keycode;
document.getElementById("invlockengraved").value = $grved;
document.getElementById('invlockmastered').value = $msted;
document.getElementById('inventorynote').value = locknote;
alert(document.getElementById("invlockengraved").value);
alert(document.getElementById("invlockmastered").value);
});
});
</script>
<p id="invlocknum"></p>
<p id="invlocktype"></p>
<p id="invkeycode"></p>
<p id="invlockengraved"></p>
<p id="invlockmastered"></p>
<p id="invlocknote"></p>
<p id="info"></p>
<p id="result"></p>
I found the answer to my issue. I had to modify my if statement in the Javascript to the following. Works the way I want it to. Thanks to all that helped.
var lockengraved = engraved.prop("checked");
if (lockengraved === true) {
document.getElementById("invlockengraved").checked = lockengraved;
}else if (lockengraved === false) {
document.getElementById("invlockengraved").checked = lockengraved;
}
i am very new to web dev and javascript. i am working on a project from a book and building a simple web app that takes orders for coffee. i am using the constraint validation api and i am stuck on that. there is a function that tests the input into the email field against a regular expression and it returns true if the email address has 'authorized email address'. as long as it doesn't match i try to submit the form and i get the expected message '**** is not an authorized email address'. but when it it does match the pattern and the isCompanyEmail function returns true i still get a validity message, just a different one saying 'please match the requested format'. does anyone have any idea what could be causing this? i am including the validation code and form code.
validation code:
(function(window){
'use strict';
var App = window.App || {};
var Validation = {
isCompanyEmail: function(email){
return /.+#bignerdranch\.com$/.test(email);
}
};
App.Validation = Validation;
window.App = App;
})(window);
formhandler code:
(function(window){
'use strict';
var App = window.App || {};
var $ = window.jQuery;
function FormHandler(selector){
if (!selector) {
throw new Error('No selector provided!');
}
this.$formElement = $(selector);
if (this.$formElement.length === 0) {
throw new Error('Could not find element with selector ' + selector);
}
};//end constructor
FormHandler.prototype.addSubmitHandler = function(fn){
console.log('Setting submit handler for form');
this.$formElement.on('submit', function(event){
event.preventDefault();
var data = {};
$(this).serializeArray().forEach(function(item){
data[item.name] = item.value;
console.log(item.name + ' is ' + item.value);
});
console.log(data);
fn(data);
this.reset();
this.elements[0].focus();
});
};
FormHandler.prototype.addInputHandler = function(fn){
console.log('Setting input handler for form');
this.$formElement.on('input', '[name="emailAddress"]', function(event){
var emailAddress = event.target.value;
console.log(fn(emailAddress));
var message = '';
if(fn(emailAddress)){
event.target.setCustomValidity(message);
}else{
message = emailAddress + ' is not an authorized email address!';
event.target.setCustomValidity(message);
}
});
};
App.FormHandler = FormHandler;
window.App = App;
})(window);
and the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>coffeerun</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body class="container">
<header>
<h1>CoffeeRun</h1>
</header>
<section>
<div class="panel panel-default">
<div class="panel-body">
<form data-coffee-order="form">
<div class="form-group">
<label for="coffeeOrder">Coffee Order</label>
<input class="form-control" name="coffee" value="" id="coffeeOrder">
</div>
<div class="form-group">
<label for="emailInput">Email</label>
<input class="form-control" type="email" name="emailAddress" value="" id="emailInput" autofocus required pattern="[a-zA-Z\s]">
</div>
<div class="radio">
<label>
<input type="radio" name="size" value="short">
Short
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="size" value="tall" checked>
Tall
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="size" value="grande">
Grande
</label>
</div>
<div class="form-group">
<label for="flavorShot">Flavor Shot</label>
<select id="flavorShot" class="form-control" name="flavor">
<option value="">None</option>
<option value="caramel">Caramel</option>
<option value="almond">Almond</option>
<option value="mocha">Mocha</option>
</select>
</div>
<div class="form-group">
<label for="strengthLevel">Caffeine Rating</label>
<input id="strengthLevel" type="range" name="strength" value="30">
</div>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h4>Pending Orders:</h4>
<div data-coffee-order="checklist">
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" charset="utf-8"></script>
<script src="scripts/datastore.js" charset="utf-8"></script>
<script src="scripts/validation.js" charset="utf-8"></script>
<script src="scripts/formHandler.js" charset="utf-8"></script>
<script src="scripts/checklist.js" charset="utf-8"></script>
<script src="scripts/truck.js" charset="utf-8"></script>
<script src="scripts/main.js" charset="utf-8"></script>
</body>
</html>
Hello everyone i have faced some problem in case of nested checkbox uses. In my problem i m stuck on to how to use IncludeAll on click checkbox. If checkbox value is true then it's give me a value of that. if IncludeAll checkbox is true then all checkbox will be selected and show the value of all in Array. and if one of the checkbox is false then IncludeAll checkbox false..But in Case the other checkbox will be selected.
This is my Fiddle Link : http://jsfiddle.net/0x4396pu/1/
Here is my Html Code:
<form action="#" ng-controller='MyCtrl'>
<div class="control-group" ng-repeat="story in stories">
<br>
<input type="checkbox" ng-model="story.selectionAll">
<label class="control-label">IncludeAll {{story}}</label>
<div class="controls">
<label class="checkbox inline" ng-repeat="browser in browsers">
<input type="checkbox" value="{{browser}}"
ng-model="selection[story].browsers[browser]"
ng-checked="story.selectionAll">
{{browser}}
</label>
</div>
</div>
</div>
<pre>{{selection | json }}</pre>
</form>
Here is my Controller file :
function MyCtrl($scope) {
$scope.stories = ['1', '2', '3'];
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
$scope.selection = {};
angular.forEach($scope.stories, function(story) {
$scope.selection[story] = {
browsers: {},
};
});
}
Thanks in Advance.
I am answer my own Question. But anyway Here is Answer how to select Checkbox in Nested ng-repeat.i think It's Help you Thanks.
Http Plunkr LInk http://plnkr.co/edit/OQxi53xtVKOgToPhzDUZ?p=preview
Here is Html Code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4
/angular.min.js">
</script>
<script src="script.js"></script>
</head>
<body>
<form action="#" ng-controller='detailContrller'>
<div class="control-group" ng-repeat="story in stories"> <br>
<h4> Enter Data </h4>
Name : <input type="text" data-ng-model="selection[story].Name1"
placeholder="Enter Name"> <br>
Address : <input type="text" data-ng-model="selection[story].Name2"
placeholder="Enter Address"> <br>
City : <input type="text" data-ng-model="selection[story].Name3"
placeholder="Enter City"> <br>
Phone : <input type="text" data-ng-model="selection[story].Name4"
placeholder="Enter Phone "> <br>
State : <input type="text" data-ng-model="selection[story].Name5"
placeholder="Enter State"> <br>
<input type="checkbox" ng-model="selection[story].all"
ng-change="updateAll(story)">
<label class="control-label">IncludeAll {{story}}</label>
<div class="controls">
<label class="checkbox inline" ng-repeat="browser in browsers">
<input type="checkbox" value="{{browser}}"
ng-model="selection[story].browsers[browser]"
ng-change="checkChange(browser)"
> {{browser}}
</label>
</div>
</div>
<button type="button" data-ng-click="save()">Save</button>
<pre>{{selection | json}}</pre>
</form>
</body>
</html>
Here is my Controller
var app = angular.module("myApp",[]);
app.controller('detailContrller', function($scope){
$scope.stories = [];
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
$scope.selection = {};
$scope.details = {};
var checked;
$scope.updateAll = function (story) {
checked = $scope.selection[story].all;
$scope.browsers.forEach(function (browser) {
$scope.selection[story].browsers[browser] = checked;
});
};
for(var i = 0; i< 3; i++) {
$scope.stories.push(i+1);
}
$scope.checkChange = function (browser) {
for(var i =0; i< $scope.stories.length; i++){
if(!$scope.stories[i].selected){
checked = false
return false;
}
}
}
angular.forEach($scope.stories, function(storgy) {
$scope.selection[storgy] = {
browsers: {}
};
});
$scope.save = function () {
console.log($scope.selection);
}
})
Your "include all" checkbox is trying to set .selectionAll property on a String (story in stories gives you a String).
You can't use ng-checked to somehow "work together" with ng-model. If you want your "include all" checkbox to select all subordinate checkboxes and vice versa, you'll need to watch the changes and provide some logic connecting the two things in your controller.
For example, if you want change of the "include all" checkbox value to influence other checkboxes, you'd have to do something like
<input type="checkbox" ng-model="selection[story].all" ng-change="updateAll(story)">
and in your controller
$scope.updateAll = function (story) {
var checked = $scope.selection[story].all;
$scope.browsers.forEach(function (browser) {
$scope.selection[story].browsers[browser] = checked;
});
};
and handle changes of the individual checkboxes in a similar fashion.
What I'm trying to do is to redirect people to a link depending of what they have summited on the form (the link is built using the values from the form fields)
This is the Form:
<form id="form">
<div class="formbox">
<div class="radio-toolbar">
<input type="radio" id="iconapp1" name="department" value="1250"/>
<label for="iconapp1">PP</label><br>
<input type="radio" id="iconapp2" name="department" value="944"/>
<label for="iconapp2">EP</label><br>
</div>
<div class="radio-bar1">
<input type="radio" id="enginemake1" name="enginemake" value="6"/>
<label for="enginemake1"> Chevrolet</label><br>
<input type="radio" id="enginemake2" name="enginemake" value="8"/>
<label for="enginemake2"> Chrysler</label><br>
</div>
<div class="bodyvertdivision1"></div>
<div class="radio-bar3">
<select name="powerrange">
<option id="powerrange1" value="28">100</option>
<option id="powerrange2" value="128">200</option>
<option id="powerrange3" value="228" selected>300</option>
</select>
</div>
<div class="bodyvertdivision1"></div>
<div class="radio-bar4">
<input type="radio" id="location1" name="location" value="store"/>
<label for="location1"> America (NT - ST)</label><br>
<input type="radio" id="location2" name="location" value="store.au"/>
<label for="location2"> Australia and Oceania</label><br>
</div>
<div class="radio-bar2">
<input onclick="goToPage();" type="button" class="buttonmyapp" value="Submit" />
</div>
</div>
</form>
The link I'm trying to build using the values selected will look like this:
http://{location}.mydomain.com/product-catalog.aspx?section=-{department}-{enginemake}-{powerrange}-
Each bracketed section needs to be replaced by the value of the select with the corresponding name.
First include the jquery library link or download js and link
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
function goToPage(){
var location = $('input[name=location]:checked').val();
var department = $('input[name=department]:checked').val();
var enginemake = $('input[name=enginemake]:checked').val();
var powerrange = $('select[name=powerrange]').val();
window.location.href = "http://"+location+".mydomain.com/product-catalog.aspx?section=-"+department+"-"+enginemake+"-"+powerrange+"-";
}
</script>
After the goToPage function on the submit button validates the response change the src attribute of the form should work fine.
So in jQuery it should look something like
var location = $('input[name=location]:checked', '.radio-bar4').val();
var dept = $('input[name=location]:checked', '.radio-bar4').val();
var engine = $('input[name=enginemake]:checked', '.radio-bar1').val();
var power = $('powerrange').val() ;
var domain = "http://"+ location+".mydomain.com/product-catalog.aspx?section=-"+dept+"-"+engine+"-"+power+"-";
$("#form").attr("action", domain);
you can try this
HTML
<select id="powerrange" name="powerrange">
JAVASCRIPT
function goToPage()
{
var location;
var department;
var enginemake;
var powerrange;
pName = document.getElementById('powerrange');
powerrange = pName.options[pName.selectedIndex].value;
var form = document.getElementById('form');
var ele = form.getElementsByTagName('input');
for(var i=0;i<ele.length;i++)
{
if(ele[i].getAttribute('type')=='checkbox')
{
if(ele[i].getAttribute('name')=='department')
{
if(ele[i].checked)
department = ele[i].value;
}
else if(ele[i].getAttribute('name')=='enginemake')
{
if(ele[i].checked)
enginemake = ele[i].value;
}
else if(ele[i].getAttribute('name')=='location')
{
if(ele[i].checked)
location = ele[i].value;
}
else;
}
}
var url = "http://"+ location+".mydomain.com/product-catalog.aspx?section=-"+department+"-"+enginemake+"-"+powerrange+"-";
form.setAttribute('action',url);
form.submit();
}
this script opens a new page of an inputed website. how can i manipulate the window it appears in via check box? for example, if the check box for a scroll bar is checked, how do i add this to the new window?
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title></title>
<script>
function go(){
var myWindow;
var urlValue = document.getElementById("urlValue").value;
//radio buttons
if(yes.checked){
myWindow = window.open(urlValue);
}
else if (no.checked ){
myWindow = window.open(urlValue, "_self");
}
//checkbox loop
/*
for (i=0; i<document.myForm.checkGroup.length; i++){
if (document.myForm.checkGroup[i].checked==true)
alert("Checkbox at index "+i+" is checked!")
}
*/
}
</script>
</head>
<body>
<form name="myForm">
<p><label>Enter URL with http:// here: </label> <input id="urlValue" type="text"></p>
<p><label>Would you like to open a new window?<br>
<input name="yesNo" id="yes" type="radio">Yes<br>
<input name="yesNo" id ="no" type="radio">No </label></p>
<p><label>Other Options</label> <br>
<input name = "checkGroup" id="fullScreen" type="checkbox">Full Screen<br>
<input name = "checkGroup" id="scrollBar" type="checkbox">Scroll Bar<br>
<input name = "checkGroup" id="statusBar" type="checkbox">Status Bar<br>
<input name = "checkGroup" id="toolBar" type="checkbox">Tool Bar<br>
</p>
<p><input id="goButton" value="GO" type="button" onclick = "go()"></p>
</form>
</body>
</html>
This methods are deprecated in modern browser ...
There are no longer the Status Bar to hide, and you can no longer hide Scrollbars of the opened pages. Fullscreen also doesn't work as it did in old browsers, now there's a browser api that you can use to switch the browser to fullscreen mode, but you can't do that via the parent window, in a window.open().
Here is an example of how it would work in old browsers:
http://jsfiddle.net/MyajZ/
In modern browsers it still open the new window with no toolbars, and it switch to fullscreen mode, but immediately it goes back to normal state...
By the way, I found this simpler way to manage the checkbox's:
var params = "";
params += scrollBar.checked ? "scrollbars=yes," : "scrollbars=no,";
params += statusBar.checked ? "status=yes," : "status=no,";
params += toolBar.checked ? "toolbar=yes" : "toolbar=no";
params += fullScreen.checked? ",type=fullWindow,fullscreen" : "";
// ...
myWindow = window.open(urlValue, "Window Name", params);
An example result of the variable params:
scrollbars=no,status=no,toolbar=no,type=fullWindow,fullscreen
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<title>Window opener</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var windowOpenerForm;
windowOpenerForm = $('#windowOpenerForm');
windowOpenerForm.submit(function (e) {
var url,
isNewWindow,
windowOptions,
windowTarget,
windowSpecs;
e.preventDefault();
url = 'http://' + $('#urlValue', windowOpenerForm).val();
isNewWindow = $('input[name="openNewWindow"]:checked',
windowOpenerForm).val();
windowOptions = extractWindowOption(
$('input[name="windowOptions"]',
windowOpenerForm));
windowTarget = isNewWindow === 'yes' ? '_blank' : '_self';
windowSpecs = [
'fullscreen=' + windowOptions.fullScreen,
'scrollbars=' + windowOptions.scrollBar,
'status=' + windowOptions.statusBar,
'toolbar=' + windowOptions.toolBar
].join(',');
window.open(url, windowTarget, windowSpecs);
});
function extractWindowOption(winOptions) {
var opt = {};
winOptions.each(function (index, elem) {
opt[$(elem).val()] = $(elem).is(':checked') ?'yes' : 'no';
});
return opt;
}
});
</script>
</head>
<body>
<form name="myForm" id="windowOpenerForm">
<p>
<label>Enter URL with http:// here: </label>
<input id="urlValue" type="text">
</p>
<p>Would you like to open a new window?<br>
<input name="openNewWindow" type="radio" value="yes" checked>Yes<br>
<input name="openNewWindow" type="radio" value="no">No
</p>
<p>Other Options<br>
<input name="windowOptions" value="fullScreen" type="checkbox">Full Screen<br>
<input name="windowOptions" value="scrollBar" type="checkbox">Scroll Bar<br>
<input name="windowOptions" value="statusBar" type="checkbox">Status Bar<br>
<input name="windowOptions" value="toolBar" type="checkbox">Tool Bar<br>
</p>
<p><input value="GO" type="submit"></p>
</form>
</body>
</html>