HTML5 Form Submit

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 c

Solution 1:

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;
});

Solution 2:

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

Solution 3:

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>

Solution 4:

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:

Solution 5:

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>