Solved

submitting multiple forms with one click

Posted on 2014-09-15
13
205 Views
Last Modified: 2014-09-16
Hi,

I have created a page using a third party library that requires me to create four forms to four create tabs. I was using AJAX to process the forms all together using serialize. However, i recently added a fourth form as strictly one file input and noticed that AJAX has problems with this sort of input. I did a little research and people suggested that creating a FormData object would alleviate the file problem.  i tried adapting my original code but

Original Code:
//SUBMIT THE FORMS
	submitForms = function(text){
		
		//TEST TO MAKE SURE THERE IS A FILE
		var file = $('#avatar').val();
		if( (file !='') || (file.length > 0) ){
		
			var dataString = $("#form1, #form2, #form3, #form4").serialize();
			$.ajax( {
			  type: 'POST',
			  url: 'ajax/reg.php' + '?' + text,
			  data: dataString,
			  success: function(data) {
				  $('#message').html(data);
				  
				console.log(data);
			  } 
			})
		
		}
	}

Open in new window


I tried changing dataString to
var dataString = new FormData("#form1, #form2, #form3, #form4");

it got an error (unfortunately, im not on my computer right now so im not exactly sure what the error is)

I tried just creating the FormData object with no params and got the same error so i think i am using it wrong.

I do not necessarily need ajax to process the form. I have all the actions of the form set to the current page so i could do the processing there. However i would need a way to submit all four forms. i was thinking

<?php
//THE USER LANDS ON PAGE
if(empty($_POST)){
//DISPLAY FORMS 

//USED JQUERY TO SUBMIT ALL FOUR FORMS
}else{
//PROCESS FORMS  

}
?>

<script>

$('#final_btn').on("click", function(e){
    var file = $('#avatar').val(); //test to make sure there is a value in the file input
    if( (file !='') || (file.length > 0) ){

        $('#form1').submit();
        $('#form2').submit();
        $('#form3').submit();
        $('#form4').submit();

   }
});

</script>

Open in new window


I have not tried the above code

any help or suggestions would be much appreciated

thanks

Jayme
0
Comment
Question by:M. Jayme Nagy
  • 7
  • 6
13 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
Take a look to this plugin : http://malsup.com/jquery/form/
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
Else try this :

var formdata = new FormData();
jQuery.each($(':file')[0].files, function(i, file) {
    formdata.append('file-'+i, file);
});
jQuery.each($('[name]').not(":file"), function(i, field) {
   formdata.append(field.attr("name"), field.val());
});
			$.ajax( {
                          contentType: false,
                          processData: false,
			  type: 'POST',
			  url: 'ajax/reg.php' + '?' + text,
			  data: formdata,
			  success: function(data) {
				  $('#message').html(data);
				  
				console.log(data);
			  } 
			})

Open in new window

0
 
LVL 6

Author Comment

by:M. Jayme Nagy
Comment Utility
Hi,

I tried your second function and converted it to this

submitForms = function(text){
        //TEST TO MAKE SURE AVATAR IS NOT EMPTY
        var file = $('#avatar').val();
        if(text =='finish'){
    		if( (file !='') || (file.length > 0) ){
    			return;
                alert('fail');
            }
    	}
        
        var formdata = new FormData();
        jQuery.each($(':file')[0].files, function(i, file) {
            formdata.append('file-'+i, file);
        });
        jQuery.each($('[name]').not(":file"), function(i, field) {
           formdata.append(field.attr("name"), field.val());
        });
        
        $.ajax( {
          contentType: false,
          processData: false,
          type: 'POST',
          url: 'ajax/reg.php' + '?' + text,
          data: formdata,
          success: function(data) {
              $('#message').html(data);
              
            console.log(data);
          } 
        });
    }

Open in new window


this function  give me an error on the following line

formdata.append(field.attr("name"), field.val());

which spits out
TypeError: field.attr is not a function
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
Comment Utility
replace : field
by : $(field)
0
 
LVL 6

Author Comment

by:M. Jayme Nagy
Comment Utility
Hi,

i just noticed that on my select form input the js is only passing the last option and not the value the user has selected. do you know why>?
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
replace :
        jQuery.each($('[name]').not(":file"), function(i, field) {
           formdata.append(field.attr("name"), field.val());
        });

Open in new window

by :
jQuery.each($("#form1, #form2, #form3, #form4").not(":file").serializeArray(), function(i, field) {
      formdata.append(field.name, field.value);
})

Open in new window

0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 6

Author Comment

by:M. Jayme Nagy
Comment Utility
Additionally, i only need to upload one file so i do not think i need the each loop on the file or do i?
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
I will not eat your dog, let it :)
but you right
0
 
LVL 6

Author Comment

by:M. Jayme Nagy
Comment Utility
HI,

Im not exactly sure what you mean

should i change
        jQuery.each($(':file')[0].files, function(i, file) {
            formdata.append('file-'+i, file);
        });

Open in new window


so that it only accepts one file?
something like
 formdata.append($(':file')[0].files);

Open in new window


im not sure if the above
0
 
LVL 6

Author Comment

by:M. Jayme Nagy
Comment Utility
im not sure if the above works
0
 
LVL 6

Author Comment

by:M. Jayme Nagy
Comment Utility
Got it !

i changed
 jQuery.each($(':file')[0].files, function(i, file) {
            formdata.append('file-'+i, file);
        });

Open in new window

to
formdata.append('avatar', $(':file')[0].files[0]);

Open in new window


and it seems to work fine.
0
 
LVL 6

Author Comment

by:M. Jayme Nagy
Comment Utility
thanks a lot!!!
BIG HELP
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
:)
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now