Test

const element = document.getElementByID('#form') const data = new FormData(element) const form = Array.from(data.entries()) /* form = [ ["title", "a"] ["text", "b"] ["email", "c"] ] */ for (const [name, value] of form) < console.log(< name, value >) /*   */ > 

Please try to change the code as below:

 
 < e.preventDefault(); e.stopPropagation(); const elements = Array.from(e.currentTarget); const state = elements.reduce((acc, el) => < if (el.name) < acc[el.name] = el.value; >return acc; >, <>); console.log(state); // >> > 
 

Several easy-to-use form serializers with good documentation.

It’s easy with one for-of loop you can get all field values even checkboxes values also.

In your HTML you should bind a handlSubmit() on your forms onsubmit event

in your javascript your code should apply the following logic no matter what name your assigned to your fields.

const handleSubmit = (event)=> < event.preventDefault(); const formData = new FormData(event.target); formObj = <>; for (const [fieldName] of formData) < const fieldValue = formData.getAll(fieldName); formObj[fieldName] = fieldValue.length == 1 ? fieldValue.toString() : fieldValue >console.log('formObj',formObj) > 

Quick solution to serialize a form without any libraries

function serializeIt(form) < return ( Array.apply(0, form.elements).map(x =>( (obj => ( x.type == "radio" || x.type == "checkbox" ) ? x.checked ? obj : null : obj )( < [x.name]:x.value >) ) ).filter(x => x) ); > function whenSubmitted(e)

Some answers above didn’t cater for forms with multiple fields with the same name e.g.multiple so I made this quickly. It expects field with the same name that you want to collect as an array to end in [] as a convention but could be updated to handle other scenarios.

function getFormValues(form) < const formData = new FormData(form); return Array.from(formData.entries()).reduce((prev, [inputName, val]) =>< return < . prev, [inputName]: inputName.endsWith('[]') ? prev[inputName] ? [. prev[inputName], val] : [val] : val, >; >, <>); > // alternative if you don't like reducers and nested ternary statements function getFormValues(form) < const formData = new FormData(form); const values = <>; for (const [inputName, val] of formData.entries()) < if (inputName.endsWith('[]')) < values[inputName] = values[inputName] ? [. values[inputName], val] : [val]; >else < values[inputName] = val; >> return values; > // then attach this to form submit function onSubmit(e) < e.preventDefault(); const values = getFormValues(e.target); // etc. >

values gives something like

Источник

Passing a form value to a JavaScript Function

I have read through lots of postings here and around the net, and I even have books covering this subjective, but I just can’t get it to work. I just can’t get the Function to pick up the value of the «RadioDrink» variable. I have tried all sorts of combinations Using DOM methods like below and here using a collection (this) and (form) with no luck. Any help would be appreciated.

      Tea 
Coffee 
Soup 
Milk Sugar 

6 Answers 6

This will give the value of «Soup» checkbox:

document.forms["Drinks"]["RadioDrink"][0].checked 

you need to do this in a different way. first of all your DOM is showing undefined value. you can add different ids to the radio buttons. you can do it like below

       Tea 
Coffee 
Soup 
Milk Sugar 

document.forms.Drinks.RadioDrink 

returns an array-like reference to all three inputs with that name, it doesn’t return a reference to the currently selected one. So you can’t just test the value property.

The easiest to explain way to achieve what you want to do is to give the radio buttons unique ids:

And then directly select the one you want to test:

if (document.getElementById("RadioDrinkSoup").checked) < alert("It's soup OK!"); return true; // soup >else < alert("OK"); return false; // not soup >

Источник

Input text form value from HTML into Javascript function

Beginner question, I am currently learning JS and I’m trying to write a function that will take a text input from a simple html form. I can’t figure out how to pass the text input into the function. This is what I am currently trying:

4 Answers 4

 var myColor = document.getElementById("textbox").value; 

Inside the findColor function:

I’m with David’s answer. You are using a form and you need to prevent default submission event like below by pasing a event parameter to the function as shown in the below code.

function findColor(e) < // e is a event parameter passed e.preventDefault(); var myColor = document.getElementById("textbox").value; switch(myColor)< case "Blue": document.write("just like the sky!"); break case "Red": document.write("Just like wine!"); break default: document.write("Suit yourself then. "); >return false; > 

As you can see I’m passing event like this findColor(event) in html

read about the document.write here and see a demo here the author explained it very neatly as

The use of document.write where native DOM alternatives such as document.createElement are more appropriate. document.write has been grossly misused over the years and has quite a few disadvantages including that if it’s executed after the page has been loaded it can actually overwrite the page we’re on, whilst document.createElement does not. We can see here for a live example of this in action. It also doesn’t work with XHTML which is another reason opting for more DOM-friendly methods such as document.createElement is favorable.

Or to pass it to the function do this:

 function findColor(myColor) < switch(myColor)< case "Blue": document.write("just like the sky!"); break case "Red": document.write("Just like wine!"); break default: document.write("Suit yourself then. "); >> 

This would work, its an example of how to pass something to a function, which was the question. Its an alternative to the other answers with the intention of helping a JavaScript beginner.

not trying to ruffle your feathers 🙂 I changed it from would to could work as I wasnt sure about hardcoding the onclick value. If I was going to post this sample I would do it as onclick=»findColor(document.getElementById(‘textbox’).value);» so it worked based on the input. But also I wouldn’t use onclick at all . But also I would use jquery so that will probably upset people anyway haha

No worries, your way is better, and Andrews is even better, it was just a simply example of how to pass data to a function. Jquery is deffo better

when the browser reads your html page it interprets the javascript section thus defining your findColor function and executing the line

var myColor = document.getElementById("textbox").value; 

Therefor myColor receives the initial value of your textbox element. By the time the page is fully loaded and you enter a value in the textbox the myColor assignment is already done. To make sure that the assignment is done at the right time, after clicking submit, aka when the findColor functiom is called, you have the two options mentioned above: Make the assignemt the first statement in your findColor function OR make it a parameter to the findColor function

There is a second flaw in this example. A form’s submit triggers reloading of an HTML page. Therefore you never see the result of your findColor function. A better way to play with Javascript is to tie functions to buttons. See the revised html below.

    
Colour FindColor 
 
what I think of this color
   

Источник