Ik probeer jQuery te gebruiken om een simpele ding te doen: wis de invoervelden van een groep van invoerveld in een div wanneer de formulierbelastingen, of als de gebruiker een keuzelijst verandert; Maar ik heb een duivel van een tijd om de selector te krijgen om te werken.
Eerst, hier is mijn onclick en onloadtriggers:
<form name="EditGenotype" action="process_GenotypeMaint.php" method="POST" onsubmit="return false" onload=clear_fetch() >
en op de picklists:
<SELECT multiple size=6 NAME="marker" onchange=show_marker() onclick=clear_fetch() >
Volgende, hier is mijn HTML-invoerelementen in de div die ik wil wissen:
<div class=fetch_results>
<fieldset>
<LEGEND><b>Edit Genotype, call 1</b></LEGEND>
<boldlabel>Allele_1</boldlabel><input id=allele_1_1 name=allele_1_1 size=5 >
<boldlabel>Allele_2</boldlabel><input id=allele_1_2 name=allele_1_2 size=5 >
<boldlabel>Run date</boldlabel><input id=run_date1 name=run_date1 size=10 disabled=true>
</fieldset>
<fieldset>
<LEGEND><b>Edit Genotype, call 2</b></LEGEND>
<boldlabel>Allele_1</boldlabel><input id=allele_2_1 name=allele_2_1 size=5 >
<boldlabel>Allele_2</boldlabel><input id=allele_2_2 name=allele_2_2 size=5 >
<boldlabel>Run date</boldlabel><input id=run_date2 name=run_date2 size=10 disabled=true>
</fieldset>
<fieldset>
<LEGEND><b>Edit Genotype, call 3</b></LEGEND>
<boldlabel>Allele_1</boldlabel><input id=allele_3_1 name=allele_3_1 size=5 >
<boldlabel>Allele_2</boldlabel><input id=allele_3_2 name=allele_3_2 size=5 >
<boldlabel>Run date</boldlabel><input id=run_date3 name=run_date3 size=10 disabled=true>
</fieldset>
</div>
Eindelijk, hier is mijn script:
function clear_fetch() {
$('#fetch_results:input', $(this)).each(function(index) {
this.value = "";
})
}
Er gebeurt echter niets … dus ik moet de selector niet correct hebben. Kijkt iemand wat ik verkeerd heb gedaan?
Antwoord 1, Autoriteit 100%
Fiddle: http://jsfiddle.net/simple/bdqvp/
U kunt het doen zoals SO:
Ik heb twee knoppen in de viool toegevoegd om te illustreren hoe u waarden kunt invoegen of wissen in die ingangsvelden via knoppen. U legt gewoon het ONClick -evenement vast en bel de functie.
//Fires when the Document Loads, clears all input fields
$(document).ready(function() {
$('.fetch_results').find('input:text').val('');
});
//Custom Functions that you can call
function resetAllValues() {
$('.fetch_results').find('input:text').val('');
}
function addSomeValues() {
$('.fetch_results').find('input:text').val('Lala.');
}
update:
Bekijk Dit geweldige antwoord hieronder door Beena ook voor een meer universele aanpak.
Antwoord 2, Autoriteit 95%
Deze functie wordt gebruikt om alle elementen in het formulier op te wissen inclusief keuzerondje, selectievakje, selecteren, meerdere select, wachtwoord, tekst, textarea, bestand.
function clear_form_elements(class_name) {
jQuery("."+class_name).find(':input').each(function() {
switch(this.type) {
case 'password':
case 'text':
case 'textarea':
case 'file':
case 'select-one':
case 'select-multiple':
case 'date':
case 'number':
case 'tel':
case 'email':
jQuery(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
break;
}
});
}
Antwoord 3, autoriteit 10%
Wijzig dit:
<div class=fetch_results>
Hiervoor:
<div id="fetch_results">
Dan zou het volgende moeten werken:
$("#fetch_results input").each(function() {
this.value = "";
})
Antwoord 4, autoriteit 6%
geïnspireerd door https://stackoverflow.com/a/10892768/2087666maar ik gebruik de selector in plaats van een klasse en geef er de voorkeur aan om over te schakelen:
function clearAllInputs(selector) {
$(selector).find(':input').each(function() {
if(this.type == 'submit'){
//do nothing
}
else if(this.type == 'checkbox' || this.type == 'radio') {
this.checked = false;
}
else if(this.type == 'file'){
var control = $(this);
control.replaceWith( control = control.clone( true ) );
}else{
$(this).val('');
}
});
}
dit zou bijna alle invoer in elke selector moeten regelen.
Antwoord 5, autoriteit 3%
Een paar problemen die ik zie. fetch_resultsis een klasse, geen ID en elke functie ziet er niet goed uit.
$('.fetch_results:input').each(function() {
$(this).val('');
});
Onthoud wel dat als je radio’s of vinkjes krijgt, je het aangevinkte attribuut moet wissen, niet de waarde.
Antwoord 6, autoriteit 2%
Moest gewoon alle invoer binnen een div & het gebruik van de dubbele punt voor de invoer bij targeting krijgt bijna alles.
$('#divId').find(':input').val('');
Antwoord 7
Hier is het antwoord van Beena in ES6 Sans the JQuery-afhankelijkheid.. Bedankt Beena!
let resetFormObject = (elementID)=> {
document.getElementById(elementID).getElementsByTagName('input').forEach((input)=>{
switch(input.type) {
case 'password':
case 'text':
case 'textarea':
case 'file':
case 'select-one':
case 'select-multiple':
case 'date':
case 'number':
case 'tel':
case 'email':
input.value = '';
break;
case 'checkbox':
case 'radio':
input.checked = false;
break;
}
});
}
Antwoord 8
Als je bij een selector op klasniveau wilde blijven, zou je zoiets als dit kunnen doen (met dezelfde jfiddle van Mahn)
$("div.fetch_results input:text").each(function() {
this.value = "testing";
})
Hiermee worden alleen de tekstinvoervakken binnen de div met een klasse fetch_results geselecteerd.
Zoals bij elke jQuery is dit slechts één manier om het te doen. Stel deze vraag aan 10 jQuery-mensen en je krijgt 12 antwoorden.
Antwoord 9
$.each($('.fetch_results input'), function(idx, input){
$(input).val('');
});
Antwoord 10
Voor sommigen die het formulier wil resetten, kan ook type="reset"in elke vorm gebruiken.
<form action="/action_page.php">
Email: <input type="text" name="email"><br>
Pin: <input type="text" name="pin" maxlength="4"><br>
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>