PHP Ajax Form, What If The JS Was Disabled

Question

I have a simple PHP form like

<form action="" id="searchForm">
            <input type="text" id="name" name="theName" placeholder="Your Name" />
            <button id="send">Send data</button>
 </form>

and I am using ajax to send the POST values to the PHP file

    $("#send").on("click", function(){
     var name= $('#theName').val();
     var data='name='+name; 
     var request = $.ajax({
                           type: "POST",
                           url: "assets/map.php",
                           data: data,
                           cache: false
      });

    });

This works correctly when using JavaScript but I am thinking what if the JS was disabled in a browser? How we can still send the data to the server? should I add the map.php file into the form action attribute? if so how to prevent sending double POST[] values?

You should add the map.php in your action form to make it work for browser without JS, don't forget to change your map.php to do a redirect if the request type if GET — Sofiene Djebali
– Sofiene Djebali, Commented Aug 15, 2015 at 9:40
than there is no use of ajax ask user to enable js or just move on — NullPoiиteя
– NullPoiиteя, Commented Aug 15, 2015 at 9:40
Put the URL in your forms action and just prevent the default action in your JS function. — putvande
– putvande, Commented Aug 15, 2015 at 9:42

Tom V. · Accepted Answer · 2015-08-15 09:50:55Z

3

You should use onsubmit and prevent the default action (the ordinary submit action) for the JS part, then indeed fill in the action attribute with the same url that you use for the ajax post.

$("#searchForm").submit(function(e){
     e.preventDefault();

     var name= $('#theName').val();
     var data='name='+name; 
     var request = $.ajax({
                       type: "POST",
                       url: "assets/map.php",
                       data: data,
                       cache: false
      });

    });

And the HTML:

<form action="assets/map.php" id="searchForm" method="post">
        <input type="text" id="name" name="theName" placeholder="Your Name" />
        <button id="send" type="submit">Send data</button>
</form>

edited Aug 15, 2015 at 9:50

answered Aug 15, 2015 at 9:42

Tom V.

3232 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

putvande Over a year ago

You should probably also mention to put method="post" on the form. Otherwise the data will be send as $_GET variables when JS is disabled.

putvande · Accepted Answer · 2015-08-15 09:56:54Z

1

First add assets/map.php to your action.

Then change your jquery to this:

$("#send").on("click", function(){
    var name= $('#theName').val();
    var data='name='+name; 
    var request = $.ajax({
                         type: "POST",
                         url: "assets/map.php",
                         data: data,
                         cache: false
    });
    return false; //prevents action
});

As you can see this will only prevent the action if the jquery has ran.

edited Aug 15, 2015 at 9:56

putvande

15.3k3 gold badges37 silver badges51 bronze badges

answered Aug 15, 2015 at 9:45

maxisme

4,3059 gold badges57 silver badges106 bronze badges

1 Comment

putvande Over a year ago

assets/map.php (as in the url: "assets/map.php")

Collectives™ on Stack Overflow

PHP Ajax Form, What If The JS Was Disabled

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related