Hoe kan ik de waarde van een HTML-formulier doorgeven aan JavaScript?
Is dit correct? Mijn script heeft twee argumenten, één uit het tekstvak en één uit de vervolgkeuzelijst.
<body>
<form name="valform" action="" method="POST">
Credit Card Validation: <input type="text" id="cctextboxid" name="cctextbox"><br/>
Card Type: <select name="cardtype" id="cardtypeid">
<option value="visa">Visa</option>
<option value="mastercard">MasterCard</option>
<option value="discover">Discover</option>
<option value="amex">Amex</option>
<option value="diners">Diners Club</option>
</select><br/>
<input type="button" name="submit" value="Verify Credit Card" onclick="isValidCreditCard(document.getElementById('cctextboxid').value,document.getElementById('cardtypeid').value)" />
</body>
Antwoord 1, autoriteit 100%
HTML:
<input type="text" name="name" id="uniqueID" value="value" />
JS:
var nameValue = document.getElementById("uniqueID").value;
Antwoord 2, autoriteit 66%
Als u de formulierwaarden wilt ophalen (zoals de waarden die zouden worden verzonden met een HTTP POST), kunt u het volgende gebruiken:
JavaScript
const formData = new FormData(document.querySelector('form'))
for (var pair of formData.entries()) {
// console.log(pair[0] + ': ' + pair[1]);
}
Form-Serialize (https://code.google.com/ Archief / p / form-serialize / )
serialize(document.forms[0]);
jQuery
$("form").serializeArray()
Antwoord 3, Autoriteit 31%
Hier is een voorbeeld van W3schools:
function myFunction() {
var elements = document.getElementById("myForm").elements;
var obj ={};
for(var i = 0 ; i < elements.length ; i++){
var item = elements.item(i);
obj[item.name] = item.value;
}
document.getElementById("demo").innerHTML = JSON.stringify(obj);
}
De demo is te vinden hier .
Antwoord 4, Autoriteit 21%
document.formsbevat een reeks formulieren op uw pagina. U kunt deze formulieren doorlopen om het specifieke formulier dat u verlangt te vinden.
var form = false;
var length = document.forms.length;
for(var i = 0; i < length; i++) {
if(form.id == "wanted_id") {
form = document.forms[i];
}
}
Elk formulier heeft een elementenarray die u vervolgens kunt doorlopen om de gewenste gegevens te vinden. U moet ze ook op naam gebruiken
var wanted_value = form.someFieldName.value;
jsFunction(wanted_value);
Antwoord 5, Autoriteit 10%
Ik vond dit de meest elegante oplossing.
function handleSubmit(e) {
e.preventDefault();
const formData = new FormData(e.target);
const formProps = Object.fromEntries(formData);
}
Antwoord 6, autoriteit 9%
Mijn 5 cent hier, met behulp van form.elementswaarmee u elk veld kunt doorzoeken met het is name, niet alleen door herhaling:
const form = document.querySelector('form[name="valform"]');
const ccValidation = form.elements['cctextbox'].value;
const ccType = form.elements['cardtype'].value;
Antwoord 7, autoriteit 8%
Dit is een ontwikkeld voorbeeld van https://stackoverflow.com/a/41262933/2464828
Overweeg
<form method="POST" enctype="multipart/form-data" onsubmit="return check(event)">
<input name="formula">
</form>
Laten we aannemen dat we de invoer van de naam formulawillen ophalen. Dit kan gedaan worden door het eventdoor te geven in het onsubmitveld. We kunnen dan FormDatagebruiken om de waarden van dit exacte formulier op te halen door te verwijzen naar het SubmitEvent-object.
const check = (e) => {
const form = new FormData(e.target);
const formula = form.get("formula");
console.log(formula);
return false
};
De bovenstaande JavaScript-code zal dan de waarde van de invoer naar de console afdrukken.
Als u de waarden wilt herhalen, dwz alle waarden wilt verkrijgen, raadpleegt u https://developer.mozilla.org/en-US/docs/Web/API/FormData#Methods
Antwoord 8, autoriteit 2%
Uitbreiding van het idee van Atrur Klesun… je kunt het gewoon bij zijn naam openen als je getElementById gebruikt om het formulier te bereiken. In één regel:
document.getElementById('form_id').elements['select_name'].value;
Ik gebruikte het zo voor keuzerondjes en werkte prima. Ik denk dat het hier hetzelfde is.
Antwoord 9
Verschillende gebruiksvriendelijke serializers voor formulieren met goede documentatie.
In volgorde van Github-sterren,
Antwoord 10
Probeer de code zoals hieronder te wijzigen:
<form
onSubmit={e => {
e.preventDefault();
e.stopPropagation();
const elements = Array.from(e.currentTarget) as HTMLInputElement[];
const state = elements.reduce((acc, el) => {
if (el.name) {
acc[el.name] = el.value;
}
return acc;
}, {});
console.log(state); // {test: '123'}
}}
>
<input name='test' value='123' />
</form>
Antwoord 11
Snelle oplossing om een formulier te serialiseren zonder bibliotheken
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) {
e.preventDefault()
console.log(
JSON.stringify(
serializeIt(document.forms[0]),
4, 4, 4
)
)
}<form onsubmit="whenSubmitted(event)">
<input type=text name=hiThere value=nothing>
<input type=radio name=okRadioHere value=nothin>
<input type=radio name=okRadioHere1 value=nothinElse>
<input type=radio name=okRadioHere2 value=nothinStill>
<input type=checkbox name=justAcheckBox value=checkin>
<input type=checkbox name=justAcheckBox1 value=checkin1>
<input type=checkbox name=justAcheckBox2 value=checkin2>
<select name=selectingSomething>
<option value="hiThere">Hi</option>
<option value="hiThere1">Hi1</option>
<option value="hiThere2">Hi2</option>
<option value="hiThere3">Hi3</option>
</select>
<input type=submit value="click me!" name=subd>
</form>Antwoord 12
Dit is het antwoord op uw vraag.
Je kunt de waarden van de formuliervelden doorgeven aan de functie door this.<<name of the field>>.valuete gebruiken.
En ook de invoer van de invoer gewijzigd in de knop Verzenden. De functie aangeroepen vanuit het formulier.
<body>
<form name="valform" method="POST" onsubmit="isValidCreditCard(this.cctextbox.value, this.cardtype.value)">
Credit Card Validation: <input type="text" id="cctextboxid" name="cctextbox"><br/>
Card Type:
<select name="cardtype" id="cardtypeid">
...
</select>
<br/>
<button type="submit">Verify Credit Card</button>
</body>
Technisch gezien kunt u dit in uw functie doen door document.getElementById("cctextboxid")te gebruiken. Maar zijn oplossing is beknopte en eenvoudige code.
Antwoord 13
<form id='form'>
<input type='text' name='title'>
<input type='text' name='text'>
<input type='email' name='email'>
</form>
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 })
/*
{name: "title", value: "a"}
{name: "text", value: "b"}
{name: "email", value: "c"}
*/
}
Antwoord 14
Ik weet dat dit een oud bericht is, maar misschien kan iemand in de rij dit gebruiken.
// use document.form["form-name"] to reference the form
const ccForm = document.forms["ccform"];
// bind the onsubmit property to a function to do some logic
ccForm.onsubmit = function(e) {
// access the desired input through the var we setup
let ccSelection = ccForm.ccselect.value;
console.log(ccSelection);
e.preventDefault();
}<form name="ccform">
<select name="ccselect">
<option value="card1">Card 1</option>
<option value="card2">Card 2</option>
<option value="card3">Card 3</option>
</select>
<button type="submit">Enter</button>
</form>Antwoord 15
<input type="text" id="note_text" />
let value = document.getElementById("note_text").value;