how to make the file upload selection block - javascript

I currently want the user to upload a file for some processing.
So, I have a form element as follows:
<form action="{{ url_for('test') }}" method="post" onSubmit="return submitDocument()">
<button class="ui left floated positive submit button" id="upload-button" type="submit">Upload Document</button>
</form>
There is a corresponding file input object as:
<input type="file" (change)="fileEvent($event)" class="inputfile" id="embedfileinput" accept="image/*, application/pdf, application/msword" style="display:none"/>
and then I have the javascript as:
function showProcessing() {
$('#processing').dimmer('show');
return true;
}
function submitDocument() {
document.getElementById('embedfileinput').click();
showProcessing();
return true;
}
The problem is that as soon as I click the upload button, the form gets submitted. What I would like to do is trigger the submission task after the file has been selected.
Is there a way to make this file selection blocking?

A few things. As soon as you click the submit button and the button is inside the form tag, your form is gonna be submitted. That's default behavior. To prevent it, put a onclick="clickListener(event)" in your button and call event.preventDefault() to avoid this behaviour. Second, doing so will NOT trigger a onsubmit event in you form. So there's no sense having such attribute in the form. Try this:
<form action="{{ url_for('test') }}" method="post">
<button class="ui left floated positive submit button" id="upload-button" type="submit" onclick="clickListener(event)">Upload Document</button>
</form>
in your javascript:
function clickListener(e) {
// call your custom code here
e.preventDefault();
}
Note that I removed onsubmit attibute from the form tag.
You can always call form.submit() to submit manually.
More details https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

Related

Send form with both triggers for action and onclick

I need to connect one button to 2 activities, in this case the form argument "action" and button argument "onclick" inside a form.
The forms "action" is PHP-based class and the button's "onclick" is connected to a javascript.
Environment:
The question is generic but to clarify I will use the form in later stage in a Laravel 8 environment. This means that the handling of form "action" is being taken care of by Laravel through a route. The onclick should be triggered and the javascript is physically positioned at the end of the Laravel blade view.
The problem:
I noticed that having the button inside the form, runs the form "action", but prevents the button argument "onclick" to trigger the javascript. If put the mentioned button outside of form, then one can trigger the form, and the button outside the form but ends up with need of 2 buttons which break simplifying the user flow.
Question:
How can I trigger both form "action" and the javascript function from one button? Note! It is not needed that javascript is being trigger by "onclick" if there are other ways to trigger the javascript.
Test-1: Basic form
<form
method="post"
action="/payment-checkout"
>
<button type="button" name="button" onclick="initCheckout()">Send</button>
</form>
Result test-1:
forms action is being executed, but not javascript.
Test-2: Attempt to solve problem using form attribute "onsubmit":
<form
id="myForm"
method="post"
action="/payment-checkout"
onsubmit="submitFormFromJavascriptFunction()"
>
<input type="submit" name="" value="Submit">
</form>
function submitFormFromJavascriptFunction() {
// Execute this...
}
document.getElementById("myForm").onsubmit = function() {submitFormFromJavascriptFunction()};
Result test-2:
forms action is being executed, but not javascript.
Try to trigger sumbit event on a button click manually by using
document.getElementById("myForm").submit();
from your onclick function
Example
function submitform() {
console.log('Inside the onclick function');
document.getElementById("myForm").submit();
}
<form action="/action_page.php" id="myForm">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<button type="button" onclick="submitform()">Submit</button>
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
Below is an example of doing a conventional html form submit with javascript execution on submit of the form.
The form gets submitted based on the return value of the javascript function.
Javascript function is attached to onsubmit event of the form.
button is a normal submit button with no event handler attached to itself.
//this function getts called on submission of the form via submit button.
//Its return value dictates whether form will be submitted or not
function checkQuery(){
var query = document.getElementById('myQuery');
if(query.value==""){
alert("Please enter your search query")
return false; //form will not submit
}
return true;//form will get submitted and laravel will see that submit button was pressed
}
<form
method="get"
action="https://stackoverflow.com/search" onsubmit="return checkQuery();"
>
<input type="text" id="myQuery" name="q" placeholder="your search query here">
<button type="submit" name="button">Search Now</button>
</form>
Your Test 2 should be like this:
<form
id="myForm"
method="post"
action="/payment-checkout"
onsubmit="return submitFormFromJavascriptFunction()"
>
<input type="submit" name="" value="Submit">
</form>
function submitFormFromJavascriptFunction() {
console.log("submitFormFromJavascriptFunction is getting called");
return true // or false based on your logic
}
// no need for below line
//document.getElementById("myForm").onsubmit = function() //{submitFormFromJavascriptFunction()};

