My popup.html:
<!doctype html>
<html>
<head>
<form name="orderform">
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
<INPUT TYPE="button" NAME="button1" Value="Read" onClick="readText(this.form)">
</form>
<!-- JavaScript and HTML must be in separate files for security. -->
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
popup.js
console.log("In");
function readText (form)
{
TestVar =form.firstname.value;
console.log(TestVar);
chrome.tabs.create({"url":"http://www.google.co.in","selected":true}, function(tab){
});
}
Unfortunately the above code does not print the value of a first name. Could someone please tell me what i am doing wrong here.
Your form is in the <head> section; move it in the body
don't use form.field, use the DOM id property in conjunction with document.getElementById().
Use var to define local variables; like this:
First name: <input type="text" id="firstname" /><!-- note the use of id=... -->
<script type="text/javascript">
var TestVar = document.getElementById('firstname').value;
</script>
use alert() for strings and numbers
Here's the full code:
popup.html
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<form name="orderform">
First name:
<input type="text" name="firstname" id="firstname" />
<br />
Last name:
<input type="text" name="lastname" id="lastname" />
<input type="button" name="button1" value="Read" onclick="readText()">
</form>
</body>
</html>
popup.js
function readText(){
var TestVar = document.getElementById('firstname').value;
console.log(TestVar); alert(TestVar);
chrome.tabs.create({"url":"http://www.google.co.in","selected":true}, function(tab){ });
}
Related
I need to make my button click to reveal the textarea so the user can choose between uploading either an image or a text message. I can see the hidden/visible element kicking in when I run the page but it doesn't remain in the new state. It immediately reverts back to whatever it was originally set as.
I'm guessing that I'm not escaping the script properly. Any thoughts?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site Media</title>
</head>
<header id="headtitle">
</header>
<body>
<div id="PostContainer"><br>
<textarea id="textmessage" rows="7" cols="40" maxlength="280" placeholder="Enter message here..." width="100%" style="visibility: hidden"></textarea><br>
<form class="UploadButtonContainer">
<button id="textbutton" type="submit" name="submit" onclick="revealinput()" style="display: none;"></button>
<label for="textbutton" style="cursor: pointer;" ><img src="Images/AYE PING.png" width="30%" alt="Choose Text Post" >
</label>
</form>
<script>
function revealinput() {
var x = document.getElementById("textmessage");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
</div>
</body>
</html>
The script didn't like the button being inside a tag. I changed it to a tag and it works now.
I'm trying to get filtered data from a webform more quickly. Basically I want to use URL input to specify a date and to precheck a checkbox. I'm getting stuck with how to specify the check box as I'm not sure what the value should be.
<form action="/xxx/yyy" class="form-inline d-flex justify-content-end" method="get"> <div class="input-group input-group-lg mb-2">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
<input type="text" name="from" value="" class="form-control datetimepicker-input" id="datetimepicker7" data-toggle="datetimepicker" data-target="#datetimepicker7" autocomplete="false">
<div class="input-group-append">
<button type="submit" class="btn btn-dark"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</form>
####snip and skip to the part of the form I wish to pre-check####
<fieldset id="departureGatewayFilters">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="AMS" id="departureGatewayCheck_AMS">
<label class="form-check-label" for="departureGatewayCheck_AMS">
AMS
</label>
</div>
So far I'm using URL string: /xxx/yyy?from=2020-03-05 - what would I need next to pre-check the checkbox as well?
Thanks in advance!
Clare
Getting your checkbox checked and also getting value of the checkbox just through URL string is little bit troublesome. But you can try this :
You can assign unique name to the checkbox.
<input class="form-check-input" type="checkbox" name="checkbox_1" id="departureGatewayCheck_AMS">
And then what you can do is pass the value of checkbox through URL string. For example :
/xxx/yyy?from=2020-03-05&checkbox_1=test.
Now, using javascript you can parse URL strings and get your search params, compare it and get your checkbox checked.
<script lang="javascript">
var url_string = window.location.href ; //gets current URL
var url = new URL(url_string); // instantiate string as URL object
var c = url.searchParams.get("checkbox_1"); //get the params
if(c == "test") {
document.getElementById("departureGatewayCheck_AMS").checked = true; //checks your checkbox
}
</script>
Hope it helps ! Have a good day!
I think all you need to do is add a (checked="true") argument to your input tag your code should look like this then:
<div class="form-check">
<input class="form-check-input" checked="true" type="checkbox" value="AMS" id="departureGatewayCheck_AMS">
<label class="form-check-label" for="departureGatewayCheck_AMS">
AMS
</label>
</div>
Hope this helps
If you want to make the checkbox departureGatewayCheck_AMS checked by default, it is sufficient to edit its code like this:
<input class="form-check-input" type="checkbox" value="AMS" name="departureGatewayCheck_AMS" id="departureGatewayCheck_AMS" checked> AMS
If the checkbox is selected, since its "value" attribute is "AMS",your url (if you submit the form via GET) would be something like:
/xxx/yyy?from=2020-03-05&departureGatewayCheck_AMS=AMS
Complete solution for your requirement:-
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" integrity="sha256-yMjaV542P+q1RnH6XByCPDfUFhmOafWbeLPmqKh11zo=" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<div class="container">
<form class="form-inline d-flex justify-content-end" method="get"> <div class="input-group input-group-lg mb-2">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</div>
<input type="text" name="from" value="" class="form-control datetimepicker-input" id="datetimepicker7" autocomplete="false">
<div class="input-group-append">
<button type="submit" class="btn btn-dark"><i class="fas fa-arrow-right"></i>
</button>
</div>
</div>
<fieldset id="departureGatewayFilters">
<div class="form-check">
<input class="form-check-input" name="checkname" type="checkbox" value="AMS" id="departureGatewayCheck_AMS">
<label class="form-check-label" for="departureGatewayCheck_AMS">
AMS
</label>
</div>
</fieldset>
</form>
</div>
</body>
<script type="text/javascript">
$(function () {
var url_string = "https://www.example.com/page?from=2020-12-12&checkname=1";//window.location.href ; //gets current URL
var url = new URL(url_string); // instantiate string as URL object
var date=url.searchParams.get("from");
var check = url.searchParams.get("checkname"); //get the params
alert(date);
alert(check);
if(check) {
$( "#departureGatewayCheck_AMS" ).prop( "checked", true );
}
$('.datetimepicker-input').datetimepicker({
format: 'YYYY-MM-DD',
defaultDate: date,
});
});
</script>
To reduce load blocking I decided to convert the following google custom adsense search code...
<form action="http://www.google.ru" id="cse-search-box" class="form-search">
<div>
<input type="hidden" name="cx" value="partner-pub-7920375793574512:1188291711" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="55" />
<input type="submit" name="sa" value="Найти" class="btn btn-info" />
</div>
</form>
<script type="text/javascript" async src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>
<script type="text/javascript" async src="http://www.google.com/cse/t13n?form=cse-search-box&t13n_langs=en"></script>
<script type="text/javascript" async src="http://www.google.ru/coop/cse/brand?form=cse-search-box&lang=ru"></script>
... to (I just removed scripts to require js load style)
<form action="http://www.google.ru" id="cse-search-box" class="form-search">
<div>
<input type="hidden" name="cx" value="partner-pub-7920375793574512:1188291711" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="55" />
<input type="submit" name="sa" value="Найти" class="btn btn-info" />
</div>
</form>
... and require js module:
var scripts;
scripts = ['http://www.google.com/jsapi', 'http://www.google.com/cse/t13n?form=cse-search-box&t13n_langs=en', 'http://www.google.ru/coop/cse/brand?form=cse-search-box&lang=ru'];
define(scripts, function() {
return google.load("elements", "1", {
packages: "transliteration"
});
});
And got unpredicted result:
when page is loading first it is ok, but then I see white screen without any html element and no errors in google chrome console.
So loading google scripts in require js module breaks all html. Why it is so?
I added window. in line
return google.load("elements", "1", {packages: "transliteration"});
so got line:
return window.google.load("elements", "1", {packages: "transliteration"});
And all works fine.
Full code of require.js module:
var scripts;
scripts = ['http://www.google.com/jsapi', 'http://www.google.com/cse/t13n?form=cse-search-box&t13n_langs=en', 'http://www.google.ru/coop/cse/brand?form=cse-search-box&lang=ru'];
define(scripts, function() {
return window.google.load("elements", "1", {
packages: "transliteration"
});
});
I'm trying example from this site. It works fine. But if i separate views,models,routers into separate file it gives me a problem. There is 3 views. WineList view, WineListItemView and winedetails view. WineList view takes collection of wine models as model and winelistItem and winedetails view takes wine as a model.
Router's code is like this
var app = app || {};
app.AppRouter = Backbone.Router.extend({
routes:{
"":"list",
"wines/:id":"wineDetails"
},
initialize:function () {
$('#header').html(new app.HeaderView().render().el);
},
list:function () {
this.wineList = new app.WineCollection();
this.wineListView = new app.WineListView({model:this.wineList});
this.wineList.fetch();
$('#sidebar').html(this.wineListView.render().el);
},
wineDetails:function (id) {
if(this.wineList == undefined)
{
this.wineList = new app.WineCollection();
this.wineListView = new app.WineListView({model:this.wineList});
this.wineList.fetch();
$('#sidebar').html(this.wineListView.render().el);
}
this.wine = this.wineList.get(id);
if (app.router.wineView) app.router.wineView.close();
this.wineView = new app.WineView({model:this.wine});
$('#content').html(this.wineView.render().el);
}
});
On page load it fetches models from server and displays list of wines in sidebar div of page. When i click on particular wine item its details will be displayed in content div of page. That all works fine. But when i reload that page which now contains details of particular,wine model of Winedetails view gives undefined .
I'm intializing the router on main page like this
app.js
var app = app || {};
$(function() {
})
app.router = new app.AppRouter();
Backbone.history.start();
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Cellar</title>
<link rel="stylesheet" href="../css/styles.css" />
</head>
<body>
<div id="header"><span class="title">Backbone Cellar</span></div>
<div id="sidebar"></div>
<div id="content">
<h2>Welcome to Backbone Cellar</h2>
<p>
This is a sample application part of of three-part tutorial showing how to build a CRUD application with Backbone.js.
</p>
</div>
<div>
Next page
</div>
<!-- Templates -->
<script type="text/template" id="tpl-header">
<span class="title">Backbone Cellar</span>
<button class="new">New Wine</button>
</script>
<script type="text/template" id="tpl-wine-list-item">
<a href='#wines/<%= id %>'><%= name %></a>
</script>
<script type="text/template" id="tpl-wine-details">
<div class="form-left-col">
<label>Id:</label>
<input type="text" id="wineId" name="id" value="<%= id %>" disabled />
<label>Name:</label>
<input type="text" id="name" name="name" value="<%= name %>" required/>
<label>Grapes:</label>
<input type="text" id="grapes" name="grapes" value="<%= grapes %>"/>
<label>Country:</label>
<input type="text" id="country" name="country" value="<%= country %>"/>
<label>Region:</label>
<input type="text" id="region" name="region" value="<%= region %>"/>
<label>Year:</label>
<input type="text" id="year" name="year" value="<%= year %>"/>
<button class="save">Save</button>
<button class="delete">Delete</button>
</div>
<div class="form-right-col">
<img height="300" src="../pics/<%= picture %>"/>
<label>Notes:</label>
<textarea id="description" name="description"><%= description %></textarea>
</div>
</script>
<!-- JavaScript -->
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/underscore.js"></script>
<script src="js/lib/backbone.js"></script>
<script src="js/models/WineModel.js"></script>
<script src="js/collections/WineListCollection.js"></script>
<script src="js/Views/WineListView.js"></script>
<script src="js/Views/WineListItemView.js"></script>
<script src="js/Views/WineDetailsView.js"></script>
<script src="js/Views/HeaderView.js"></script>
<script src="js/routers/routers.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I'm new to this backbone technology. please tell me what am i missing
this.wineList.fetch();
fires an asynchronous request to your server, which means that the content will arrive (or not) at some point after executing this line, but your application execution continues whether the response arrived or not. On page reload (assume you have wines/:id in the URL) first you have to fetch the complete list of wines before accessing any particular wine from the collection.
You have to wait until is download the collection, and access the wine with id, after this request is finished.
So after initiating the request continue your application logic in the success callback:
this.wineList.fetch({
success: function(model) {
...
this.wine = model.get(id);
...
}
});
I followed the http://msdn.microsoft.com/en-us/library/cc264294%28v=office.12%29 making a new SP project with the under _layouts. the control renders fine, and i can select files, however when I click upload it shows the little loading icons. with no files uploaded.
<LINK REL="stylesheet" TYPE="text/css" HREF="/_layouts/1033/styles/ows.css">
<SCRIPT LANGUAGE="javascript">
function MultipleUploadView() {
document.all.idUploadCtl.SetTreeViewColor("#FF0000");
document.all("idMultipleView").style.display = "inline";
}
function DocumentUpload() {
document.all.idUploadCtl.MultipleUpload();
}
</SCRIPT>
<FORM NAME="frmUpload" METHOD="post"
ACTION="upload.aspx?RootFolder=& Source=http://jono-pc/Shared Documents/Forms /AllItems.aspx">
<SharePoint:FormDigest ID="FormDigest1" runat="server" />
<INPUT TYPE="hidden" NAME="Cmd" VALUE="Save">
<INPUT TYPE="hidden" NAME="NextUsing"
VALUE="http://jono-pc/Shared Documents/Forms/AllItems.aspx">
<INPUT TYPE="hidden" VALUE="New">
<INPUT TYPE="hidden" NAME="putopts" VALUE="true">
<INPUT TYPE="hidden" NAME="destination"
VALUE="http://jono-pc/Shared Documents">
<INPUT TYPE="hidden" NAME="Confirmation-URL"
VALUE="http://jono-pc/Shared Documents/Forms/AllItems.aspx">
<INPUT TYPE="hidden" NAME="PostURL"
VALUE="http://jono-pc/_vti_bin/shtml.dll/_layouts/upload.aspx" />
<INPUT TYPE="hidden" NAME="VTI-GROUP" VALUE="0">
<P CLASS="ms-toolbar">
<A HREF="javascript:MultipleUploadView()"
TARGET="_self">Upload Multiple Files</A>
</P>
<DIV ID=idMultipleView style='display:none'>
<P CLASS="ms-toolbar">
<A HREF="javascript:DocumentUpload()"
TARGET="_self">Save and Close</A>
</P>
<OBJECT id=idUploadCtl name=idUploadCtl
CLASSID=CLSID:07B06095-5687-4d13-9E32-12B4259C9813
WIDTH='100%' HEIGHT='350px'>
</OBJECT>
</DIV>
</FORM>
Finally found the answer to this dilemma (hint provided by an old SP bug: http://support.microsoft.com/kb/2489168) The input values must be relative URLS because SharePoint Office 2010 appends the http:// to all the values. so if you have a full URL it will append the http:// twice. Once I changed to relative paths, it uploaded fine.