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.

Theres a type-o in your code at "type: method:," an extra colon — sjm, Nov 23 '15 at 21:03
Also what’s the deal with that `data - {}` line? Have you used [JSHint](http://jshint.com/) before asking this question? — Sebastian Simon, Nov 23 '15 at 21:05
If you add preventdefault() into ur ajax function the page wont/need refreshing. If you do want the page to refresh you could just write location =location after the ajax req has completed. — TarranJones, Nov 23 '15 at 21:10
@Xufox I have not and I am running the code through it now! Thank you! — Jeremiah Landi, Nov 23 '15 at 21:44
@Nimmi I was told to do that. Can you explain? I am using the form now to capture the data from a user and submit it. I am planning on having more forms for submissions. — Jeremiah Landi, Nov 23 '15 at 21:45
@JeremiahLandi you can just use a div to wrap all the input fields and then if u press a button call a function and this function gets the value (by id or what ever). Then you can continue with ajax; — Nimmi, Nov 23 '15 at 21:47

score 0 · Answer 1 · answered Nov 23 '15 at 21:06

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

Avinash Jain · Answer 2 · 2015-11-23T21:19:26.870

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>

@TotalDotoNeto Thanks! – Jeremiah Landi Nov 23 '15 at 21:53 — Jeremiah Landi, Nov 23 '15 at 21:53

nathanhleung · Accepted Answer · 2015-11-23T21:11:28.517

0

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

edited Nov 23 '15 at 21:11

answered Nov 23 '15 at 21:08

nathanhleung

506
6
14

1

I think that `return false` would be enough. – Flash Thunder Nov 23 '15 at 21:09
@Flash `preventDefault()` and `return false` are different — see http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – Stephen P Nov 23 '15 at 21:12
@StephenP Should it be event.preventDefault(); or e.preventDefault();? – Jeremiah Landi Nov 23 '15 at 21:49
@Jeremiah `preventDefault()` is a method on the event object. If your event parameter name is ***e*** then you would indeed invoke it as `e.preventDefault()` – Stephen P Nov 23 '15 at 21:51
@StephenP in jQuery documentation, they say that return false is enough... I know that preventDefault() is totally different thing... but... `submit` event is a bit... "virtual". – Flash Thunder Nov 23 '15 at 22:08
1

@Flash in a jQuery context `return false` is actually more "severe" than preventDefault() since it also causes `e.stopPropagation()`, not only preventing the default handling but preventing further event propagation - see [this answer](http://stackoverflow.com/a/1357151/17300) to the question I linked earlier. In that sense I would say that "preventDefault() would be enough" and return false would be overkill. The questions to ask yourself before choosing are - do you want to stop other attached handlers from running? and do you want to stop the event bubbling? – Stephen P Nov 23 '15 at 22:37

score 0 · Answer 4 · answered Nov 23 '15 at 21:15

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>

Now that you mention it, I think starting the handler with `e.preventDefault()` might be an alternative if you want to avoid using try/catch. I've never tried that. — Chad, Nov 23 '15 at 23:21

score 0 · Answer 5 · answered Nov 23 '15 at 21:16

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:

HTML5 Form Submit

5 Answers5

Linked