1

I'm working on a site and I do not have access to the html, but I have a section where I can put custom javascript.

I am trying to take a few fields from an existing form and send them to an external database on a different domain when the user clicks save on the original form.

HTML I cannot change:

<form id="settings_form" action="thisdomain.com/savesettings" method="post" enctype="multipart/form-data">
<input type="text" name="fullName" id="fullName">
...
<input type="submit" class="button" value="Save">
</form>

Here's my javascript:

$("#settings_form").submit(function(){
  var fd = $("input#fullname").val();           

  var iframe = document.createElement('iframe');
  var uniqueString = "addform";
  document.body.appendChild(iframe);
  iframe.style.display = "none";
  iframe.contentWindow.name = uniqueString;    

  var form = document.createElement("form");
  form.target = uniqueString;
  form.action = "http://externaldomain.com/add.php";
  form.method = "POST";

  var inputn = document.createElement("input");
  inputn.type = "hidden";
  inputn.name = "n";
  inputn.value = fd;
  form.appendChild(inputn);

  document.body.appendChild(form);
  form.submit();      
});

With this code my iframed form is not sent before #settings_form is sent and the page is refreshed.

If I add "preventDefault();" or "return false;" to the submit() function, it posts properly to the external database, but then I can't submit the original form. Is there any way I can send both forms to their respective locations with a single user click of the "Save" button?

4

0 回答 0