Adding form post/submit button to javascript script

Question

I found this code on here (thanks to Xavi López) and it is ideal for what I need to add to my project but I'm in need of some help adding a Form post and submit button in JavaScript. I have no knowledge on this subject and I've tried looking at some example but non of them seem to work. I would be grateful if someone could help me. After the user adds the relevant number of input boxes and adds there data, I would like to have a submit button which will POST the results to another web page (result page)

I have added the solution to the below coding (thank you MTCoster) but I'm now try to find a solution to having the submit button appear only when an entry has been added. I have tried different methods but non will work.

function addFields() {
  // Number of inputs to create
  var number = document.getElementById('member').value;
  
  // Container <div> where dynamic content will be placed
  var container = document.getElementById('container');
  
  // Clear previous contents of the container
  while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
  }
  
  for (i = 0; i < number; i++) {
    // Append a node with a random text
    container.appendChild(document.createTextNode('Member ' + (i + 1) + ' '));
    
    // Create an <input> element, set its type and name attributes
    var input = document.createElement('input');
    input.type = 'text';
    input.name = 'member' + i;
    container.appendChild(input);
    
    // Append a line break 
    container.appendChild(document.createElement('br'));
  }
}

<input type="text" id="member" name="member" value="">Number of Pins: (max. 48)<br>
<a href="#" id="filldetails" onclick="addFields()">Add Pinout Entries</a>
<form action="result.asp" method="POST">
<div id="container"></div>
<input type="submit" value="Add Data">
</form>

MTCoster · Accepted Answer · 2019-02-14 23:50:53Z

1

You’re almost there - all you need to do is wrap your inputs in a <form> element:

function addFields() {
  // Number of inputs to create
  var number = document.getElementById('member').value;
  
  // Container <div> where dynamic content will be placed
  var container = document.getElementById('container');
  
  // Clear previous contents of the container
  while (container.hasChildNodes()) {
    container.removeChild(container.lastChild);
  }
  
  for (i = 0; i < number; i++) {
    // Append a node with a random text
    container.appendChild(document.createTextNode('Member ' + (i + 1) + ' '));
    
    // Create an <input> element, set its type and name attributes
    var input = document.createElement('input');
    input.type = 'text';
    input.name = 'member' + i;
    container.appendChild(input);
    
    // Append a line break 
    container.appendChild(document.createElement('br'));
  }
}

<input type="text" id="member" name="member" value="">Number of Pins: (max. 48)<br>
<a href="#" id="filldetails" onclick="addFields()">Add Pinout Entries</a>
<form action="/url/to/post/to" method="POST">
  <div id="container"></div>
  <input type="submit">
</form>

If you’d like the submit button to only appear after at least one input is visible, you could add it at to div#container at the end of addFields(). I’ll leave this as an exercise to the OP, since it’s not much different to how you’re adding the input fields.

answered Feb 14, 2019 at 23:50

MTCoster

6,1843 gold badges33 silver badges55 bronze badges

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

5 Comments

Rick Kap Over a year ago

Thank you for a quick answer. Could you elaborate on how you would have it appear after one input has been selected, please

MTCoster Over a year ago

Try it yourself - as I said in the answer, it’s not much different to how you’re adding the other <input>s. It’ll work just fine added inside the #container rather than after it as I’ve put it.

Rick Kap Over a year ago

Sorry I'm not to good on this. I'm trying to understand how to add it inside the #container If I try <form action="result.asp" method="POST"><div id="container"><input type="submit"></div> the submit button disappears when I add the entries.

MTCoster Over a year ago

Right, that’s why if you hardcode it it should be outside the #container. But if you’re dynamically adding it, do that the same way you’re adding the other inputs

Rick Kap Over a year ago

Would that mean the form submit button would need to been written in JavaScript so that when the user adds an entry it will only appear then?

Collectives™ on Stack Overflow

Adding form post/submit button to javascript script

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related