Creating form using JavaScript

Question

Here is my code below,

          var mapForm = document.createElement("form");
          mapForm.target = "_blank";    
          mapForm.method = "POST";
          mapForm.action = "delete";

          // Create an input
          var mapInput = document.createElement("input");
          mapInput.type = "hidden";
          mapInput.name = "uploaded";
          mapInput.value = file.name;

          // Add the input to the form
          mapForm.appendChild(mapInput);

          // Add the form to dom
          document.body.appendChild(mapForm);

          // Just submit
          mapForm.submit();

it does work, but after submitting the value, it opens the action URL in a new window because i have given mapForm.target = "_blank"; , is it possible to submit the form without opening any windows i mean it should stay in the same window but it should not go to "delete page"?, not by using ajax...

If you submit the form, the browser will redirect. You will need AJAX to submit it silently. — Blender
– Blender, Commented Jul 29, 2013 at 8:56
Can you rephrase your question. You say you don't want to open a new window, but are using "_blank". Then you say "it possible to submit the form with opening any windows" which it already does since you use _blank? — DrColossos
– DrColossos, Commented Jul 29, 2013 at 8:56
ya i mean to say if i remove mapForm.target = "_blank"; it does not open new window but it will open delete page on the same window , i dont want it to got to delete page at all... — Friend
– Friend, Commented Jul 29, 2013 at 9:01

alexP · Accepted Answer · 2014-05-20 14:42:31Z

8

You could send your data to an hidden iframe:

var mapForm = document.createElement("form");
mapForm.target = "myIframe";
mapForm.method = "POST";
mapForm.action = "delete";

//Create an iframe
var iframe = document.createElement("iframe");
iframe.src = "response.php";
iframe.name = "myIframe";
iframe.style.width = '1px';
iframe.style.height = '1px';
iframe.style.visibility = 'hidden';
iframe.style.position = 'absolute';
iframe.style.right = '0';
iframe.style.bottom = '0';
mapForm.appendChild(iframe);

// Create an input
var mapInput = document.createElement("input");
mapInput.type = "hidden";
mapInput.name = "uploaded";
mapInput.value = file.name;

// Add the input to the form
mapForm.appendChild(mapInput);

// Add the form to dom
document.body.appendChild(mapForm);

// Just submit
mapForm.submit();

// Remove mapForm 
document.body.removeChild(mapForm);

edited May 20, 2014 at 14:42

answered Jul 29, 2013 at 9:04

alexP

3,7657 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shrey Over a year ago

after submit call document.body.removeChild(mapForm); otherwise everytime it will create one extra form

Yacine Rezgui · Accepted Answer · 2013-07-29 09:04:09Z

0

You can check the new FormData HTML5 feature. It's let you send a form by Ajax (a real form like it was a normal ) : https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

answered Jul 29, 2013 at 9:04

Yacine Rezgui

1,7811 gold badge18 silver badges15 bronze badges

Comments

Lemonade · Accepted Answer · 2013-07-29 09:22:44Z

If u dare using JQuery u can use AJAX to trigger a request to the serverside, in this case i assumed delete.php, very easily.

In the head of your HTML file add the following line to include the latest JQuery API.

<script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>

In your JS create your form straightforward, convert the DOM element to a JQuery object with the $ (JQuery) method and create a AJAXForm with the ajax() method of the newly created JQuery object.

<script type="text/javascript">

      var mapForm = document.createElement("form");
      mapForm.method = "POST";
      mapForm.action = "delete.php";

      // Create an input
      var mapInput = document.createElement("input");
      mapInput.type = "hidden";
      mapInput.name = "uploaded";
      mapInput.value = file.name;

      // Add the input to the form
      mapForm.appendChild(mapInput);

      document.body.appendChild(mapForm);

      var frm = $(mapForm);
      frm.submit(function () {
          $.ajax({
              type: frm.attr('method'),
              url: frm.attr('action'),
              data: frm.serialize(),
              success: function (data) {
                  alert('ok');
              }
          });

          return false;
      });

</script>

This will prevent yoor FORM from triggering a redirect to another page and instead use an asynchronious request to a server script to handle the data and push a response, that you can process within the success function of the AJAXForm.

Collectives™ on Stack Overflow

Creating form using JavaScript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related