Jump to content

Adding a field to form


phppup
 Share

Recommended Posts

I have added a field using JavaScript but it will not post.

<form method="POST" action="">
  <input type="submit">
</form>  
  
  <script>
    
const input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "name");
input.setAttribute("value", "value");
document.body.appendChild(input);
    
    </script>

Am I missing a certain command?

 

Edited by phppup
Link to comment
Share on other sites

you are appending the dynamically created field to the document body, not to the form.

i recommend that you do two things -

  1. instead of building the markup, line by line, attribute by attribute, put the desired markup inside a <div id='template'>...</div>. you can then just copy the innerHTML from this template element to crate each new element.
  2. put another <div id='target'></div> inside the form where you want to append the dynamically created elements.

the javascript would them look like this -

	// create an empty div element
	var divx = document.createElement('div');

	// get the template html and put it into the empty div
	divx.innerHTML = document.getElementById('template').innerHTML;

	// append the new div to the target area on the page
	document.getElementById('target').appendChild(divx);

 

Link to comment
Share on other sites

Posted (edited)

I knew it was something like this.

So I don't need to indicate a form of, just the form tag is enough?

@mac_gyver I like that idea. And the template can essentially be anywhere on the <body> because the placement is handled by "target", right?

Although they do need independent names for submission, don't they?

 

Edited by phppup
Forgot item
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.