HTML5 Form Submit

Question

I am trying to get a form to submit an action to an ip address without open the ip address.

So, when I hit the submit button I want it to send the post command to the ip (in this case 192.168.0.1) and just refresh the current page.

<div data-role="main" class="ui-content">
<form method="POST" action="http://192.168.0.1/">
<input type="submit" name="parser" value="thisguy"/>
</form>
</div>

My script that runs on submit:

<script src="http://ajax.googleapis.com/ajax/liubs/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $('form.ajax').on('submit', function() {
        var that = $(this),
            url = that.attr('action'),
            method = that.attr('method'),
            data - {};

        that.find('[name]').each(function() {
            var that = $(this),
                name = that.attr('name'),
                value = that.val();
            data[name] = value;

            $.ajax({
                url: url,
                type: method:,
                data: data,
                success: function(response) {}

            });

        });

        return false;
    });
</script>

Right now it submits the post and tries to open 192.168.0.1 as a webpage. Can someone help me out either by providing code with an explanation or pointing me to the command?

Any help is appreciated.

Answer 1

Well, you can refresh the page after the POST is done in success method

success: function(response) {
  window.location.reload();
}

Also do not forget to disable the form default behavior with

 $('form.ajax').on('submit', function(event) {
   event.preventDefault();
   .
   .
 });

See documentation for more info

Answer 2

I have done correction to your code.

<script language="javascript" type="text/javascript">
    $('form').on('submit', function(e) {
        e.preventDefault();
        var that = $(this),
            url = that.attr('action'),
            method = that.attr('method'),
            data = {};

        that.find('[name]').each(function() {
            var that = $(this),
                name = that.attr('name'),
                value = that.val();
            data[name] = value;

            $.ajax({
                url: url,
                type: method,
                data: data,
                success: function(response) {}

            });

        });

        return false;
    });
</script>

Answer 3

You need to prevent the default action (using e.preventDefault() )

$('form.ajax').on('submit', function(e) {
    e.preventDefault(); // Prevent default submit action (that is, redirecting)
    var that = $(this),
        url = that.attr('action'),
        method = that.attr('method'),
        data = {};

    that.find('[name]').each(function() {
        var that = $(this),
            name = that.attr('name'),
            value = that.val();
        data[name] = value;

        $.ajax({
            url: url,
            type: method:,
            data: data,
            success: function(response) {}

        });

    });

    return false;
});

Answer 4

To enable debugging, you should wrap the whole submit handler in a try/catch because without it, errors will cause the default handler to submit the form, masking the errors. After the try/catch you can return false, so the page stays put.

<script src="http://ajax.googleapis.com/ajax/liubs/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $('form.ajax').on('submit', function() {
        try {
            var that = $(this),
                url = that.attr('action'),
                method = that.attr('method'),
                data - {};

            that.find('[name]').each(function() {
                var that = $(this),
                    name = that.attr('name'),
                    value = that.val();
                data[name] = value;

                $.ajax({
                    url: url,
                    type: method:,
                    data: data,
                    success: function(response) {}

                });

            });
        }
        catch (err) {
            console.log( 'submit handler error: ' + err.message );
        }

        return false;
    });
</script>

Answer 5

You just had couple of typo, like - instead of = and extra : , else your code is fine, below is working example.

 $(function(){ $('form.ajax').on('submit', function() { var that = $(this), url = that.attr('action'), method = that.attr('method'), data = {}; that.find('[name]').each(function() { var that = $(this), name = that.attr('name'), value = that.val(); data[name] = value; $.ajax({ url: url, type: method, data: data, success: function(response) { alert('posted') } }); }); return false; }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div data-role="main" class="ui-content"> <form method="POST" action="http://192.168.0.1/" class="ajax"> <input type="submit" name="parser" value="thisguy"/> </form> </div> My script that runs on submit: