Search code examples
javascriptphpjqueryjqueryform

jQuery Submit form if change input value


I'm used jquery.form plugin, it's working and good but when change input value.. it's submitted good! but redirect me to my uploader.php file, i don't want redirect me, i need to get result in div.result,

to understand me, please look to my code:

HTML

<form id="uploader" action="uploader.php" method="post" enctype="multipart/form-data">
    <input id="file" type="file" name="uploader" value="" draggable="true">
    <input name="submit" type="submit" class="submit" value="Upload">
    <div class="result"></div>
</form>

uploader.php file:

<?php
    if( isset($_POST['submit']) and $_SERVER['REQUEST_METHOD'] == "POST" ){
        echo 'done!';
    }
?>

jQuery code:

jQuery(document).ready(function() {

    $('#uploader').change(function(){

        $(".result").html('');

        $(".result").html('wait..');

        $("#uploader").ajaxForm({
            target: '.result',
            success: function() 
            {
                $('.result').hide().slideDown('fast');
                $('#uploader')[0].reset();
            },

        });

    });

});

I need to echo 'done' in .result div, i don't want to redirect me to uploader.php page.


Solution

  • Working with .ajaxSubmit({})

    jQuery(document).ready(function() {
    
        $('#file').change(function() {
    
            $(".result").html('');
            $(".result").html('wait..');
    
            $("#uploader").ajaxSubmit({
                target: '.result',
                success: function() 
                {
                    $('.result').hide().slideDown('fast');
                    $('#uploader')[0].reset();
                },
            });
    
        });
    
    });
    

    Thanks everybody.