How can I merge two separate javascripts in one?

Question

How can I merge two separate javascripts in one? I have two separate javascripts. One sends form data to post.php page without page refresh AND refreshes DIV content with (div.php) , but second disables corresponding form submit button. How can I merge this code in one? (not that I have many forms with different id’s in one page). Problem is on IE9, where this script double submits data!!!

$(function() {
  $('form').on('submit', function(e) {
    $.ajax({
      type: 'post',
      url: 'post.php',
      data: $(this).serialize(),
      success: function(returnedData) {
        $('#sidebar').load('div.php');
      }
    });
    e.preventDefault();
  });
});
$(document).ready(function() {
  $('input[type=submit]').click(function() {
    $(this).prop("disabled", true);
    $(this).val("Selected");
    $(this).closest('form').trigger('submit');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

and use one `$(function () {` ALL CODE `});` instead of two similar handlers (`$(function () {` ~= `$(document).ready(function () {`). — Artem Fitiskin, May 08 '14 at 12:52
@dschazam There's no need for a fiddle - it's correct to put the code in the question. Besides, it's very simple to understand. — Reinstate Monica Cellio, May 08 '14 at 12:55
Of course there is a need. He explains that these scripts are overwriting each, as you can see by yourself. And I have no time to write a JSFiddle for him. — dschu, May 08 '14 at 12:56
@dschazam There is no need for a jsfiddle, whether he writes it or you write it. There are 2 submit functions. Read the code! Too many people have 0 idea how Stack Overflow works. It does not require external links to examples if the code is posted here. Yes, they can help but you should not rely on them if it's a simple question. — Reinstate Monica Cellio, May 08 '14 at 12:57

RobIII · Answer 1 · 2014-05-08T12:58:23.263

0

Remove

</script>

<script>

And you're done ;-)

I would go a bit further though:

$(document).ready(function () {
    $('form').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: 'post.php',
            data: $(this).serialize(),
            success: function (returnedData) {
                $('#sidebar').load('div.php');

            }
        });
        return false;
    });

    $('input[type=submit]').click(function () {
        $(this).prop("disabled", true);
        $(this).val("Selected");
        $(this).closest('form').trigger('submit');
    });
});

edited May 08 '14 at 12:58

answered May 08 '14 at 12:51

RobIII

8,488
2
43
93

@MilindAnantwar Is was still busy indenting OP's code in my edit where your remark doesn't hold anymore ;-) – RobIII May 08 '14 at 12:55
Post a link to a [jsfiddle](http://jsfiddle.net/) or edit the question to include relevant(!) code please so we can reproduce the problem acurately. Also, you'll probably want to change the preventDefault() call to just return false instead (see my edit) or move preventDefault() "up". – RobIII May 08 '14 at 12:57
See [event.preventDefault() vs. return false](http://stackoverflow.com/q/1357118/215042) – RobIII May 08 '14 at 13:04

score 0 · Answer 2 · answered May 08 '14 at 13:01

To combine the two code just remove the code

});</script><script>$(document).ready(function () {

to prevent double form submission in ie9, use return false:

$('form').on('submit', function (e) {
e.preventDefault();
$.ajax({
    type: 'post',
    url: 'post.php',
    data: $(this).serialize(),
    success: function (returnedData) {
        $('#sidebar').load('div.php');

    }
});
return false;});

How can I merge two separate javascripts in one?

2 Answers2