Sending file upload form submit results to a specific DIV - javascript

I have a form with a fileupload input.
I would like the returned results of the URL the form submits to, to be returned in a specific DIV.
The below script works AOK for forms that do not have an input TYPE="FILE".
I suspect perhaps an issue with the .serialize in the $.post command perhaps?
Any ideas?
<script>
/* attach a submit handler to the form */
$("#&[l.formID]").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
url = $form.attr( 'action' );
/* Send the data using post and put the results in a div */
$('#unclickableDiv').fadeIn();
$.post( url, $("#&[l.formID]").serialize(),
function( data ) {
var content = data;
$( "#&[l.formTARGET]" ).empty().append( content );
$('#unclickableDiv').fadeOut();
}
);
});
</script>

Related

How to enable a button after the form is submitted using JavaScript

I am trying to enable a button once the form is submitted.
I can enable the button but I want to wait for the form to complete the process and then enable the button. I can wait for a few sec using setTimeout() and then enable the button but I don't want that. I want once the form has completed it's process then enable the button. I am not sure if this is a possible use case.
Form:
<input type=submit id="myButton" class="esignReports" value="Export E-Sign Information" onclick="disableReportButton(), enableReportButton()"/>
JS:
function disableReportButton() {
document.getElementById('viewIntegrationReport').submit();
document.getElementById('myButton').disabled = true;
document.getElementById('myButton').value = 'Please wait';
}
function enableReportButton() {
document.getElementById('myButton').disabled = false;
document.getElementById('myButton').value = 'Export E-Sign Information';
}
Thanks.
Prevent form submit event, then submit via ajax, eg. using jQuery $.post. Use .done (or success handler in $.ajax) to call your functions:
$("form").on("submit", function(e){
e.preventDefault();
$.post( /* your data here */ )
.done(function(){
// do stuff after post
disableReportButton();
enableReportButton();
};
});
An example with $.ajax, using success: Submit form via AJAX in jQuery
Try this in your app.js (your script file)
$( document ).ready(function() {
document.getElementById('myButton').hide();
function enableReportButton(callback) {
$("form").on("submit", function(e){
e.preventDefault();
callback();
});
}
enableReportButton( function() {
document.getElementById('myButton').show();
});
}

History.js first load

I'm using History.js with jQuery.
My page is a search engine.
The form is submitted via $.ajax() and the result is loaded in div#results with pagination.
A click on next page's link is handled by $.ajax too.
Each result is a link to another page.
When I first load my form, I want div#results to be empty. But when I click on result's link then the back button, I want the div#results with the same results.
$('.link_page').on('click', function(e){
e.preventDefault();
var page = $(this).data('page');
$.ajax({
url: '/search',
method: 'POST',
data: {
create_date : $('#create_date').val(),
page : page
}
}).done(function( html ) {
$( "#results" ).html( html );
History.pushState({results: html}, "Search", "/search");
});
});
History.Adapter.bind(window, 'statechange', function (evt) {
var state = History.getState();
$( "#results" ).html( state.data.results );
});
History.Adapter.onDomLoad(function(){
var state = History.getState();
History.replaceState({results: state.data.results}, "Search", "/search");
});
It works well but if I submit my form then I go to any pages of my site and finally I return to my form, the div#results is still filled with the previous search.

JavaScript form - Ajax is submitting twice

I had this JavaScript running on a testing host page(http://www.000webhost.com/), then I moved the form/site to another hosting page(https://www.one.com/). Suddenly the form is posted twice! I have been trying to add the following line e.stopPropagation(); to the code, right after e.preventDefault();, then noting is posted. If I only use e.stopPropagation(); - nothing is posted either.
$(document).ready(function() {
$('form').on('success.form.bv', function(e) {
var thisForm = $(this);
//Prevent the default form action
e.preventDefault();
//Hide the form
$(this).fadeOut(function() {
//Display the "loading" message
$(".loading").fadeIn(function() {
//Post the form to the send script
$.ajax({
type: 'POST',
url: thisForm.attr("action"),
data: thisForm.serialize(),
//Wait for a successful response
success: function(data) {
//Hide the "loading" message
$(".loading").fadeOut(function() {
//Display the "success" message
$(".success").text(data).fadeIn();
});
}
});
});
});
});
});
I am using 'success.form.bv', because I am using bootstrapvalidator in order to validate the form. I have not been able to combine the "Form is submitted twice" example code on the bootstrapvalidator with my code in order to only submit the form once.
What should I do in order to submit the form only once?

jQuery Submit Form on Enter Not Working

In the script below I've got the code to allow me to add a new line by pressing shift+enter but when I just press enter the code does nothing. I also get no errors. I've removed the resize caret so there is no need to mess with that. What is the bug in my code keeping me from submitting the form?
Disclaimer: yes I know there are multiple posts on this subject but none of them fix my problem so I'm hoping it's a new problem.
<script>
$('#myFormActivity .commentTextarea').keypress(function(event){
if (event.keyCode==13 && !event.shiftKey) {
event.preventDefault();
$( "#myFormActivity" ).submit(function(event1) {
alert("sent");
// Stop form from submitting normally
event1.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
activityid = $form.find( "input[name='activityid']" ).val(),
comment = $form.find( "textarea[name='comment']" ).val(),
url = "process/insertComment.php";
// Send the data using post
var posting = $.post( url, { activityid: activityid, comment: comment } );
// Put the results in a div
posting.done(function( data ) {
$(this).children('.commentTextarea').val('');
});
return false;
});
return false;
}
});
</script>
The class commentTextarea is the class assigned to the textarea element inside of the form which has the ID of myFormActivity.
What you are doing in your keypress event when you say
$( "#myFormActivity" ).submit(function(event1) {
is binding an event to the form submit, not triggering it. Something like (I haven't actually tested it) the following is more what you want I think (note the mime-type on the script tag and that the events should be bound in a document ready):
<script type="text/javascript">
$(function(){
$('#myFormActivity .commentTextarea').keypress(function(event){
if (event.keyCode==13 && !event.shiftKey) {
event.preventDefault();
$( "#myFormActivity" ).submit();
return false;
}
});
$( "#myFormActivity" ).submit(function(event1) {
alert("sent");
// Stop form from submitting normally
event1.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
activityid = $form.find( "input[name='activityid']" ).val(),
comment = $form.find( "textarea[name='comment']" ).val(),
url = "process/insertComment.php";
// Send the data using post
var posting = $.post( url, { activityid: activityid, comment: comment } );
// Put the results in a div
posting.done(function( data ) {
$(this).children('.commentTextarea').val('');
});
return false;
});
});
</script>

Using jquery form submission was working fine until I added other JS libraries

I was using jquery for form submission it was working fine but when I included it in with other javascript libraries the .ready works but other events don't.
$(document).ready(jQueryCodeOfReady);
function jQueryCodeOfReady()
{
// arrays of target tags ..... w.r.t id
var hashtable = new Array();
hashtable['frm'] = 'result';
hashtable['newaccount'] = 'content';
/********************** AJAX related Section Started ******************************/
function _(url , data ,dataType,type ,thetag)
{
/***Animation Code***/
$(thetag).html("<span style=\"font-family:sans-serif; color:#274d87; background:url('loader.gif') no-repeat; padding-left:80px; width:164px; height:32px; \">wait ... </span>");
/***Animation Code ended***/
$.ajax({
type: type ,
url: url ,
data: data,
dataType: dataType,
success: function(data)
{
// show content etc in this tag
$(thetag).html(data);
} // ajax call back function
});
return false;
}
/*************************************************** AJAX related Section endeed *****************************************************************/
alert('sendf');
/*************************************************** Events Section Started *****************************************************************/
// Form submission using ajax ... when event happens then specific code called
$("form").submit(function (e)
{
// don't perform default html event behaviour
e.preventDefault();
// get form attribute and the taag in which the result should be shown
var formid="#"+$(this).attr('id'); // identify the form
var formaction=$(this).attr('action'); // the path where to move ahead after this event occurs
var targettag="#"+hashtable[$(this).attr('id')]; // hashtable array declared upthere
// get form data
var formdata = $(formid).serialize();
// give serverCall
_(formaction,formdata ,"text/html","POST",targettag );
});
$("a.searchlink2").click(function (e){
var path=$(this).attr('href');
var formdata='';
e.preventDefault();
// give serverCall
_(path,formdata ,"text/html","POST",'#result');
});
}
You may take a look at the using jQuery with other libraries section of the documentation.

Categories

Resources