My html form action shows javascript code in the browser

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 .

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.

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>

event.preventDefault() prevents that if you dont want server sided things

function send(event)
{
    alert("the form has been sent");
    event.preventDefault();
}

<input onsubmit("send(event)")>