Press form submit button if upload format is valid - javascript

I need to press the button "submit" if the upload file format is valid. I have managed to check the format using the JavaScript below. My aim is between // and // ...
<script>
function Checkfiles(f){
f = f.elements;
if(/.*\.(gif)|(jpeg)|(jpg)|(doc)$/.test(f['filename'].value.toLowerCase()))
return true; + // and press the button submit //
alert('Please Upload Gif or Jpg Images, or Doc Files Only.');
f['filename'].focus();
return false;
};
</script>
And here's the HTML form:
<form action="something.php" method="post" name="myForm" onsubmit="return Checkfiles(this);">
<input type="file" name="filename" accept="/image*/">
<input type="submit" name="submit">
</form>
Thanks.

Do something like:
document.querySelector('form[name="myForm"] input[type="submit"]').click();

Related

Submitting forms automatically when the content of a text box changes

I am developing a facial recognition system. When i capture image with my webcam the url is loaded into a text box in a form. Now i want the form to submit and process the php if it is submnitted. Here is my form
<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post" enctype="multipart/form-data" id="frmsubmit">
<input type="text" class="form-control input-sm" id="imgsrc" name="imgsrc">
<input type="submit" value="AUTHENTICATE" class="btn btn-primary" data-loading-text="Loading..." name="send" id="submit">
</form>
AND MY JAVASCRIPT
<script language="JavaScript">
webcam.set_api_url( 'present.php' );
webcam.set_quality( 100 ); // JPEG quality (1 - 100)
webcam.set_shutter_sound( true ); // play shutter click sound
webcam.set_hook( 'onComplete', 'my_completion_handler' );
function take_snapshot(){
// take snapshot and upload to server
document.getElementById('upload_results').innerHTML = '<h1>Uploading Image To Database...</h1>';
webcam.snap();
}
function my_completion_handler(msg) {
document.getElementById("imgsrc").value=msg;
// extract URL out of PHP output
if (msg.match(/(http\:\/\/\S+)/)) {
// show JPEG image in page
document.getElementById('upload_results').innerHTML ="<div class='alert alert-success fade in'> <i class='icon-remove close' data-dismiss='alert'></i> <strong>Success!</strong>Image Captured And Uploaded Successfully </div>";
document.getElementById('upload_img').innerHTML ="<img src="+msg+" class=\"images\">";
// reset camera for another shot
webcam.reset();
document.getElementById('frmsubmit').submit();
}
else {alert("PHP Error: " + msg);
}
}
</script>
AND PHP CODE
if(isset ($_POST["send"]))
{
Use submit button click trigger for example
document.getElementById("submit").click();
you are using document.getElementById('frmsubmit').submit(); but you don't have any form with this id but you have submit button with id submit. so this code will work for you.
if you give the form an id
<form action="someaction" method="post" id="someform">
You can trigger the submit event with jQuery
$('#someform').trigger('submit');
or
$('#someform').submit();
Try this...
$('#imgsrc').on('change', function(){
$(this).parent().submit();
})
You can add the attribute onchange to the text box
onchange="this.form.submit()"

Validate all form data before submitting

I have created a form in HTML and have use onblur event on each and every field and it is working very fine. The problem is when i click on submit button(which will send data to a servlet) the data is submitted even if it is invalid. Here is an example.
<html>
<head>
<script>
function check()
{
if(checkName()==true)
return true;
else{
alert('vhvh');
return false;
}
}
function checkName()
{
var uname=document.enq.Name.value;
var letters = /^[A-Za-z, ]+$/;
if(uname.match(letters))
{
document.getElementById('Name').style.borderColor = "black";
return true;
}
else
{
document.getElementById('Name').style.borderColor = "red";
//alert('Username must have alphabet characters only');
//uname.focus();
return false;
}
}
</script>
</head>
<body>
<form name="enq" method="post" action="Enquiry" onsubmit="check()">
<input class="textbox" id="Name"style="margin-top:10px;font-size:16px;" type="text" name="Name" placeholder="Full Name" onblur="checkName()" required /><br><br>
<input class="button" type="submit">
</form>
</body>
</html>
How can i resolve this issue?
use
<input class="button" type="button">
and put a onclick event like this:
<input class="button" type="button" onclick="this.submit()">
so you can manipulate data before you subimit it.
There is an "onsubmit" event that allows you to control form submission. Use it to call your validation functions, and only then decide if you want to allow the user to submit the form.
http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html
You have to use it in the following way if you want it to prevent the form submission:
<form onsubmit="return check()">

How to make this hta create text file only once value is submitted

I have an hta file that writes to a text file using a form and some javascript.
The form's text field has id of keyword_id which is used by the JS, and directory is the value of the hidden field.
How do I change the JS to only create TEST.txt when user clicks submit?
The code also opens a new C: window everytime I click submit, what's with that?
Here is the html form & javascript code:
HTML:
<div class="tab-content">
<div id="signup">
<h1>Type any keyword(s):</h1>
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
<span class="req"></span>
</label>
<input type="text" required autocomplete="off" id="keyword_id" />
<input type="hidden" name="write" value="C:\Users\ME\Desktop\TEST.txt" id="write_id"/>
<button type="submit" onclick="Writedata()" class="myButton"/>Auto Search</button>
</div>
</div>
Javascript
<script language="javascript">
function Writedata() {
var fso = new ActiveXObject("Scripting.FileSystemObject");
var write_id;
write_id = document.getElementById('write_id').value ;
var s = fso.CreateTextFile(write_id, true);
s.WriteLine(document.getElementById('keyword_id').value);
s.Close();
}
</script>
You've <form action="/" method="post"> and the opened C folder is a response to the form submission.
Most likely you actually don't need the form to be submitted, hence you can omit the attributes in the form tag, and prevent the submission by changing the button type to "button". It's also possible to prevent the default action of button type="submit" by doing this:
function Writedata () {
:
window.event.returnValue = false;
window.event.cancelBubble = true;
}

Object name for <input type=file?

on my html I have this tag for user browse a file from their computer, like this
*<form action="SamePageUpload.php" method="post"
enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="FINISH" onClick="echoHello()">
</form>*
by hit Submit button is clicked it will trigger 'echoHello()' js function, I want to pass the image to a php file SamePageUpload.php
*
<script>
function echoHello()
{
var url = "SamePageUpload.php";
var cv = ????;
$.post(url, {contentVar: cv}, function(data){
$("#alertDiv").html(data).show();
});
}
</script>*
but I don't know what ???? should asign to cv, I want to know what's the variable that represent the image file user choose? Please help, thank you

Problem while calling a javascript function using jsp

<form name='frm' action="Readcsvv" enctype="multipart/form-data" method="POST" >
<input type="file" name="file1"><br><br>
<input type="Submit" value="Upload File" onclick="showProgress()" method="POST">
<script>
function showProgress() {
if(document.frm.file1.value == "")
{
alert('Please upload a file');
}
else
{
document.getElementById('progress').style.display = 'block';
}
}
</script>
In my jsp file I have the above code. If there is no file selected the alert('Please upload a file') is displayed successfully . But it calls the servlet program Readcsvv and goes to the next page.
After diplaying the alert box i want to program to be in same page. What should I do for that?
<input type="Submit" value="Upload File" onclick="return showProgress()" method="POST">
use this with return false
Try below,
<form name='frm' action="Readcsvv" enctype="multipart/form-data" method="POST" >
<input type="file" name="file1"><br><br>
<input type="Submit" value="Upload File" onclick="return showProgress();" method="POST">
<script>
function showProgress() {
if(document.frm.file1.value == "")
{
alert('Please upload a file');
return false;
}
else
{
document.getElementById('progress').style.display = 'block';
return true;
}
}
</script>
Try this:
<form name='frm' action="Readcsvv" enctype="multipart/form-data" method="POST" onSubmit="return false;">
If this were jQuery you would have to return false at the end of an onClick event handler. I would try return false;.
You also need to change your onclick attribute to be an onsubmit attribute on the form element.

Categories

Resources