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
Related
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});
}
I came across something weird that is making me realize I do not know JS stuff as well as i should. And so I thought I would ask a question about what is going on to see if that will help. I have a simple form with three "textarea" inputs and i have a "save" button. the save button triggers a js function that gathers the what is on the inputs and the does an alert showing them...
very simple application but what I was not expecting was that when you "close" the alert box; all the data entered on the form is erased...
here is my code:
<form>
<strong>Make</strong><br/>
<textarea id="make_notes" rows="4" cols="50">
</textarea><br/><br/>
<strong>Model</strong><br/>
<textarea id="model_notes" rows="4" cols="50">
</textarea><br/><br/>
<strong>Features</strong><br/>
<textarea id="features_notes" rows="4" cols="50">
</textarea>
<br/><br/>
<button onclick="side_form_js2()">Save2</button>
</form>
<script>
function side_form_js2() {
var element1 = document.getElementById("make_notes");
var make_notes_var = element1.value;
var element2 = document.getElementById("model_notes");
var model_notes_var = element2.value;
var element3 = document.getElementById("features_notes");
var features_notes_var = element3.value;
alert(make_notes_var + "I am an alert box!22222" + model_notes_var + features_notes_var);
}
</script>
So I am really uncertain what is making the form input be erased. It is almost like the page is being reloaded but I dont think that is the case. Can anyone shed any light on this? Thanks...
P.S. dont know if this makes any difference but just running this locally using Xampp on my PC...
the default is reload, change your code to this and it should work
<button onclick="return side_form_js2()">Save2</button>
and then in your function add return false after the alert like this:
alert(make_notes_var + "I am an alert box!22222" + model_notes_var + features_notes_var);
return false;
A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit".
If you want to use a button in a form without it submitting use type="button".
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
I have a page portion as below;
<input name="test1" type="text" id="test1" class="test1">
<button value="hi" id="but">hi</button>
I want to get data inside text field entered by user. I tried the following;
$(document).ready(function(){
var test2 = $('#test1').val();
$('#but').click(function() {
alert(test2);
});
});
When user clicks button hi, the page alerts the text inside text field. But the alert is coming blank (without text) even with text inside. When I reload the page, the text inside text field remains there and when I click the button again, script works well alerting the text inside. Again when I clear the text and I give another text, and when I click button, the alert is coming with previous text.
I am using jQuery.
Here is the fiddle.
I want to get alert with text inside the text area. How can I do this?
You can do this:
$('#but').click(function() {
alert($('#test1').val());
});
Or:
$('#but').click(function() {
var val = $('#test1').val();
alert(val);
});
Working Example
Here is very simplest way
<input name="test1" type="text" id="test1" class="test1">
<button value="hi" id="but" onclick="buttonClicked()">hi</button>
<script>
function buttonClicked(){
alert(jQuery("input#test1").val())
}
</script>
Enjoy
You are getting the value on page load, outside of the handler. You need to move it inside of the click handler, otherwise you will just get the value that was fetched when the page loaded:
$(document).ready(function(){
$('#but').click(function() {
var test2 = $('#test1').val();
alert(test2);
});
});