jQuery Submit form if change input value

Question

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.

I don't think that should happen unless you click the Submit button. — Barmar, Nov 13 '15 at 23:18
When you click the Submit button it should redirect, when you use `.ajaxForm()` it shouldn't. — Barmar, Nov 13 '15 at 23:23
#updloader is a selector for the form element #file would target the input field — axel.michel, Nov 13 '15 at 23:24
Youl'll need to use the file selector for the change event, you'll bind ajaxForm to the form and as mentioned you'll need to submit the form in order to make ajaxForm happen. Means something simular to this dummy code: http://jsfiddle.net/9w7e4o46/ — axel.michel, Nov 13 '15 at 23:43
I used the same code which you have posted it works fine. http://jsfiddle.net/9w7e4o46/1/ I have included jquery.form in fiddle — Susheel Singh, Nov 14 '15 at 02:51

score 0 · Answer 1 · answered Nov 14 '15 at 00:30

Is it actually doing anything when you change the input value? I mean is it submitting the form? Or does that only happen when you click the submit button?

It seems to me that your script doesn't really do anything. It listens for an onchange event on the form element, but that event, in my experience, is never fired on a <form>. So you just have an HTML form submitting with no aid of script.

On top of that I'm not sure you can submit a multipart/form-data form with script, for security reasons. Maybe I'm wrong about that, but either way, how about using an iframe instead?

<form id="uploader" action="uploader.php" method="post" enctype="multipart/form-data" target="resultframe">
    <input id="file" type="file" name="uploader" value="" draggable="true">
    <input name="submit" type="submit" class="submit" value="Upload">
    <div class="result"><iframe name="resultframe" onload="$('.result').hide().slideDown('fast');"></iframe></div>
</form>

To be honest I don't know if an onload works on an iframe these days, I haven't tried it in years. Failing that, remove <div class="result"> and the corresponding </div> and put them into the output of uploader.php, along with the animation script.

He wants to use jquery.form.js His code already works fine. may be he is not including the related js. — Susheel Singh, Nov 14 '15 at 02:56

score 0 · Accepted Answer · answered Nov 14 '15 at 14:26

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.

score 0 · Answer 3 · answered Nov 15 '15 at 14:13

As your form's action is uploader.php so,the page will be redirected to uploader.php after submitting. so you need change action and use ajax to update the div.result. check these links once. http://www.formget.com/form-submission-using-ajax-php-and-javascript/ http://blog.teamtreehouse.com/uploading-files-ajax

jQuery Submit form if change input value

3 Answers3