Must submit form twice

Question

I have the following script. It works in jsFiddle The problem is when I fill in the title AND the text box I have to submit TWICE.

Does someone have an idea of what I'm doing wrong?!

form:

<form id="formid" class="form" method="POST" action="/">
<div>
    <label class="title">Title</label>
    <div id="titleError"></div>
    <input type="text" id="title" name="title" value="">

</div>
<div>
    <label class="title">Text</label>
    <div id="textError"></div>
    <textarea name="text" id="text" rows="14" cols="50"></textarea><br />

</div>
<div>
    <input class="btn btn-success" type="submit" id="submitButton"  name="submitButton" value="Submit">
</div>

JS:

<script type='text/javascript'>
$(document).ready(function() {
  $("#formid").submit( function(event) {
        tinyMCE.triggerSave();
        var title = $('#title').val();
        var text = $('#text').val();
        if( title.length === 0 || text.length === 0 ){
            if( title.length === 0 ){
                $("#titleError").html("<p>Title verplicht</p>");
                event.preventDefault();
            }
            if( text.length === 0 ){
                $("#textError").html("<p>Text verplicht</p>");
                event.preventDefault();
            }

            $("html, body").animate({ scrollTop: 0 }, 600);
        }
        else{
            tinyMCE.triggerSave();

            /* stop form from submitting normally */
            event.preventDefault();

            /* Send the data using post */
            var posting = $.post( 'http://domain.nl/admin/pages/create', { 
                title: $('#title').val(), 
                text:  $('#text').val() 
            });

            /* Put the results in the show-content div */
            posting.done(function( data ) {
                //alert(data);
                $.ajax({
                    url: "<?php echo base_url() ?>/admin/pages",
                    type: 'GET',
                    success: function(data) {
                        $("#show-content").hide().html( data).fadeIn(1500);
                    }
                    ,
                    error: function() {
                        alert("error");
                    }

                });        
            });    

        }       
    });
});  

</script>

The solution: I add this

tinyMCE.triggerSave();

after

 $("#formid").submit( function(event) {

and now it works correctly!

Curious: Why do you have your action set as `action="/"`? Is your handler in the root, or is that just an example? — Funk Forty Niner, Aug 03 '13 at 06:20
Plus, should'nt you be using `type: 'POST',` instead of `type: 'GET',`? Or is that because you're querying a DB? — Funk Forty Niner, Aug 03 '13 at 06:22
Since you are using Ajax, your form action should be left blank as such: `action=""` and not `action="/"` which is trying to access your root file (index.php) — Funk Forty Niner, Aug 03 '13 at 06:27
Changed it in blank + its posting title and text to the dbase + returning inserted rows. Still having the same problem. — Bas, Aug 03 '13 at 06:27
@Fred the problem is the text area. When i first fill the text and push send i am getting the title error. When i fill the title its OK! — Bas, Aug 03 '13 at 06:33
Try adding a blank value to `` as you did for the title as such `<textarea cols="50" id="text" name="text" rows="14" value="">` and see if that makes a difference. — Funk Forty Niner, Aug 03 '13 at 06:37
And you did change `if( title.lenght === 0` to `if( title.length === 0` right? — Funk Forty Niner, Aug 03 '13 at 06:45
Try using anyone of these `$('#formid').unbind('submit').submit();` - `data: $('#formid').serialize(),` Plus from examples I saw on the Web, I noticed you don't have anything similar to `data:` taken from this on SO http://stackoverflow.com/a/9768048/1415724 — Funk Forty Niner, Aug 03 '13 at 06:54
And here's another suggestion, try to `bind` it with `$("#formid").bind('submit', function(event) {` let me know how you're making out. Taken from http://stackoverflow.com/questions/15823756/jquery-submitting-form-twice — Funk Forty Niner, Aug 03 '13 at 07:02
Thanks for your patience Fred. I think I have enough input. I'll find out and if I have questions I get it back or post the solution. Thanks! — Bas, Aug 03 '13 at 07:18
You're welcome. And please include the `@` symbol in from of my name, so that I'll know, in case I close this tab. Good luck. — Funk Forty Niner, Aug 03 '13 at 07:28
@Fred tinyMCE.triggerSave(); This was the problem. I have added this and it works! — Bas, Aug 03 '13 at 08:28
@Bas If you mean delete, you can't since there's already an answer. Least that's what I think. Or I put in an answer, but that wouldn't be fair. I'd leave it just the way it is. — Funk Forty Niner, Aug 03 '13 at 14:17

Must submit form twice

0 Answers0