validacion - validar formulario javascript onclick
Javascript Obtenga valores del cuadro de opción de selección múltiple (4)
Este me está volviendo loco. Tiene que ser algo simple y estúpido que estoy pasando por alto. Tengo un cuadro de selección múltiple en un formulario. Solo estoy tratando de obtener los valores que se seleccionan. En mi ciclo, si uso la alerta, entonces no tengo ningún problema. Tan pronto como trate de concatenar los valores que obtengo, el error ''SelBranch [...]. Selected'' es nulo o no es un objeto
<form name="InventoryList" method="post" action="InventoryList.asp">
<select name="SelBranch" class="bnotes" size="5" multiple="multiple">
<option value="All">All</option>
<option value="001 Renton">001 Renton</option>
<option value="002 Spokane">002 Spokane</option>
<option value="003 Missoula">003 Missoula</option>
<option value="004 Chehalis">004 Chehalis</option>
<option value="005 Portland">005 Portland</option>
<option value="006 Anchorage">006 Anchorage</option>
<option value="018 PDC">018 PDC</option>
</select>
<input type="button" name="ViewReport" value="View" class="bnotes" onclick="GetInventory();">
</form>
<script language="JavaScript">
function GetInventory()
{
var InvForm = document.forms.InventoryList;
var SelBranchVal = "";
var x = 0;
for (x=0;x<=InvForm.SelBranch.length;x++)
{
if (InvForm.SelBranch[x].selected)
{
//alert(InvForm.SelBranch[x].value);
SelBranchVal = SelBranchVal + "," + InvForm.SelBranch[x].value;
}
}
alert(SelBranchVal);
}
</script>
Además, cambia esto:
SelBranchVal = SelBranchVal + "," + InvForm.SelBranch[x].value;
a
SelBranchVal = SelBranchVal + InvForm.SelBranch[x].value+ "," ;
El motivo es que, por primera vez, la variable SelBranchVal estará vacía
Aquí estoy publicando la respuesta solo para referencia que puede ser útil.
<!DOCTYPE html>
<html>
<head>
<script>
function show()
{
var InvForm = document.forms.form;
var SelBranchVal = "";
var x = 0;
for (x=0;x<InvForm.kb.length;x++)
{
if(InvForm.kb[x].selected)
{
//alert(InvForm.kb[x].value);
SelBranchVal = InvForm.kb[x].value + "," + SelBranchVal ;
}
}
alert(SelBranchVal);
}
</script>
</head>
<body>
<form name="form">
<select name="kb" id="kb" onclick="show();" multiple>
<option value="India">India</option>
<option selected="selected" value="US">US</option>
<option value="UK">UK</option>
<option value="Japan">Japan</option>
</select>
<!--input type="submit" name="cmdShow" value="Customize Fields"
onclick="show();" id="cmdShow" /-->
</form>
</body>
</html>
El bucle for tiene una ejecución extra. Cambio
for (x=0;x<=InvForm.SelBranch.length;x++)
a
for (x=0; x < InvForm.SelBranch.length; x++)
Eche un vistazo a HTMLSelectElement.selectedOptions .
HTML
<select name="north-america" multiple>
<option valud="ca" selected>Canada</a>
<option value="mx" selected>Mexico</a>
<option value="us">USA</a>
</select>
JavaScript
var elem = document.querySelector("select");
console.log(elem.selectedOptions);
//=> HTMLCollection [<option value="ca">Canada</option>, <option value="mx">Mexico</option>]
Esto también funcionaría en elementos <select> no multiple
Advertencia: el soporte para esta selectedOptions parece bastante desconocido en este momento