Send html form data to php using post request with ajax to a https://foo.com

Question

When a user clicks on a button (in a form), a javascript prompt box will appear asking for the user's name, then I want to send that javascript promp data into php, so that I can send it to a phpmyadmin database. Note that I have tried using an xmlhttprequest, but that didnt work, because the website is in https and not http

Here is the html form:

<form method="post" id="user_form" action="Pages/Intro/Intro.php">
   <input class="button" id ="start_button" type="button"  name ="txt" onclick="loadUserName()" value="Go to Game(push Twice)">
    <br>
    <input class="button" id="help_button" name="help" type="button" onclick="location.href='Pages/Help/Help.html';" value="Help/F.A.Q" >
    <br>
  </form>

But, I am not sure how to send this form data

JS (not sending to https):

function sendTextToServer(txt) {
                  var xhr = new XMLHttpRequest();
                  var formData = new FormData(myForm);
                  xhr.open("POST", "https://foo.php"); //Server goes after Post Method
                  //formData.append("txt", txt);
                  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                  xhr.addEventListener("readystatechange", function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {      // state DONE, status OK
                       // your request has been received, do what you want with the result here.

                    }
                  });
                  xhr.send(formData);
                }

Possible duplicate of [Form submit with AJAX passing form data to PHP without page refresh](https://stackoverflow.com/questions/16616250/form-submit-with-ajax-passing-form-data-to-php-without-page-refresh) — Pradeep, Apr 18 '18 at 06:17
I think there is a mistake in creating a FromData. What did you store in myForm? — Adithya, Apr 18 '18 at 06:25

score 2 · Accepted Answer · answered Apr 18 '18 at 06:33

2

Try to use ajax. See my example in below:

var formData = $('#myForm').serialize();
$.ajax({
    url: 'https://foo.php',
    type: 'POST',
    data: formData,
    success: function(data) {
        // status code 200
        // do something
    }, 
    error: function(data) {
       // do something
    }
});

answered Apr 18 '18 at 06:33

Phuc Lam

370
2
8

Though it's advisable. The OP doesn't state he is using jQuery. – Mark Baijens Apr 18 '18 at 07:48
No, I have jQuery in my full html page – Dimitriy Kruglikov Apr 18 '18 at 07:56

Send html form data to php using post request with ajax to a https://foo.com

1 Answers1