I'm trying to have a simple check on an input file. sended through a form, using Javascript , with App Engine in Python runtime and using Jinja2. The form is the following:
<form action="{{ upload_url|safe }}" name="inputfile" id="inputfile" method="post" enctype="multipart/form-data">
Load a file:
<input type="file" id="file" name="file"><br>
<input type="button" name="submit" value="Send" onclick="checkForm()">
</form></br>
The checkForm() function is the following:
function checkForm(){
var message ="";
if(!document.inputfile.file.value) message += "You must select a file\n";
if(document.inputfile.file.value && !(estensione(document.inputfile.file.value))) message += "The extension of the file MUST be .txt\n";
if(message != "" ) alert(message);
else document.inputfile.submit();
}
There aren't problems with the alert message when I try to submit no file or a not txt file. But when it's all right the function doesn't submit the file.
If I use a submit input, instead of button, the file is sended without problem.
Somebody know what's wrong?
I think inputs name is caused this problem. I tried code without name attiribute and it worked.
Can you try code after remove name field?
<input type="button" value="Send" onclick="checkForm()">
Related
I am having trouble running a program to validate correct passwords. I have a form with two text fields, one is ‘password’ and the other is ‘password 2’ with an external Java script file. I have a function that validates them. I’m not sure how to connect my files along with calling the function.
When I test it, I put in the wrong password but the form still submits with incorrect information and doesn’t display the error message I wrote.
Any help is appreciated.
You can add a listener function to the 'submit' event from your form.
Your function will receive a Event from which you can get your form using e.currentTarget
Finally don't forget to call e.preventDefault() to cancel the form submission
<body>
<form id="js-form">
<input type="text" name="password"/>
<input type="text" name="password2"/>
<input type="submit" value="submit"/>
</form>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("js-form").addEventListener('submit', (e) => {
const $form = e.currentTarget;
if($form['password'].value !== $form['password2'].value) {
alert('password mismatch');
e.preventDefault();
}
});
});
</script>
</body>
I'm trying to send file and text at the same time, but I end up sending only file. For some reason form ommits the text. Here's my code
<form action="test.html" method="get" enctype="multipart/form-data" id="form">
Choose file
<input type="file" name="fileToUpload" id="check">
<input type="text" id="variable">
<input id="but" type="button" value="Send" onclick="send()">
</form>
And here's my Javascript code
function send() {
document.getElementById("variable").value = 1;
var val = document.getElementById('check').value;
if (val != "") {
document.getElementById('form').submit();
} else {
alert("Choose file!");
}
}
Note - it's important to me that the "variable" value will be added via JS. I checked it and it definetly changes to 1 before sending form, however after submitting form I'm getting only
test.html?fileToUpload=somefile
Without the "variable". Yes I know I should use POST and redirect form to some PHP file but I changed it to GET and html to check what is received in URL.
Any other ways to add "variable" to the form string without adding extra input are welcome.
I want to modify the file submitted by user on the client side, before it reaches my server. To modify it I want to use Flash applet that would communicate with JavaScript.
<form action="" method="post" enctype="multipart/form-data">
<input type="file" id="id_file">
<input type="submit" value="Submit">
</form>
Is it possible to do it? If yes, I would appreciate any tips how should it be done :)
Should I convert it to string? Or maybe JS comes with some functions to make such operations easier?
$( "form" ).change(function(x) {
//pass file input to Flash applet
x.preventDefault();
flashApplet.proceed($('#id_file').value);
});
function callback(modified_file) {
// Flash applet has modified the file
// Now submit the form with a new, modified file
$('#id_file').value = modified_file;
trigger_submit();
}
The file can be either a video, an audio or an image.
Don't use a submit button, instead use a normal button disguised to look like a submit button, and then you can check when the button is clicked, do your stuff, then submit the form via javascript by using
document.getElementById("myform").submit();
I would replace your current html with:
<form action="" method="post" enctype="multipart/form-data" id="myform">
<input type="file">
<button id="submit">Submit</button>
</form>
And then js:
document.getElementById('submit').onclick = function() {
//do your flash stuff
};
function callback(){
//here we submit the form
document.getElementById("myform").submit();
// because the file itself has been modified, this is all we need to do.
}
Basically, use a false submit button, to do what you want first.
Hello and thank you for viewing my question. I am a complete beginner and am looking for simple ways to do the following...
What I have in seperate linked documents:
HTML, CSS, Javascript, PHP
What I am having trouble with:
I need to use something like JSON (although I would also accept XML requests or Ajax at this point if they work) to transfer variables from Javascript to PHP. I need the variables to search in a database, so they need to be literally available within PHP (not only seen on a pop-up message or something).
I have seen a LOT of different ways to do this, I have even watched tutorials on YouTube, but nothing has worked for me yet. The things I am having the biggest problem with is that when I add a submit button to my form it doesn't submit my form and I don't know why.
Form code snippet:
<form id="form" name="input" method="post" action="javascript:proofLength();">
<input id="userinput" type="text" autofocus />
<input id="submit" type="button" value="submit" onsubmit="post();">
</form>
The second to last line there doesn't work. Do I need javascript to submit the form? Because I really thought that in this case it was part of the functionality of the form just like method="post"...
The other thing is that for JSON, I have no idea what to do because my variables are determined by user input. Therefore, I cannot define them myself. They are only defined by document.getElement... and that doesn't fit the syntax of JSON.
Those are really my main problems at the moment. So if anyone could show me a simple way to get this variable transfer done, that would be amazing.
After this I will need to search/compare in my database with some php/sql (it's already connecting fine), and I need to be able to return information back to a in HTML based on what I find to be true. I saw one example, but I am not sure that was very applicable to what I am doing, so if you are able to explain how to do that, that would be great also.
Thank you very, very much.
April
You don't need ajax to submit this form. You don't even need javscript. Just do this:
<form id="form" name="input" method="post" action="mytarget.php">
<input id="userinput" name="userinput" type="text" autofocus />
<input id="submit" type="submit" value="submit" />
</form>
This will send the form data to mytarget.php (can be changed of course)
See that i have added the name attribute to your text-field in the form and i changed the type of the button to submit.
Now you can work the Data in mytarget.php like this:
<?
$username = $_POST['userinput'];
echo "Your name is: ".$username;
?>
You wanted to have a check for length in the submit. There are two ways to this:
Before the input is send (the server is not bothered)
Let the server Check the input
for 1 you will have to append a event listener, like this:
var form = document.getElementById("form");
form.addEventListener("submit", function(event){
console.log("test");
var name = form.elements['userinput'].value;
if(name.length < 3){
alert("boy your name is short!");
event.preventDefault();
}
});
Enter a name with less then 3 characters and the form will not be submitted. test here: http://jsfiddle.net/NicoO/c47cr/
Test it Serverside
In your mytarget.php:
<?
$username = $_POST['userinput'];
if(strlen($username) > 3)
echo "Your name is: ".$username;
else
echo "your name was too short!";
?>
You may also do all this with ajax. You will find a lot of good content here. But I'd recommend a framework like jQuery to do so.
The problem is in this line
<form id="form" name="input" method="post" action="javascript:proofLength();">
The action should be a PHP page (or any other type of server script) that will process the form.
Or the proofLength function must call submit() on the form
In the php page you can obtain variable values using $_GET["name"] or $_POST["name"]
To summarize; your code should look like this
<form id="form" name="input" method="post" action="yourpage.php">
<input id="userinput" type="text" autofocus />
<input id="submit" type="button" value="submit">
</form>
and for your php page:
<?php
$userinput = $_POST["userinput"];
//Do what ever you need here
?>
If you want to do something in your javascript before submitting the form, refer to this answer
So, I need to create a redirect system based on a code entered. Currently I have:
<form id="form1" name="form1" method="post" action="">
<pre> <input type="text" name="meow" id="meow" /> <input type="submit" name="submit" id="submit" value="Submit" onclick="javascript:window.location.href('http://foo.exaple.com/bar/' + document.getElementById("meow").value + '.zip')"/>
Basically, I need the above script to download a zip file in foo.example.com/bar/, based on a code entered in text box meow.
When I enter code "ugh" into text box meow and click submit, I want to download the file at http://foo.example.com/bar/ugh.zip
How can I do this?
.href is not a function/method, it is a property which you assign a valid URI string to:
location.href = 'http://foo.exaple.com/bar/' + document.getElementById('meow').value + '.zip';
See MDN: window.location Object
Side-notes: If you don't want to submit the form, use an input type="button" instead of submit then.
Also mixing structure and behavior (HTML and JS) is usually frowned upon in our Web 2.0 times, so:
<input type="button" name="submit" id="submit" value="Submit">
<script>
document.getElementById('submit').onclick = function() {
location.href = 'http://foo.exaple.com/bar/' + document.getElementById('meow').value + '.zip';
};
</script>
This works nicely in all browsers since IE6 as well and you save some headaches such as mixing up quotes inside the markup. =]
It is also easier to maintain and later you can even move your page's JS into a separate .js file for caching and separation of structure and behavior.