I'm currently creating a Chrome Extension that has a popup.html and in that pop up is 2 things. An input field and Submit button.
The Input field takes a EXTN number from a user and when submitted is pressed I need to then navigate the user to a new tab appending the Input from the user to the end.
Input = 9999 when submit is pressed user is taken to: Submit = http://name.com/9999
I have this working with when just use the HTML file but it doesn't seem to do anything when loaded into Chrome as an Extension.
Here is my code for the input and onClick:
Popup.HTML
<script src="popup.js"></script>
<input type="text" id="page" />
<input type="submit" value="submit" onclick="goToPage();" />
popup.js
function goToPage() {
var page = document.getElementById('page').value;
window.location = "http://name.com/" + page; }
I understand that you can't run in line JS so I've called it out from the popup.js file but its still not working.
You can't use inline JS in Chrome extension (the onclick="goToPage();" in the input element is considered inline Javascript) . You have to put all your Javascript code in a separate file.
You will need to use chrome.tabs API to open a new tab. For example:
popup.html
<input type="text" id="page" />
<button id="submit">Submit</button>
<script src="popup.js"></script>
popup.js
document.getElementById('submit').onclick = function(){
var page = document.getElementById('page').value;
chrome.tabs.create({url:'http://name.com/' + page});
}
Related
When clicking the submit button, within Chrome, the print preview window is opened just as it would if you pushed CTRL + P. I'm absolutely baffled. Also, nothing gets printed to the console even when text is entered into the 'myinput' input field.
html
<div class="subscribeform">
<input class="myinput">
<input placeholder="Enter Email">
<button class="subscribesubmit1" type='submit'>
Submit
</button>
</div>
javascript
<script type="text/javascript">
$('.subscribesubmit1').click(function() {
var myinput = $('.myinput').val();
print(myinput)
});
</script>
Thanks for your help
Try this:
$('.subscribesubmit1').click(function() {
var myinput = $('.myinput').val();
console.log(myinput);
});
The print() method prints the contents of the current window.
And if you are new to javascript id suggest that you don't jump straight to jquery
Working through a problem, I have managed to identify and write an SQL injection, send that injection to a site but I need to automate clicking the login button.
Is it possible (through JavaScript, html, etc) to load a webpage fill in a bunch of data fields and click a button?
I'm trying to automate something and I can do everything but click the button on the webpage.
The process is:
Get user data on your webpage (he will click a button to finish)
Send that data to a different webpage
Fill data fields on second webpage
Click a submit button on the second webpage
I am stuck on the last part.
Here is the code I have so far
<!DOCTYPE html>
<html>
<head>
<script>
function func()
{
var str1 = document.getElementById("name").value;
var str2 = "SQL ADDED EXPLOIT STRING";
document.getElementById("name").value = str1.concat(str2);
return true;
}
</script>
</head>
<body>
<form action="website.com" method="POST">
<input name="login" id="name" value="username" />
<button id="button" onclick="func()">press button</button>
</form>
</body>
</html>
So I am learning Javascript, and I'm having a problem:
I can set the innerText of a paragraph element. But immediately the web-browser undo's my work!! Meaning the web-page completely reverts back to the state it was in as if I had loaded the page afresh.
<html>
<body>
<form>
<input type="submit" onclick="GetCurrentLocation()" value="Get Current URL" />
</form>
<p id="CurrentURL">Current URL:</p>
<script>
function GetCurrentLocation()
{
var myCurrentLocation = window.location.href;
var curLocP = document.getElementById("CurrentURL");
curLocP.innerText = "Current URL: " + myCurrentLocation;
}
</script>
</body>
</html>
So above I set the innertext in the last line of the function, and in the UI I can see the correct, expected text:
Current URL: C:\Users...\Projects\test.html
flash and then disappear simply leaving me with:
Current URL:
I'm running this on Google Chrome.
Browser submits the form and refreshes the page. That's why you loose changes. Change your input type from submit to button
<input type="button" onclick="GetCurrentLocation()" value="Get Current URL" />
Add a return:false to your JavaScript to prevent the form from being submitted and reloading the page (and making it look like the change disappears when in reality it's just reloading):
<input type="submit" onclick="GetCurrentLocation();return false" value="Get Current URL" />
jsFiddle example
The browser submits the form that's why the refresh happens.
If you need to use a submit button you can use event.preventDefault()
function GetCurrentLocation(event)
{
event.preventDefault();
var myCurrentLocation = window.location.href;
var curLocP = document.getElementById("CurrentURL");
curLocP.innerText = "Current URL: " + myCurrentLocation;
}
Basically I am new in web development and I'm facing a problem related to open file dialog box using JavaScript or jQuery my problem is that how can I open a file browser dialog box and after clicking open button in the file dialog box get the file path or name in alert() method.
I am using below code for show dialog box in JavaScript
<script type="text/javascript">
function performClick(node) {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, false);
node.dispatchEvent(evt);
var pathnew = document.getElementById('theFile').value;
}
</script>
Open file dialog
<input type="file" id="theFile" />
above code shows perfectly file browse dialog box but this alert box show when I click on
Open file dialog but I need after clicking Open button which is under the File browse dialog box.
Please Help me!
Any help will be appropriated!
<form>
<input type="file">
</form>
<script>
$(":file").change(function(){
alert($(":file").val());
});
</script>
put it on jsfiddle for you here: http://jsfiddle.net/9ytkn/
Just get the value of the <input type="file" />.
I think this is right...Should produce a "Browse" button:
<input id="file_field" type="file"></input>
<button type="button" onclick="DisplayFilePath();">Display file path</button>
<script>
function DisplayFilePath(){
alert($("#file_field").val())
}
</script>
try this:
<SCRIPT>
function reverseData(val) {var d="";var temp="";for (var x=val.length;x>0;x--) {d+=val.substring(x,eval(x-1));}return d;}
function getFilename(val) {val=escape(val);var reversedsrc=reverseData(val);var nameEnd=reversedsrc.indexOf('C5%');var name=reversedsrc.substring(0,nameEnd);name=reverseData(name);name=unescape(name);return name;}
var daname='val';
document.write('<INPUT TYPE="file" ID="val"><INPUT TYPE="button" VALUE="Get File Name" ONCLICK="alert(getFilename(window.document.getElementById(daname).value))">');
</SCRIPT>
put it into html file and test
On my company's internal ticket tracking website, we have a form that we use to update or note changes in the ticket. When a client updates the ticket, I need to modify a text area, input, and click submit. I want to create a single button that will handle this repetitive task using a chrome extension.
In my extensions content.js script, I have the following which isn't getting the job done.
var blueButtonDom = document.createElement('a');
blueButtonDom.setAttribute('href','#');
blueButtonDom.setAttribute('onClick','clickHandler();return true');
function clickHandler() {
$('textarea[id$="PrivateNotes"]').val('blue');
$('input[id$="BillTime"]').val('1');
$('input[id$="btnSave2"]').click();
}
Any input from you all would be greatly appreciated.
Thanks much,
Joe Chin
jQuery:
$(document).ready(function() {
var $myLink = $('Automagical');
$myLink.click(function() {
$('#PrivateNotes').val('blue')
$('#BillTime').val('1');
$form.submit();
});
$('#myForm').prepend($myLink);
});
html:
<form id="myForm">
<textarea id="PrivateNotes"></textarea>
<input id="BillTime" type="text" />
<input id="btnSave2" type="submit" />
</form>
http://jsfiddle.net/pxfunc/T9bgw/
UPDATED to include $(document).ready()