Jquey ajax Form Submit

<div class="full_popup">
<section class="left_sec">
    <div class="img_holder">
        <form action="do_up.php" enctype="multipart/form-data" method="post" id="upload">
        <input type="file" id="file" name="file"> //input file
    </div>
</section>
<section class="right_sec">
<div class="body">

Details Inputs

<ul class="details">
    <li class="loc"><input type="text" id="geo" placeholder="place photo taked in"></li>
    <li class="disc"><textarea placeholder="Discription" id="disc"></textarea></li>
</ul>
</div>
<div class="footer">
    <button class="popup_post" type="submit">Post</button> //submit
    </form>  //ending form
</div>
</section>
</div>

I use jquery form plugin

and here it is how i initialize form

$('#upload').submit(function() { 
    $(this).ajaxSubmit()
});

The Problem is when i submit this form it doesn't take all values from inputs and when i put inputs directly after form tage it takes all so how can i do that with inputs inside different divs !!

Answers


Your <form> element is spanning multiple elements and it's not being closed properly. The browser will attempt to fix your HTML by closing the <form> element prematurely:

<section class="left_sec">
    <div class="img_holder">
        <form action="do_up.php" enctype="multipart/form-data" method="post" id="upload">
        <input type="file" id="file" name="file" />
        </form><!-- likely to be inserted by the browser to fix lack of closing tag -->
    </div>
</section>

You should wrap ALL your inputs with a single <form> element instead, i.e. by moving <form> several levels up your DOM tree so that all inputs whose values you want to submit are wrapped in within.

In other words:

<form action="do_up.php" enctype="multipart/form-data" method="post" id="upload">
    <div class="full_popup">
        <section class="left_sec">
            <div class="img_holder">
                <input type="file" id="file" name="file" />
            </div>
        </section>
        <section class="right_sec">                   
            <div class="body">
                <ul class="details">
                    <li class="loc"><input type="text" id="geo" placeholder="place photo taked in" /></li>     
                    <li class="disc"><textarea placeholder="Discription" id="disc"></textarea></li>
                </ul>
            </div>
            <div class="footer">
                <button class="popup_post" type="submit">Post</button>      
            </div>
        </section>
    </div>
</form>

Also, since .ajaxSubmit() (from the jQuery plugin jQuery Form) will replace the default submit actions, you should prevent default submission action from being followed through:

$('#upload').submit(function() { 
    $(this).ajaxSubmit()
    return false;
});

...or...

$('#upload').submit(function(e) { 
    $(this).ajaxSubmit()
    e.preventDefault();
});

p/s: You should use <!-- ... --> not // to escape comments in HTML.


// You can do it like this...
$( "#upload" ).submit( function() {

            var theData = null;
            // This will capture all form data
            theData =  $(this).serialize();

            var uploadDetails = {
                type:     "POST",
                dataType: "json",
                url:      "do_up.php",
                data:     theData,
                success:  responseHandlerFunctionNameWithoutBrackets
            };
            $.ajax( uploadDetails );
        } );

Need Your Help

AngularJS - Modal position -> center

angularjs modal-dialog position center

I would like to center my modal and the pictures within the modal, but atm I can only do it with a FIX position. If I do relative, my modal will go to the bottom of the page. I tried margin-left:au...

C Programming Exercise from the K&R Book

c kernighan-and-ritchie

Any idea why the following code doesn't print the amount of characters in the input?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.