sending data from html to php page without leaving page

Question

I already used huge time for this in stack overflow and googling.But none of it worked for me.

I have a form in html and i need to send the data to a php without leaving the page.I used ajax and javascript.I can POST data by leaving the page but i don't want to leave the page.

here is my html:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/topcoat-mobile-light.css" />
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <script  src = "js/jquery.js"></script>
    <script type="text/javascript" src = "js/index.js"></script>        
    <meta name="msapplication-tap-highlight" content="no" />
    <title>Title</title>
</head>
<body>
    <div class="topcoat-navigation-bar">
        <div class="topcoat-navigation-bar__item center full">
        <h1 class="topcoat-navigation-bar__title">Header</h1>
        </div>
    </div>
    <div class = "content text-input">
    <form id = "form" name = "form" action="http://localhost/index.php" method = "post">
        <p>Please fill the details.
        <p> Name</p>
        <input type="text" class="topcoat-text-input" placeholder="text" value="" id = "name" name = "name">
        <input id = "submit" type="submit" class="topcoat-button" value = "Submit">
    </form>
    <script type="text/javascript">
    var frm = $('#form');
    frm.submit(function (ev) {
        $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            alert('ok');
        }
    });

    ev.preventDefault();
});
</script>
    </div>
</body>
</html>

I can access "name" in php through post by leaving page, So I am not posting php here. Any Help would be highly appreciated. if anybody needs clarification i am here.

jme11 · Accepted Answer · 2014-09-20 09:43:35Z

1

While your inputs have an id, they don't have a name attribute. Serialize uses the name to create the key value pairs for the data.

See: http://api.jquery.com/serialize/

Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

Change your inputs to:

<input type="text" class="topcoat-text-input" placeholder="text" value="" id="name" name="name"/>

answered Sep 20, 2014 at 9:43

jme11

17.9k2 gold badges40 silver badges49 bronze badges

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

1 Comment

Asim K T Over a year ago

Thanks,I added name attribute but still not working.

benjah · Accepted Answer · 2014-09-20 10:20:30Z

1

you should put target attribute in youre form so it will look like that:

<form id = "form" name = "form" action="http://localhost/index.php" method = "post" target="some_name">

and to put "some_name" as an iframe

<iframe id="some_name" name="some_name" style="display:none position:absulote; z-index:-100"></iframe>

that should do the job

answered Sep 20, 2014 at 10:20

benjah

6607 silver badges31 bronze badges

Comments

Web Sticklers · Accepted Answer · 2014-09-20 10:32:24Z

1

Change the script part with this piece of code.... you need to call ev.preventDefault(); before ajax call....

<script type="text/javascript">
var frm = $('#form');
frm.submit(function (ev) {
    ev.preventDefault();
    $.ajax({
        type: frm.attr('method'),
        url: frm.attr('action'),
        data: frm.serialize(),
        success: function (data) {
            alert('ok');

        }
    });
});
</script>

answered Sep 20, 2014 at 10:32

Web Sticklers

824 bronze badges

Comments

Salini L · Accepted Answer · 2014-09-20 10:45:48Z

0

I think there may be some mistake in javascript file <script src = "js/jquery.js"></script>. I have tried your code. Its working when I changed the javascript file. plz try with
<script src = "http://code.jquery.com/jquery-1.11.0.min.js"></script>
It has been worked for me.

edited Sep 20, 2014 at 10:45

answered Sep 20, 2014 at 10:15

Salini L

8796 gold badges15 silver badges45 bronze badges

Comments

Asim K T · Accepted Answer · 2014-09-23 04:39:22Z

0

I don't know how but this worked for me.Thanks for answers.

the html form worked when i place it at the same directory where index.php resides(ie at localhost:/). if it is at another place It didn't work.I don't know why but I am figuring it out.

answered Sep 23, 2014 at 4:39

Asim K T

18.5k14 gold badges84 silver badges108 bronze badges

Comments

andrex · Accepted Answer · 2014-09-20 09:51:27Z

-1

What you need is in here http://malsup.com/jquery/form/

It submits the whole form and won't leave the current page.

answered Sep 20, 2014 at 9:51

andrex

1,0326 silver badges16 bronze badges

Collectives™ on Stack Overflow

sending data from html to php page without leaving page

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related