CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Asim K T
Asim K T

Reputation: 18164

sending data from html to php page without leaving page

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.

Upvotes: 0

Views: 3006

Answers (6)

Asim K T
Asim K T

Reputation: 18164

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.

Upvotes: 0

Salini L
Salini L

Reputation: 879

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.

Upvotes: 0

Web Sticklers
Web Sticklers

Reputation: 82

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>

Upvotes: 1

benjah
benjah

Reputation: 660

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

Upvotes: 1

andrex
andrex

Reputation: 1032

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

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

Upvotes: -1

jme11
jme11

Reputation: 17407

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"/>

Upvotes: 1

Related Questions