Using Javascript in HTML form

Question

I am trying to get an html form to grab a value from a javascript code. I'd like for the hidden field "SubID" to grab the value of the javascript function. This is what I have so far.. what am I doing wrong:

<form action="" method="post">
<fieldset><input name="firstname" type="text" placeholder="First Name" /></fieldset>
<input type="hidden" name="SubID" value="uid1">
<fieldset><button id="contact-submit" name="submit" type="submit" data-submit="...Sending">Submit</button></fieldset>

<script type="text/javascript">
  function getCookie(name)
  {
    var re = new RegExp(name + "=([^;]+)");
    var value = re.exec(document.cookie);
    return (value != null) ? unescape(value[1]) : null;
  }
  var uid1 = document.write(getCookie("uid"));
</script>

I firstly advice heavily against cookies. Easy to manipulate if not done correctly, leading to security exploits. — treyBake
– treyBake, Commented Jun 27, 2017 at 16:11

acdcjunior · Accepted Answer · 2017-06-27 17:03:23Z

2

Add a listener to the submit event of the form:

// declare listener
function handleSubmit() {
    var myHiddenInput = document.querySelector('[name=SubID]');
    myHiddenInput.value = getCookie("uid");
}
// hook listener to the event of the form
var myForm = document.querySelector('form');
myForm.addEventListener("submit", handleSubmit, false);

That should work in the latest browsers. If you need to support older browsers, the .addEventListener() changes a little.

More on how to add simple event listeners here.

Demo in JSBin or below:

function getCookie(name) {
  var re = new RegExp(name + "=([^;]+)");
  var value = re.exec(document.cookie);
  return (value != null) ? unescape(value[1]) : null;
}
//var uid1 = document.write(getCookie("uid"));

var myForm = document.querySelector('form');

function handleSubmit() {
  var myHiddenInput = document.querySelector('[name=SubID]');
  // myHiddenInput.value = getCookie("uid");
  myHiddenInput.value = "test -- have a look at the network tab to check if this was submitted";
}
myForm.addEventListener("submit", handleSubmit, false);

<form action="https://httpbin.org/post" method="post">
  <fieldset><input name="firstname" type="text" placeholder="First Name" /></fieldset>
  <input type="hidden" name="SubID" value="uid1">
  <fieldset>
  <button id="contact-submit" name="submit" type="submit" data-submit="...Sending">Submit</button>
  </fieldset>
</form>

edited Jun 27, 2017 at 17:03

answered Jun 27, 2017 at 16:10

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

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

11 Comments

treyBake Over a year ago

just a comment more than anything - above is fine but remove the inline js and move to a <script> - inline js is bad practice and leads to hard-to-maintain code, even if it's just for easy answering to show what to do, people new to coding will see it and start getting into a habit of inline js which.. well is terrible :) but otherwise +1

Scott Marcus Over a year ago

Please don't advocate inline HTML event attributes. Separate the JavaScript from the HTML and use the DOM standard .addEventListener().

acdcjunior Over a year ago

@ThisGuyHasTwoThumbs @ScottMarcus Thanks for the kind input. In my experience, newbies don't get much the .addEventListener() strategy when they don't know a lot about events. But I'm just a bit low on faith these days. You are right, since this is a mostly educative environment, we should strive to show the correct way. (In other places we could start with the inline while saying that was not the optimal way, but that would be unfeasible here, since people copy&paste most of the code anyway.) Cheers!!

Scott Marcus Over a year ago

I would really advise against showing inline event attributes, ever. They aren't just syntactically inferior. There are real, tangible reasons why they can cause the code to operate incorrectly. They are a thing of the past. Let's let them go and never speak of them again. .addEventListener() is the correct and standard approach. Newbies need to learn that.

Scott Marcus Over a year ago

+1 for the adjustment to .addEventListener(). Now, could you include your code snippet here, rather than providing a link to an external site as those links can become dead over time?

|

Collectives™ on Stack Overflow

Using Javascript in HTML form

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related