7

I am trying to send post data from from with empty action and send the info with javascript to the file that must handle the post information.

Here is my code:

<HTML>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
            <script>    
    function post_to_url(path, params, method) {
        method = method || "post";

        var form = document.createElement("form");

        form._submit_function_ = form.submit;

        form.setAttribute("method", method);
        form.setAttribute("action", path);

        for(var key in params) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }

        document.body.appendChild(form);
        form._submit_function_();
    }
    post_to_url("./postinfo.php", { submit: "submit" } );
        </script>   
<form method="post" onsubmit="return post_to_url()">
<input type="text" name="ime">
<input type="submit" id="submit" name="submit" value="Send">
</form>

So how i can send the post data to postinfo.php with javascript with empty action in my html form?

Thanks in advance!

Tonny Struck
  • 247
  • 4
  • 9
  • 17
  • In your code you've got 2 calls to `post_to_url` - one that happens after you define the function and one that happens when the form is submitted. I suspect this might be causing problems. – Matthew Oct 20 '13 at 13:24

5 Answers5

11

You're quite lucky because there's a JQuery function called "Ajax" which handles this for you!

All you need to do is call JQuery, and use code like this:

$('#form_id').on('submit', function(e){
    e.preventDefault();
    $.ajax({
       type: "POST",
       url: "/postinfo.php",
       data: $(this).serialize(),
       success: function() {
         alert('success');
       }
    });
});
Richard Peck
  • 76,116
  • 9
  • 93
  • 147
  • I have tried but it's not redirecting me to postinfo.php like with action="postinfo.php" in html form. Also it's not giving the success alert. I pasted exactly your code in tags before my post form and i added id="form_id" to my form. Can you please take my code and change it how it will works and show me? – Tonny Struck Oct 20 '13 at 11:07
  • You haven't got JQuery installed - try adding this line to your tag too: `` – Richard Peck Oct 20 '13 at 11:12
  • Furthermore, the point of asynchronous form submission isn't to redirect you; it's to perform a background task. If you wanted a redirect, why don't you just submit the form without any JS? – Richard Peck Oct 20 '13 at 11:14
  • I've added this but it's still not working, It's even not giving me Success alert... – Tonny Struck Oct 20 '13 at 11:15
  • Try replacing your
    tag with this:
    – Richard Peck Oct 20 '13 at 11:16
  • Got a link I can try? There could be a number of potential issues here :) – Richard Peck Oct 20 '13 at 11:18
  • http://www.vemvo.com/test/post.php Here is the code: http://pastebin.com/WWrXF3VE – Tonny Struck Oct 20 '13 at 11:19
  • I'll make a JSFiddle for you :) – Richard Peck Oct 20 '13 at 11:25
  • Okey can't wait to see it. Thank you so much! – Tonny Struck Oct 20 '13 at 11:28
  • 1
    More specifically, I think JSFiddle got denied, so why not try the code I made on your page to see if it's okay? – Richard Peck Oct 20 '13 at 11:36
  • Well we know it's not my code because it works in JSFiddle & CodePen -- I just looked at your source and you've put the JS into , and putting that in your tag – Richard Peck Oct 20 '13 at 11:47
  • It's still not working can you please see this: http://stackoverflow.com/questions/19476992/send-html-form-post-data-to-file-with-jquery – Tonny Struck Oct 20 '13 at 11:53
  • 2
    lol okay - I hope it works for you now :) Considering my code actually works, would you be kind enough to upvote & accept answer? – Richard Peck Oct 20 '13 at 13:49
1
function post_to_url(path, params, method) {
    method = method || "post";

    var form = document.createElement("form");


   _submit_function_ = form.submit;
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    for(var key in params) {
        var hiddenField = document.createElement("input");
        hiddenField.setAttribute("type", "hidden");
        hiddenField.setAttribute("name", key);
        hiddenField.setAttribute("value", params[key]);

        form.appendChild(hiddenField);
    }

    document.body.appendChild(form);
    form._submit_function_();
}
post_to_url("./postinfo.php", { submit: "submit" } );

change to

post_to_url("/postinfo.php", { submit: "submit" } );
Ningappa
  • 1,279
  • 4
  • 16
  • 26
0

Try this code.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">
    function validate() {
        var ra = document.getElementById("uname").value;
        var rag = document.getElementById("pwd").value;
        $.ajax({
       type: "POST",
        url: "/login",
            contentType: "application/json",
         dataType: 'json',
       data:JSON.stringify({
           username:ra,
           password:rag
       }),
       success: function() {
         alert('success');
       }
    });
        console.log(ra, rag)

    }
</script>
<html>
<form name="myform">
<p>ENTER USER NAME <input id="uname" type="text" name="username"></p>

    <p>ENTER PASSWORD <input type="password" id="pwd" name="pwd"></p>
<input type="button" value="Check In" name="Submit" onclick= "validate()">


</form>
</html>
0
<html>
<form action="{{ url_for('details') }}" method="post">
<p>ENTER NAME<input id="uname" type="text" name="username"></p>

    <p>ENTER DESIGNATION<input type="text" id="pwd" name="pwd"></p>
    <!--<P>ENTER EMAIL-ID</EMAIL-ID><input id="email" type="text" name="email-id"></P>-->
<input type="submit" value="Submit" name="Submit">


</form>
</html>`
-2
 __author__ = 'raghavendra'
from flask import Flask, render_template, request, jsonify
import os
import sys
# os.environ.setdefault("DJANGO_SETTINGS_MODULE", "your_project.settings")
# sys.path.append(('/path/to/django/project'))
app = Flask(__name__)

@app.route('/')
def index():
    return render_template('temp.html')

@app.route('/save',methods=['GET','POST'])
def details():

    a = request.form.get('username')
    b = request.form.get('pwd')
    print a, b

if __name__ == '__main__':
    app.run()
iChux
  • 2,266
  • 22
  • 37