send form data to external form without page refresh

I have looked for a solution, but have only found ways to submit a form on my own website. What I am trying to accomplish here is 2 things. 1: Sending form data from my websites form to a form on a second website. 2. Doing this without refreshing my website.

Here is my form. It submits fine, but it redirects to the external web page after the form is sent.

<form id="widget_contact" action="http://www.website.com/" method="post">
  <input type="text" name="pcode" id="fc_name" />
  <input type="hidden" name="hdnCmd" value="sb-gimme" />
  <input name开发者_如何学JAVA="send_button" id="fc_submit" class="btn_b" type="submit" value="Gimme" />
</form>

---

What you can do is set up a PHP file that will accept the form data and then send the data to the other website using HTTP POST. You would send the data to your own PHP file using Ajax to avoid the refresh. Here is an example of how to send POST data to another website using PHP (This is only something I just googled. Source: http://wezfurlong.org/blog/2006/nov/http-post-from-php-without-curl)

<?php
function do_post_request($url, $data, $optional_headers = null)
{
  $params = array('http' => array(
              'method' => 'POST',
              'content' => $data
            ));
  if ($optional_headers !== null) {
    $params['http']['header'] = $optional_headers;
  }
  $ctx = stream_context_create($params);
  $fp = @fopen($url, 'rb', false, $ctx);
  if (!$fp) {
    throw new Exception("Problem with $url, $php_errormsg");
  }
  $response = @stream_get_contents($fp);
  if ($response === false) {
    throw new Exception("Problem reading data from $url, $php_errormsg");
  }
  return $response;
}

You could also use cURL which is a bit easier, but requires that cURL be installed.

---

I am working on a page that submits a request to a web service that returns a JSON file. My request was causing a redirect to the JSON file. Not what I needed. The problem was solved using the code below:

var xmlhttp = new XMLHttpRequest();
<!-- Get Excel Spreadsheet Templates. -->
var url = "https://store.office.com/assets/templates/get?culture=en-CA&sourceIds=TM10000104,TM10000108,TM10000093,TM10000101,TM10000089,TM10000094,TM10000098,TM10000110,TM10000092,TM10000109,TM10000099,TM10000105,TM10000103,TM10000102,TM10000091,TM10000090,TM10000106,TM10000107,TM10000095,TM10000111&format=json";

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, false);
xmlhttp.send();

function myFunction(response) {
    // Do what you need to do here, if anything!
}

You can substitute the url variable with your submit url. GET can also be replaced with POST.

Check out: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp. This details both getting and posting data from and to a server.

Hope this helps.

---

Here is what I found to be the best solution. Get all the names and values of the inputs inside the form, and use that in a request body.

const formEl = document.querySelector('#form_id')
const payload = Array.from(formEl.querySelector('input').map(el => ({[el.name]: el.value}))

fetch(formEl.action, {
            method: formEl.method
            body: JSON.stringify(payload)
        })