HTML/JS Form being submitted twice

I am using node.js/express to create a webpage.
I currently have a form with some input and a submit button which is trigger by the click of another button currently on the page
This is the code for my form:
<form name= "form" id="form-id" action="http://localhost:1337/process_post" method="POST">
<input type="hidden" name="hiddentext" id="textarea"/>
<input hidden type="submit" name="submitbutton" id="submit_button"/>
</form>
This is my button (which triggers the submit for the form to be clicked during the onclick event)
<INPUT type="button" id="button-id" value="Save" onclick="this.disabled=true;load_page('form-id')" />
This is my JS script to click the submit button
function load_page(formId){
document.getElementById("submit_button").click();
}
The issue I have is that the form is being submitted twice. I am unsure why this happens and how to fix the issue. Any tips?
You need to return false in your onclick attribute so as to prevent the default action, which is to submit the form (which you're already doing). Like this:
<INPUT type="button" id="button-id" value="Save" onclick="this.disabled=true;load_page('form-id');return false;" />

Best way to form submission without using form action in JavaScript

I am building a PhoneGap application using JavaScript, HTML and jQuery Mobile.
All the HTML is in the same file, separated into <div data-role="page"> as pages.
Several pages have a form including one or more text/selection input and a submit button.
The submit is not a traditional form submit button but a button which using onClick runs a JavaScript function which can do many things.
I want the form to have this features:
When pressing the button and after running the function, clear the form.
In some cases the function should change the page.
The enter button on one of the inputs should submit the form (Activate the function).
Should I use the form HTML tag? If so what should I use for action? How to clear the form?
etc.
If you are trying to bind onClick to an input type="submit" then you're gonna have a bad time.
Unfortunately even if you return false or e.preventDefault when clicking that button, the form still sends the submit trigger so once your onClick code is finished then it will submit.
Example:
<form action="woot.php" method="POST">
<input type="submit" value="submit" onClick="alert('You clicked me! How could you?! It's cool the form will still go to woot.php. return FALSE wont help you either.'); return FALSE;">
</form>
What you probably want to do:
<form action="woot.php" method="POST">
<input type="submit" value="Submit" onSubmit="alert('You aint goin nowhere!'); return FALSE;">
</form>
What you should do:
<form action="woot.php" method="POST">
<input type="button" value="Button" onClick="alert('Away with you!'); window.location = 'http://www.google.com/';">
<input type="button" value="Button" onClick="someCoolFunction();">
</form>
I wouldn't use type="button", especially if you want to have the best chance of the form submitting when the user presses enter.
Use your regular form <input type="submit"> and then your JavaScript:
$('form').submit(function(e) {
// all your form handling here;
if (your_form_was_validated_and_handled) {
$('input[type!="submit"]').val('');
}
e.preventDefault();
});
Generic fiddle: http://jsfiddle.net/
You can still use the form tag, as it's useful for markup.
Just make sure that your buttons have attribute
type="button"
otherwise the button will submit the form by default.
To reset the form:
function resetForm() {
$('#form').each(function(){
this.reset();
});
}

Submit form to another page (which is different from the page used in ACTION)

I have a form like this:
index.php
<form method="post" action="send.php">
<textarea name="msg" id="msg"></textarea>
<input type="submit" value="Send" />
</form>
So, if I enter something in textarea and clicked on "Send", it is submitted to "send.php" page. But I want to include another button for previewing it. That is, when this button is clicked, the above form is submitted to "preview.php" which will be opened in a new blank window/tab (original page ie. index.php will be there intact). This is to display a preview of the message, that the user is going to send.
I do not know how to do this.
Use Javascript to temporarily change the action and target:
<form method="post" action="send.php" id="idOfForm">
<textarea name="msg" id="msg"></textarea>
<input type="submit" value="Send" />
</form>
<button onclick="doPreview();">Preview</button>
<script type="text/javascript">
function doPreview()
{
form=document.getElementById('idOfForm');
form.target='_blank';
form.action='preview.php';
form.submit();
form.action='send.php';
form.target='';
}
</script>
There is now an attribute for the submit input that handles this:
<input type="submit" formaction=”differentThanNormalAction.php”>
Give your form an ID (form1). The action of the current form can be controlled like this:
function setPreview() {
$('#form1').attr('target','_blank')
$('#form1').attr('action','http://yourpreviewurl.php')
$('#form1').submit()
}
function setSubmit() {
$('#form1').attr('target','')
$('#form1').attr('action','http://yourposturl.php')
$('#form1').submit()
}
Have two buttons, both type="button", one to call setPreview and another to call setSubmit
You can use JavaScript to change the action of the form when the button is clicked and then submit it.
Or simply submit the form via AJAX and then redirect after you get a response.
<form onreturn="someJavascriptFunction()" action="" method="">
creating a js function able to open this preview page

Unbinding form submit to iframe with jQuery

I have a PHP page with multiple forms, some of which submit to an iframe (separate iframe for each form) to allow for ajax-like file uploads. I don't want the user to have to click a "Submit" button after selecting each file, so I am submitting the form using jQuery's .submit() function inside of a .change() event on the file input element.
The individual file uploads work fine.
However, after all the individual files are submitted, the user must click on a final button that acknowledges they have reviewed the form data as displayed. This last button is just an independent button. It is not a submit button, and it is not associated with any form. When the page initially loads, this button works fine.
However, once the .submit() function is called for the file uploads, the final button seems to be bound to the other form's action.
Roughly, the structure of the page is as follows:
<form id="finalForm" target="finalTarget" action="uploadFile.php?action=final" method="post" enctype="multipart/form-data">
<div id="finalSelect">
<input type="file" name="finalDraft" id="finalDraft" value="file" />
<input type="submit" value="Submit" id="finalSubmitButton" />
</form>
<iframe id="finalTarget" name="finalTarget" src="#" style="width:0px; height:0px; border: 0px"></iframe>
<form id="signForm" target="signTarget" action="uploadFile.php?action=sign" method="post" enctype="multipart/form-data">
<div id="signSelect">
<input type="file" name="signPage" id="signPage" value="file" />
<input type="submit" value="Submit" id="signSubmitButton" />
</form>
<iframe id="signTarget" name="signTarget" src="#" style="width:0px; height:0px; border: 0px"></iframe>
<button type="button" id="mainSubmitButton">Submit</button>
the jQuery is as follows:
$("#mainSubmitButton").click(function(){
document.location.href='pageName.php';
});
$("#finalDraft").change(function(){
$("#finalForm").submit();
}
after doing a final draft submit, when I click on the mainSubmitButton it loads uploadFile.php.
Does anybody know why this is happening, and what I can do to correct the problem?
Thanks in advance for your help.
Kate
Return "false" from the button click to cancel any default behaviour.
$("#mainSubmitButton").click(function(){
document.location.href='pageName.php';
return false;
});
the reason for this, I think is because the element button you used is acting as a submit button, not as you intended it to act - like a regular button. Just switch it to
<input type="button">
and you should be all set.
check out http://reference.sitepoint.com/html/button for more info
Reference implementation.

Categories

Resources