I've a project where I scan a QR code, and it will then automatically print out information based on which code was scanned.
I have the scanner, and a printer. Each QR code is to correspond to a URL. I can get the scanner to fill an input field, and I can get an alert to show the information that was scanned. However, whenever I try to assign the URL it simply appends the information to the current URL, instead of replacing it.
I need it to replace the current URL. Does anyone know why it is doing this, and how to fix it?
<html>
<head><title>QR Printing</title></head>
<body onload="document.myform.mytextfield.focus();">
<form name="myform">
<input type="text" name="mytextfield" onchange="checkForm()">
</form>
<script type="text/javascript" language="JavaScript">
function checkForm() {
var field1 = document.forms['myform'].elements['mytextfield'].value;
alert(field1);
window.location.assign(field1);
}
</script>
</body>
</html>
Looks like the form is submitting. Cancel it.
<form name="myform" onsubmit="return false">
You want:
window.location = field1;
add return false; after window.location.assign(field1);
<html>
<head><title>QR Printing</title></head>
<body onload="document.myform.mytextfield.focus();">
<form name="myform">
<input type="text" name="mytextfield" onchange="checkForm()">
</form>
<script type="text/javascript" language="JavaScript">
function checkForm() {
var field1 = document.forms['myform'].elements['mytextfield'].value;
alert(field1);
window.location.assign(field1);
return false;
}
</script>
</body>
</html>
Neither of the solutions worked for me in chrome browser.
I have resolved this using:
setTimeout(function () { document.location.href = YourUrlLink }, 500);
Hope this helps who are seeking a solution for chrome browser issue.
Related
Why isn't alert('hi') working at all when submit button is clicked?
evt.preventDefault(); & evt.stopPropagation(); is to prevent the form from trying to open another window. However even when I remove these lines my function still isn't called...
'use strict';
function handleSubmission(evt) {
evt.preventDefault();
evt.stopPropagation();
alert('hi');
}
var form = document.querySelector('#formID');
form.addEventListener('submit', handleSubmission);
<!DOCTYPE html>
<html lang="en-US">
<body>
<form action="" method="post" id="formID">
input <input type="text">
<input type="submit" value="submit">
</form>
</body>
</html>
Not getting any errors in the console.
EDIT: To add to the confusion even more. The snippet above doesn't work on Stack Overflow or in my local (chrome) browser. However, on jsfiddle the alert fires just fine... https://jsfiddle.net/jpazrjt4/1/
Below is a SO snippet that provides a means to accomplish this with pure Javascript, but it will not behave correctly as when you click Run Code Snippet.
I would like to address your concern about it not working in SO Snippet. SO snippet does not allow for form submission in the their iframe sandbox. If you run the SO snippet while in Chrome and then open up developer tools (Ctrl+Shift+I), you will see in the console log entry
Blocked form submission to '' because the form's frame is sandboxed and the 'allow-forms' permission is not set.
Jsfiddle does not restrict the allow-forms permission for their constructed iframes. Here is the JSFiddle link so you can test it out: jsFiddle:jsFormIntercept
(function() {
"use strict";
window.addEventListener("load", function() {
document.getElementById("formID").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission
alert('hi');
}, false);
}, false);
}());
<!DOCTYPE html>
<html lang="en-US">
<body>
<form action="" method="post" id="formID">
input <input type="text">
<input type="submit" value="submit">
</form>
</body>
</html>
you simply need to write the below code as evt.preventDefault() & evt.stopPropagation() both have different functioning
'use strict';
function handleSubmission(evt) {
evt.preventDefault();
alert('hi');
}
e.preventDefault and e.stopPropagation are jQuery functions and r valid only when using the jquery libs.
I cannot seem to find a vanila JavaScript way to acheive that so you will have to use jquery for now
JS as:
function handleSubmission(evt) {
evt.preventDefault();
evt.stopPropogation();
alert('hi');
}
var form = document.querySelector('#formID');
form.addEventListener('submit', handleSubmission);
and HTML as:
<!DOCTYPE html>
<html lang="en-US">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" id="formID">
input <input type="text">
<input type="submit" value="submit">
</form>
</body>
</html
Passed the test
Actually when clicked the button will display a an alert say HI and that submit will not go anywhere because of event.preventDefault()
cool change you code to this and please call jquery before this because stoppropogation is a part of jquery library
May be this will not work here but please check it on your side on codepen etc. it is working
check here:-
http://codepen.io/ermayankrajput/pen/VPXKdN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" id="formID">
input <input type="text">
<input type="submit" value="submit">
</form>
<script>
'use strict';
var form = document.getElementById('formID');
form.addEventListener('submit',function(evt){
evt.preventDefault();
evt.stopPropagation();
alert('hi');
});
</script>
This question has been asked a lot it seems on Stack Overflow but none of the solutions seem to be working. I am developing a web application where I have to fill in data in data fields on page load. Here is my code:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<input type="text" id="datetime" value="" />
<script type="text/javascript">
$(document).on("pageload",function(){
//for fill field
document.getElementById("datetime").value = "here is value";
});
</script>
</body>
</html>
For some reason, when I load the page, no data gets filled in, does anyone see the reason for it?
You don't need jQuery. Try this:
<!DOCTYPE html>
<html>
<body>
<input type="text" id="datetime" value="" />
<script>
window.onload = function() {
document.getElementById('datetime').value = 'here is value';
};
</script>
</body>
</html>
What version of jquery are you using? Looks like pageload might deprecated and you should use pagecontainerload
Or better yet use the $(document).ready or .load methods?
In Jquery it's called document ready event... So use the below syntax.
$(document).ready(function(){
//for fill field
$("#datetime").val( "here is value");
});
Note the inner line of code has been changed.. This is the Jquery way of doing the same thing...
You can also use this Shorthand to $(document).ready(function(){
That is $(function(){
Alright, people of Stack Overflow, I have a question for you: I am in a web design class at my high school and learning ahead of the class since I already knew the first half of the class. I was asked by my teacher if I could teach what I have learned about Javascript and I agreed. However, one of the things she wanted me to teach is not working for me when I try it out on my own. I am trying to do a simple check for a variable that when you input a name into a box, if it is my name or the teacher's name it pulls up a popup that says "welcome" or something like that, and if it is anyone else it says "go away" the only issue is that no matter what I try something in the code is not working. This is a test function that I have at the moment; it is intended to print out the
<!doctype html>
<html>
<head>
<script type="text/javascript">
var name = document.KageForm.User.value;
function validator(){
alert(name);
}
</script>
</head>
<body>
<form name="KageForm">
Username:<input type="text" name="User">
<br/>
Password: <input type="password" name="pass">
<br/>
<input type="button"value="Submit" onclick="validator()" />
</form>
<script type="text/javascript">
</script>
</body>
</html>
Here is the full version of the code that I am trying to get to work:
<!doctype html>
<html>
<head>
<script type="text/javascript">
var name = document.KageForm.User.value;
function validator(){
if(name=="Kage Kaldaka"){
alert("Eeyup")};
else
alert("Nnope");
}
</script>
</head>
<body>
<form name="KageForm">
Username:<input type="text" name="User">
<br/>
Password: <input type="password" name="pass">
<br/>
<input type="button"value="Submit" onclick="validator()" />
</form>
</body>
</html>
You have several issues here:
You have a semicolon after the if statement
You are reading the name value on page load, at a point when the input field hasn't even been added to the page yet and certainly hasn't been filled out by the user yet. You need to read it when the user submits the form, i.e. you need to move the name assignment inside the validator method:
JS:
function validator(){
var name = document.KageForm.User.value;
if(name=="Kage Kaldaka"){
alert("Eeyup");
} else {
alert("Nnope");
}
}
There shouldn't be a semicolon after the if. You also have to put the variable inside the function to make it update:
function validator(){
var name = document.KageForm.User.value;
if(name=="Kage Kaldaka"){
alert("Eeyup")
} else {
alert("Nnope");
}
}
JSFiddle: http://jsfiddle.net/FhCTc/1/
You are setting your variable outside your function:
<script type="text/javascript">
var name = document.KageForm.User.value;
function validator(){
if(name=="Kage Kaldaka"){
alert("Eeyup")};
else
alert("Nnope");
}
</script>
This means var name is set when the page loads, but no other times. Move it into validator().
You also ended your if with a semi-colon, which would cause an error on the else portion.
Besides all the previous answers it is in good manner in JavaScript to use === not ==
I have a form with only one file input and I want to auto submit the form every time when someone selects file. Now I use this code:
$(function(){
$("#fil1").change(function(){
$("#form1").submit();
});
});
but it works only for the first selection. When I select some other file the form is't submitted again! It seems the change function is called only for the first time! Can anyone help? I use jquery...
What version of jQuery are you using? I just tried the code below and it worked multiple times. Also wonder if it's your browser. I tried Chrome and IE 8.
<html>
<head>
<title>index.html</title>
<script type="text/javascript" src="js/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
alert('hit');
$(function(){
$("#fil1").change(function(){
$("#form1").submit();
});
});
</script>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<label for="fileField"></label>
<input type="file" name="fileField" id="fil1">
</form>
</body>
</html>
hope this helps...
It appears that oncopy and onpaste do not work with iOS devices that support copy and paste now. Is there another means to bind to these events in javascript?
You didn't attached any code with your question, so I can't tell what was the actual issue.
Probably the issue is with your code.
I used the following html code and it is working perfectly. Please check with this:
<html>
<head>
<script type="text/javascript">
function read()
{
var name = document.getElementById('p').value;
alert('Hi: '+name);
}
function copy()
{
alert('Copy');
}
function paste()
{
alert('Paste');
}
</script>
</head>
<body oncopy='copy();' onpaste='paste();'>
<form>
<input type="text" name='m' id='p'/>
<input type="button" value="Submit" onclick='read();'/>
</form>
</body>
</html>