CODEWITHSUNDEEP
phpjqueryforms
Bas
Bas

Reputation: 15

Jquery form post errors

I am new in Jquery. I'm working on a form. Title and text (textarea) When I fill out the fields and click send, the two alerts appear when I click OK two times to scroll the page up. Now I fill in the fields and then it starts again from the beginning.

How can I ensure that after the two checks continues the page?

Jquery:

    $("#formPages").submit( function(event) {
        var title = $('#title').val();
        var text = $('#text').val();
        if(title == ''){
            $("#titleError").html("<p>Fill Title</p>");
            alert('title empty');
        }       
        if(text == ''){
            $("#textError").html("<p>Fill Text</p>");
            alert('text empty');
        }       
        $("html, body").animate({ scrollTop: 0 }, 600);
        event.preventDefault();          
    });

Form:

<form class="form" id="formPages">
<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>
</form>

Upvotes: 0

Views: 118

Answers (4)

DaGhostman Dimitrov
DaGhostman Dimitrov

Reputation: 1626

You should not use event.preventDefault(); when outside of the IF statements. Your code should work like this:

$("#formPages").submit( function(event) {
    var title = $('#title').val();
    var text = $('#text').val();
    if(title == ''){
        $("#titleError").html("<p>Fill Title</p>");
        alert('title empty');
        event.preventDefault(); 
    }       
    if(text == ''){
        $("#textError").html("<p>Fill Text</p>");
        alert('text empty');
        event.preventDefault(); 
    }       
    $("html, body").animate({ scrollTop: 0 }, 600);         
});

Have not tested it but should work as expected, comment if any errors. to check if the textarea or the title are empty will be better to use if (text.length === 0) and if (title.length === 0)

EDIT

Please check the JSFiddle here for a working example, I have tested it with Chrome, FF, and IE(I know :D)

Upvotes: 1

cssyphus
cssyphus

Reputation: 40038

Further to what DaGhostman has already said about putting the event.preventDefault() statement underneath each if statement, your form tag does not specify what to do upon submission.

Forms have to be POSTed somewhere in order for the data to be processed. The name of the processing file, and the delivery method, must be specified in the <form> tag.

You have:

<form class="form" id="formPages">

You should have:

<form class="form" id="formPages" action="yourProcessorFile.php" method="POST">

Then, you must have a PHP file that will receive and process the form data. Notes:

  • The form data is delivered as an associative array, called $_POST.
  • The name attribute on each form element becomes the KEY (or variable name) in the $_POST array
  • The value typed into the field becomes the value of that variable in the PHP file.

For example, the PHP processor file could look like this (using the same filename I used for the action= attribute above):

yourProcessorFile.php

<?php
    $t = $_POST['title'];
    $x = $_POST['text'];

    echo '<h1>Received From Form:</h1>;
    echo 'Title: ' .$t. '<br>';
    echo 'Text: ' .$x. '<br>';

Upvotes: 0

Simon Rapilly
Simon Rapilly

Reputation: 393

First I would recommend using Jquery validation plug in, especially if you have more than one form , it does exactly what you want, it validate forms.

Now for your problem, you always prevent the form from submitting because you always do event.preventDefault(), you need to prevent the submit only if something is invalid in your form, try like this instead :

$("#formPages").submit( function(event) {
    var title = $('#title').val();
    var text = $('#text').val();
    var isValid = true;

    if(title == ''){
        $("#titleError").html("<p>Fill Title</p>");
        alert('title empty');
        isValid = false;
    }    

    if(text == ''){
        $("#textError").html("<p>Fill Text</p>");
        alert('text empty');
        isValid = false;
    }       

    if(!isValid){
        event.preventDefault(); 
        $("html, body").animate({ scrollTop: 0 }, 600);
    }
});

Upvotes: 0

theftprevention
theftprevention

Reputation: 5213

Your event.preventDefault() statement keeps the form from being submitted. This statement should only be used if something in the form is invalid, and you don't want the form submitted. Otherwise, removing it will allow the form to submit to the next page.

Upvotes: 1

Related Questions