submit form without submitting the page

Question

This question is not Duplicate. Could you get it working and prove that it is duplicate ???

How can I submit the form below without submitting the page.

The Action in the below form has RESTful POST method.

e.g of consuming that API :

http://s22.postimg.org/79wp8rbv5/Capture.png

So, I have this static page. I need to submit the form without the page gets submitted. Any idea about that ?

<html>
<head>
<!-- jQuery v1.11.0 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license -->

<script  src="jquery.js"></script>
<script>

$(document).onload(function() {

    $("#submit-form-button").onclick(function() { submitForm(); });

});

function submitForm() {
    $.ajax({
      type: "POST",
      url: "https://apex.oracle.com/pls/apex/somefeto/hr/emp/",
      data: { ENAME: $_POST['ENAME']},
      success: function() {
         alert("FORM SUBMITTED!");
      },
      dataType: 'html'
    });
 };

</script>
</head>
<body>
<form action= "https://apex.oracle.com/pls/apex/somefeto/hr/emp/" method="POST">
   Employee: <input type="text" name="ENAME">
    <a href="#" id="submit-form-button">SUBMIT</a> 
</form>

</body>
</html>

After two hours, I manage to do it:

<html>
<head>
<!-- jQuery v1.11.0 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license -->

<script  src="jquery.js"></script>
<script>
 $(document).ready(function() {
    $("#submit-form-button").click(function() { submitForm(); });
});
function submitForm() {
var x = $("#ENAME").val();
    $.ajax({
      type: "POST",
      url: "https://apex.oracle.com/pls/apex/somefeto/hr/emp/",
      data: {  ENAME:  x },
      success: function() {
         alert("FORM SUBMITTED!");
      },
      dataType: 'html'
    });
};
</script>
</head>
<body>
    <form action= "https://apex.oracle.com/pls/apex/somefeto/hr/emp/" method="POST">
       Employee: <input id="ENAME" type="text" name="ENAME">
        <a href="#" id="submit-form-button">SUBMIT</a> 
    </form>

</body>    
</html>

set a target=name of a hidden iframe on the form – dandavis Apr 25 '14 at 16:15 — dandavis, Apr 25 '14 at 16:15

Ryan Smith · Answer 1 · 2014-04-25T16:18:55.950

1

You can use AJAX.

You'll need a clickable element.

<a href="#" id="submit-form-button">SUBMIT</a>

Now bind the javascript function to the button

$(document).onload(function() {


    $("#submit-form-button").onclick(function() { submitForm(); });


});

Put the ajax into a function

function submitForm() {

    $.ajax({

      type: "POST",
      url: "post_to.php",
      data: { name: $_POST['name'], addy: $_POST['addy'], email: $_POST['email'] },
      success: function() {

         alert("FORM SUBMITTED!");

      },
      dataType: 'html'

    });

 }

edited Apr 25 '14 at 16:18

answered Apr 25 '14 at 15:48

Ryan Smith

704
2
6
13

did not work. Thanks. – user1116119 Apr 25 '14 at 16:13
1

@user1116119 Though we really need more than just "did not work," I added all the code you will need to do this. Have you checked your javascript console for errors? Post them if you have any. – Ryan Smith Apr 25 '14 at 16:19
Thanks did not work. I will edit my question to show the code I used. – user1116119 Apr 25 '14 at 17:11
Sorry, I supposed that you test it. In the Console there is this error. Uncaught TypeError: undefined is not a function . I am quite weak in JS as I am Oracle developer not web. – user1116119 Apr 25 '14 at 17:36

score 0 · Answer 2 · answered Apr 25 '14 at 15:56

0

Try this, Add this script in between <head> tag

    <script type="text/javascript">     
        window.onload=function(){
             document.forms["0"].submit();
        };
    </script>

answered Apr 25 '14 at 15:56

Krish R

22,583
7
50
59

Did not work. Thanks. – user1116119 Apr 25 '14 at 16:10

submit form without submitting the page

2 Answers2