CODEWITHSUNDEEP
javascriptjqueryhtml
user3103783
user3103783

Reputation: 175

How to stay in same page after submit form

I'm currently creating a subscription form using jQuery. My problem is I want to make this form stay in the same page after user click "SUBSCRIBE" button and when the process is successful, the text on button "SUBSCRIBE" change to "SUBSCRIBED".

Below is the code :

HTML:

<form action="http://bafe.my/sendy/subscribe" class="subcribe-form" accept-charset="UTF-8" data-remote="true" method="post">
    <input type="hidden" name="authenticity_token" />
    <input type="hidden" name="list" value="ttx7KjWYuptF763m4m892aI59A" />
    <input type="hidden" name="name" value="Landing" />
    <div class="form-group">
        <div class="input-group">
            <input type="email" name="email" class="form-control" placeholder="Masukkan email anda" />
            <span class="input-group-btn"><button type="submit" class="btn btn-primary">SUBSCRIBE<i class="fa fa-send fa-fw"></i></button></span>
        </div>
    </div>
</form>

jQuery:

$(".subcribe-form").submit(function(){
    var validEmail = true;
    $("input.form-control").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).addClass("has-error");
            validEmail = false;
        } else{
            $(this).removeClass("has-error");
        }
    });
    if (!validEmail) alert("Please enter your email to subscribe");
    return validEmail;
});

Upvotes: 1

Views: 17765

Answers (5)

MKaama
MKaama

Reputation: 1929

This is how I stay on the same page, a minimal example using jQuery:

<form id=f 
onsubmit="$.post('handler.php',$('#f').serialize(),d=>r.textContent+=rd.innerHTML=d);return false">
<textarea name=field1 id=t>user input here</textarea>
<input type=submit>
</form>
<textarea id=r width=80></textarea>
<div id=rd></div>

The key is to return false from the form onsubmit handler.

Upvotes: 0

Alin N
Alin N

Reputation: 96

In my opinion it would be easier to do it using PHP. If you do not want to use PHP, then you can ignore this answer.

If you want to give it a try, you can do the following:
1. Remove the action attribute from the form tag.
2. Write PHP code similar to:

if (isset($_POST['submit']) {  // "submit" is the name of the submit button
    onSubmit();
}

function onSubmit() {
    /* your code here */
}

Upvotes: 0

Hajji Tarik
Hajji Tarik

Reputation: 1082

Just handle the form submission on the submit event, and return false:

if using AJAX : (With ajax you can either do that, or e.prenventDefault (), both ways work.)

$(".subcribe-form").submit(function(){
 ... // code here
 return false;
});

If using simple form :

 $(".subcribe-form").submit(function(e){
     ... // code here
     e.preventDefault();
 });

Upvotes: 0

Vladu Ionut
Vladu Ionut

Reputation: 8193

You can use event.preventDefault to prevent the form submission but you also need to send the data to the server so for this you can use jQuery ajax ( see below code ) 

    $(".subcribe-form").submit(function(event){
    event.preventDefault()
    var validEmail = true;

    $("input.form-control").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).addClass("has-error");
            validEmail = false;
        }
        else{
            $(this).removeClass("has-error");
        }
    });

    if (!validEmail) { alert("Please enter your email to subscribe");
    }else {
//for valid emails sent data to the server
     $.ajax({
            url: 'some-url',
            type: 'post',
            dataType: 'json',
            data: $('.subcribe-form').serialize(),
            success: function(serverResponse) {
                       //... do something with the server Response...
                     }
        });
    }
    return validEmail;
    });

Upvotes: 5

Semi-Friends
Semi-Friends

Reputation: 480

Add preventDefault so that form submission is prevented

$(".subcribe-form").submit(function(event){

event.preventDefault()

use serialize and post to send your data to desired url

Upvotes: 1

Related Questions