0

I have the following code written in html

<form id = "name" action="../js/customerData.js">
    First name: <input id = "firstName" type="text" name="firstName" placeholder="First Name"><br>
    Last name: <input id = "lastName" type="text" name="lastName" placeholder="Last Name"><br>
    <input type="submit" name="FLnames" id="FLnameVar" value="Submit">
</form>

And this code written in javascript which is what the form action calls

firstName = document.getElementByName("firstName");
lastName = document.getElementByName("lastName");
document.write(firstName);

However, when I submit the html form the browser just displays the javascript. Does anyone know why this is and how I can fix it? Thanks

kiozorg
  • 29
  • 4

3 Answers3

0

An HTML form submits its data to a resource that can provide a response. Since your form submits directly to a .js file, the browser just displays it because the HTML page that submitted the data is no longer loaded in the browser. There are no elements to get and no document to scan.

You need to post your form data to a resource that can process HTTP requests and provide an HTTP response like a .php file.

See this for an overview of processing form data (scroll to the "On the server side: retrieving the data" section). It gives several examples in various server-side languages.

Also, getElementByName() doesn't exist, it's getElementsByName(). But, you won't be able to use that when looking at the submitted form data because (again) that document and all of its elements will no longer be loaded. Instead, when processing form data, you must query the request object.

Scott Marcus
  • 57,085
  • 6
  • 34
  • 54
0

Your form action is sending a post/get request to "../js/customerData.js"

your url would look like this 

/js/customerData.js?first-name=jio&lastName=jio&FLnames=Submit

Usually you would use a server side language to handle the data from the URL where you could get those values through $_POST["first-name"] (PHP)

If you sending it to a javaScript file it is not "parsed" The browser sees it as a text file .In order to get the Javascript to work , make it an html file (or server file ) and tell the browser you running a script with the script tag 

        <script type="text/javascript">          
         //...
        </script>.

Alternatively if you using JS use the

!#

in form action i.e (<form id = "name" action="!#">)

then use an JavaScript event listener to listen for the form submit

var ele = document.getElementById('name');
if(ele.addEventListener){
    ele.addEventListener("submit", callback, false);  //Modern browsers
}else if(ele.attachEvent){
    ele.attachEvent('onsubmit', callback);            //Old IE
}

In the callback use JS to get the elements Value 

function Callback ()
{
let fname =  document.getElementById("firstName").innerHTML;
// then you use the value to post 
}

The last stage using this method to save it is to use something like ajax to send to a server

I hope this helps you .

JonoJames
  • 864
  • 7
  • 18
  • 1
    I think we can safely never ever bring up `attachEvent()` ever again. Anyone still working with IE 8 deserves what they get. – Scott Marcus Nov 02 '19 at 20:44
  • I agree but for legacy reference and its default on a windows pc running anything less than XP – JonoJames Nov 02 '19 at 20:50
  • 1
    It's only used in IE 8 or less (that's 2009 by the way) and as I say, that's not worth keeping up with. – Scott Marcus Nov 02 '19 at 20:51
  • this seems to work better than before and it does not show the javascript code anymore but i do get an error that says it cannot read property 'addEventListener' of null – kiozorg Nov 02 '19 at 20:56
  • Ok so that means that var ele = document.getElementById('name'); is not finding your form by ID what is the ID of the form
    – JonoJames Nov 02 '19 at 21:04
  • well the html is calling the js file so I dont know how it would be possible for the js to run before the html – kiozorg Nov 02 '19 at 21:12
  • //... //... The script tag must be called after the form is in the DOM or the script wont see it . The browser parses stuff from top to bottom – JonoJames Nov 02 '19 at 21:21
0

A few improvements:

  • Please do all styling in css and avoid <br> statements to structure your content
  • No need to use action attribute. Just place your js code in a separate script tag or load them in using a script tag with a src attribute.
  • Use the html <label> tag for your labels
  • To get the form values, register a form submit handler and get the values from e.target.elements
  • Don´t use document.write ( Why is document.write considered a "bad practice"? )
  • Instead, use something like document.body.append

const form = document.getElementById("name")

form.addEventListener("submit", e => {
  e.preventDefault();
  
  // Read all form values 
  const lastName = e.target.elements.lastName.value;
  
  // Write text to dom
  const ele = document.createTextNode(lastName); 
  document.body.append(ele);
})
<form id="name">
    <label for="firstName">
      First name:
    </label>
    <input id = "firstName" type="text" name="firstName" placeholder="First Name">
    <label for="lastName">
      Last name:
    </label>
    <input id = "lastName" type="text" name="lastName" placeholder="Last Name">
    <input type="submit" name="FLnames" id="FLnameVar" value="Submit">
</form>
user148397
  • 170
  • 6