0

I asked for help earlier in the day around the e.preventDefault() method.

HTML5 Form Submit

I am having trouble selecting which method to select to go with "onchange=".

I have heard that I shouldn't use onchange because of browser issues in firefox and IE10+. I have found the following link that provides a great plethora of information, but maybe a little too much for me. Help deciphering would be greatly appreciated. Link and code follow.

Javascript select onchange='this.form.submit()'

Here is my current attempt. The idea is to have several sliders that can send their values when the user releases the slider. Is this a good idea or should I have this just on a 'submit' that does them all at once instead of individually? Any opinions welcome.

<form method="POST" action="http://192.168.0.1/" clas="ajax">
  <table style="width:100%">
   <input type="range" name="thisguy" onchange="this.form.submit()" value="0" min="0" max="100" step="10" data-highlight="true">
</form>

However, this method bypasses the javascript that would normally execute on the 'submit' action that I was using before off the 'submit' button. 

    <script language="javascript" type="text/javascript">
    $('form').on('submit', function(e) {
        try {
        event.preventDefault(); //Prevent form submission
        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) {
                window.location.reload();
                }

            });

        });
        }
        catch (err) {
            console.log ('submit handler error: ' + err.message );
            }
        return false;
    });
    </script>

Any suggestions on which possible way to approach this or helpful comments would help! Thank you in advance.

Community
  • 1
  • 1
Jeremiah Landi
  • 3
  • 5
  • A lot of issues here. Where are you table row and cells? Why are you using submit to do the updates ? You can just call the save procedure directly from onchange if you want to do it that way. What was the "previuos" on submit doing? – Shaun Nov 24 '15 at 06:58
  • @Shaun It is part of a form right now. The way it used to work is you set the slider where you want the level. Then you hit submit that would send the it to the server via POST. Does that make sense? – Jeremiah Landi Nov 24 '15 at 21:05
  • Yes makes sense. And that form submitted by Ajax post previously? Or via form post? – Shaun Nov 24 '15 at 21:55
  • @Shuan It was originally submitted by a submit button on the form. – Jeremiah Landi Nov 25 '15 at 00:01

1 Answers1

0
class="ajax"

Add a class or ID to form.

onchange="$('.ajax').submit();"
Sebastian Robles
  • 11
  • 3