• Hi guys,

    I’m using the built-in wordpress AJAX handler to run all of my front-end AJAX.

    I currently have a contact form in place which works perfectly. Now I want to add a file upload option to it, however, by default, $_FIELS is not sent.

    I’ve seen some solutions online involving either creating an iframe or implementix AjaxForm jQuery but I don’t know how to implement them properly withing WordPress.

    This is my current jQuery code:

    $('#request-newjob-form').on('submit', function(e){
    	var formID = '#' +$(this).attr('id');
    	var formParrentID = '#' +$(this).parent().attr('id');
    
    		$('<div/>', {style:'display:none;'}).appendTo($(formParrentID)).append($('<div/>', {id:'request-form-loading', class:'fancybox-alert', text:ajax_request_submit.loadingmessage}));
    		$.fancybox({href:'#request-form-loading'});
            //$(formParrentID +' p.status').show().text(ajax_request_submit.loadingmessage);
    
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: ajax_request_submit.ajaxurl,
                data: {
                    'action': 'prp_email_newjob_aj',
    				'formData' : $(formID).serialize(),
    				'security' : $(formID +' #security').val(),
     		 },
                success: function(data){
    				$('<div/>', {style:'display:none;'}).appendTo($(formParrentID)).append('<div id="request-form-success" class="fancybox-alert" style="max-width:560px;"><h3 class="no-margin-top">Thank you for submitting your artwork request.</h3>Please allow 12 hours for processing of your request. If you have an urgent request please contact Adriana Poglia or Rebecca Adair on 0207 420 3550</div>');
    				$.fancybox({type:'inline', href:'#request-form-success'});
                },
    			error: function(data){
    				$('<div/>', {style:'display:none;'}).appendTo($(formParrentID)).append('<div id="request-form-error" class="fancybox-alert" style="max-width:560px;"><h3 class="no-margin-top">We have encountered an error. Please try again later.</div>');
    				$.fancybox({type:'inline', href:'#request-form-error'});
    			}
            });
            e.preventDefault();
        });

    How should I change it?

    Thank you.

    [No bumping. If it’s that urgent, consider hiring someone.]

  • The topic ‘Ajax form submit with file upload’ is closed to new replies.