Проблема с функцией JS: не отключить кнопку

Question

Я работаю над формой моего бизнеса. Все работает нормально Сейчас я занимаюсь разработкой сценария, поэтому форма не может быть отправлена, если какой-либо из входных данных не заполнен. Я написал код, но он не работает, и я не могу понять, почему. Не могли бы вы мне помочь? Сценарий в конце сравнивает все переменные с 0, и если любая из них равна 0, он отключает кнопку отправки.

Вот полный код.

<form id="alta_usuario" action="envia_form.php" method="post"><input name="tarifa" type="radio" value="3" /> <b>Llamadas ilimitadas + 3GB 12,68€/mes</b>
<input name="tarifa" id="tarifa" type="radio" value="5" /> <b>Llamadas ilimitadas + 5GB 16,09€/mes</b>
<input name="tarifa" id="tarifa" type="radio" value="10" /> <b>Llamadas ilimitadas + 10GB 16,94€/mes</b>
<input name="tarifa" id="tarifa" type="radio" value="20" /> <b>Llamadas ilimitadas + 20GB 18,65€/mes</b><br>
<input name="bono1" type="checkbox" /> Añade más megas a tu tarifa de contrato. <b> BONO 1 GB 2,55€/mes</b>

<hr />

<strong>RECUERDA QUE...</strong>
<ul>
    <li>La tarjeta SIM que te proporcionamos es gratuita.</li>
    <li>Todos los precios que mostramos son con impuestos incluidos.</li>
    <li>Ninguna de nuestras tarifas tienen permanencia.</li>
    <li>Puedes añadir bonos de voz o datos para ampliar tu tarifa.</li>
</ul>
&nbsp;

<hr />

<center><strong>RELLENA EL FORMULARIO DE ABAJO PARA DARTE DE ALTA CON LA CABRA</strong></center><center></center><center></center><center></center><strong>DATOS PERSONALES</strong>
<ul>
    <li>Nosotros hablamos con tu operador y nos encargamos de la portabilidad.</li>
    <li>No te quedaras sin línea.</li>
    <li>Te enviamos tu pedido con la SIM antes de que se haga la portabilidad de tu línea.</li>
    <li>Para obtener el ICCID de la tarjeta, si usas iPhone pincha <a href="https://support.apple.com/es-es/HT204073">aquí</a> o, si usas Android, pincha <a href="https://play.google.com/store/apps/details?id=it.ale32thebest.simserialnumber&amp;hl=es">aquí</a> para bajarte una app que te lo indicará.</li>
</ul>

<!--corrector numero telefonico !-->
<script language="javascript">
    function muestra_alerta_numero() {
        var contenedor1 = document.getElementById("contenedor_alerta_numero");
        var contenedor2 = document.getElementById("contenedor_correcto_numero");
        var numero = document.getElementById("numero").value;
        var tamaño_numero = numero.length;
        if (tamaño_numero == 9) {
            contenedor2.style.display = 'block';
            contenedor1.style.display = 'none';
        } else {
            contenedor2.style.display = 'none';
            contenedor1.style.display = 'block';
        };
    };
</script>
<b>Tu número</b><span style="color: #ff0000;">*</span>
<input maxlength="9" name="numero_origen" id="numero" size="100" type="text" onKeyUp="javascript:muestra_alerta_numero();" />
<div id="contenedor_alerta_numero" style="display:none">
    <font color="#ff0000">
        <i>El numero introducido debe tener 9 d&iacute;gitos. Por favor, compru&eacute;balo.</i>
    </font>
</div>
<div id="contenedor_correcto_numero" style="display:none">
    <font color="#229954">
        <i>El n&uacute;mero introducido es correcto.</i>
    </font>
</div>

<!--corrector ICC-ID !-->
<script language="javascript">
    function corrector_icc_id() {
        var contenedor3 = document.getElementById("contenedor_alerta_icc_id");
        var contenedor4 = document.getElementById("contenedor_correcto_icc_id");
        var icc_id = document.getElementById("iccid").value;
        var tamaño_icc_id = icc_id.length;
        if (tamaño_icc_id == 19) {
            contenedor4.style.display = 'block';
            contenedor3.style.display = 'none';
        } else {
            contenedor4.style.display = 'none';
            contenedor3.style.display = 'block';
        };
    };
</script>
<b>ICC-ID a portar</b><span style="color: #ff0000;">*</span>
<input name="icc_id" size="100" id="iccid" type="text" maxlength="19" onKeyUp="javascript:corrector_icc_id();" />
<div id="contenedor_alerta_icc_id" style="display:none">
    <font color="#ff0000">
        <i>El ICC-ID debe tener 19 d&iacute;gitos. Por favor, compru&eacute;balo.</i>
    </font>
</div>
<div id="contenedor_correcto_icc_id" style="display:none">
    <font color="#229954">
        <i>El ICC-ID introducido es correcto.</i>
    </font>
</div>

<!--corrector operadora !-->
<script language="javascript">
    function corrector_operadora() {
        var contenedor5 = document.getElementById("contenedor_alerta_operadora");
        var operadora = document.getElementById("operadora").value;
        var tamaño_operadora = operadora.length;
        if (tamaño_operadora <= 1) {
            contenedor5.style.display = 'block';
        } else {
            contenedor5.style.display = 'none';
        };
    };
</script>
<b>Tu operadora actual</b><span style="color: #ff0000;">*</span>
<input name="operadora" id="operadora" size="100" type="text" onKeyUp="javascript:corrector_operadora();" />
<div id="contenedor_alerta_operadora" style="display:none">
    <font color="#ff0000">
        <i>Debes introducir tu operador actual (Orange, Movistar, Vodafone...)</i>
    </font>
</div>

<!--corrector nombre !-->
<script language="javascript">
    function corrector_nombre() {
        var contenedor6 = document.getElementById("contenedor_alerta_nombre");
        var nombre = document.getElementById("nombre").value;
        var tamaño_nombre = nombre.length;
        if (tamaño_nombre <= 2) {
            contenedor6.style.display = 'block';
        } else {
            contenedor6.style.display = 'none';
        };
    };
</script>
<b>Nombre</b><span style="color: #ff0000;">*</span>
<input name="nombre" id="nombre" size="100" type="text" onKeyUp="javascript:corrector_nombre();" />
<div id="contenedor_alerta_nombre" style="display:none">
    <font color="#ff0000">
        <i>Debes introducir tu nombre tal y como figura en tu documento de identidad.</i>
    </font>
</div>

<!--corrector apellido !-->
<script language="javascript">
    function corrector_apellido() {
        var contenedor7 = document.getElementById("contenedor_alerta_apellido");
        var apellido = document.getElementById("apellido").value;
        var tamaño_apellido = apellido.length;
        if (tamaño_apellido <= 2) {
            contenedor7.style.display = 'block';
        } else {
            contenedor7.style.display = 'none';
        };
    };
</script>
<b>Apellido(s)</b><span style="color: #ff0000;">*</span>
<input name="apellidos" id="apellido" size="100" type="text" onKeyUp="javascript:corrector_apellido();" />
<div id="contenedor_alerta_apellido" style="display:none">
    <font color="#ff0000">
        <i>Debes introducir tu(s) apellido(s) tal y como figura(n) en tu documento de identidad.</i>
    </font>
</div>

<!--corrector direccion !-->
<script language="javascript">
    function corrector_direccion() {
        var contenedor8 = document.getElementById("contenedor_alerta_direccion");
        var direccion = document.getElementById("direccion").value;
        var tamaño_direccion = direccion.length;
        if (tamaño_direccion <= 2) {
            contenedor8.style.display = 'block';
        } else {
            contenedor8.style.display = 'none';
        };
    };
</script>
<b>Domicilio</b><span style="color: #ff0000;">*</span>
<input name="direccion" id="direccion" size="100" type="text" onKeyUp="javascript:corrector_direccion();" />
<div id="contenedor_alerta_direccion" style="display:none">
    <font color="#ff0000">
        <i>Debes introducir un domicilio v&aacute;lido</i>
    </font>
</div>

<!--corrector ciudad !-->
<script language="javascript">
    function corrector_ciudad() {
        var contenedor9 = document.getElementById("contenedor_alerta_ciudad");
        var ciudad = document.getElementById("ciudad").value;
        var tamaño_ciudad = ciudad.length;
        if (tamaño_ciudad <= 3) {
            contenedor9.style.display = 'block';
        } else {
            contenedor9.style.display = 'none';
        };
    };
</script>
<b>Ciudad</b><span style="color: #ff0000;">*</span>
<input name="ciudad" id="ciudad" size="100" type="text" onKeyUp="javascript:corrector_ciudad();" />
<div id="contenedor_alerta_ciudad" style="display:none">
    <font color="#ff0000">
        <i>Debes introducir una ciudad v&aacute;lida</i>
    </font>
</div>

<!--corrector email !-->
<script language="javascript">
    function corrector_email() {
        var contenedor10 = document.getElementById("contenedor_alerta_email");
        var email = document.getElementById("email").value;
        var tamaño_email = email.length;
        if (tamaño_email <= 10) {
            contenedor10.style.display = 'block';
        } else {
            contenedor10.style.display = 'none';
        };
    };
</script>
<b>Dirección de correo electrónico</b><span style="color: #ff0000;">*</span>
<input name="email" id="email" size="100" type="text" onKeyUp="javascript:corrector_email();" />
<div id="contenedor_alerta_email" style="display:none">
    <font color="#ff0000">
        <i>Asegúrate de que la direcci&oacute;n de correo que escribes sea correcta. Si detectamos que no lo es, el alta no será posible.</i>
    </font>
</div>

<b>Fecha de nacimiento</b>
<select name="fnac_dia">
<option>Día...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select><select name="fnac_mes">
<option>Mes...</option>
<option value="enero">Enero</option>
<option value="febrero">Febrero</option>
<option value="marzo">Marzo</option>
<option value="abril">Abril</option>
<option value="mayo">Mayo</option>
<option value="junio">Junio</option>
<option value="julio">Julio</option>
<option value="agosto">Agosto</option>
<option value="septiembre">Septiembre</option>
<option value="octubre">Octubre</option>
<option value="noviembre">Noviembre</option>
<option value="diciembre">Diciembre</option>
</select><select name="fnac_anio">
<option>A&ntilde;o...</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
</select>

<!--corrector id !-->
<script language="javascript">
    function corrector_ID() {
        var tipo_id = document.getElementById("tipo_id").value;
        var contenedor11_a = document.getElementById("contenedor_alerta_NIE");
        var IDE = document.getElementById("numero_id").value;
        var tamaño_id = IDE.length;
        if (tamaño_id < 9){
            contenedor11_a.style.display = 'block';
        } else {
            contenedor11_a.style.display = 'none';
        };
    };      
</script>
<b>Documento de identidad</b><span style="color: #ff0000;">*</span>
<select name="tipo_id" id="tipo_id">
<option value="DNI">DNI</option>
<option value="NIE">NIE</option>
<option value="CIF">CIF</option>
</select><input maxlength="9" name="numero_id" id="numero_id" size="10" type="text" onKeyUp="javascript:corrector_ID();" />

<div id="contenedor_alerta_NIE" style="display:none">
    <font color="#ff0000">
        <i>Debes introducir una identificaci&oacute; v&aacute;lida, sin tener en cuenta guiones. Por ejemplo: X1234567J, B12345678 ó 12345678R </i>
    </font>
</div>

&nbsp;

<b>TUS DATOS BANCARIOS</b>
Tu número de cuenta para pagar las facturas mensuales debe cumplir los siguientes requisitos:
<ul>
    <li>El titular de la cuenta debe ser el mismo de la línea.</li>
    <li>Debe ser una cuenta válida que admita y tenga domiciliaciones vigentes.</li>
    <li>Si tienes otra línea de contrato, tiene que estar domiciliada en la misma cuenta.</li>
    <li>Ordenas a la entidad bancaria que a partir de ahora y hasta nueva orden, atienda con cargo a la cuenta señalada más abajo los pagos a favor de PRIORGAME S.L. (NetService) que le notifiquemos.</li>
</ul>
&nbsp;
<!--corrector iban !-->
<script language="javascript">
    function corrector_iban() {
        var contenedor12 = document.getElementById("contenedor_alerta_iban");
        var iban = document.getElementById("iban").value;
        var tamaño_iban = iban.length;
        if (tamaño_iban != 24) {
            contenedor12.style.display = 'block';
        } else {
            contenedor12.style.display = 'none';
        };
    };
</script>
<b>Número de IBAN</b><span style="color: #ff0000;">*</span>
<input maxlength="24" name="iban" id="iban" size="100" type="text" onKeyUp="javascript:corrector_iban();" /><br><br>
<div id="contenedor_alerta_iban" style="display:none">
    <font color="#ff0000">
        <i>Aseg&uacute;rate de que el IBAN introducido es correcto</i>
    </font>
</div>
&nbsp;
<p />

<script language="javascript">
    function habilitar_boton() {
        var detector_tarifa = document.getElementById("tarifa").value.length;
        var detector_numero = document.getElementById("numero").value.length;
        var detector_iccid = document.getElementById("iccid").value.length;
        var detector_operadora = document.getElementById("operadora").value.length;
        var detector_nombre = document.getElementById("nombre").value.length;
        var detector_apellido = document.getElementById("apellido").value.length;
        var detector_direccion = document.getElementById("direccion").value.length;
        var detector_ciudad = document.getElementById("ciudad").value.length;
        var detector_email = document.getElementById("email").value.length;
        var detector_numero_id = document.getElementById("numero_id").value.length;
        var detector_iban = document.getElementById("iban").value.length;

        //Localizamos el boton "Enviar Formulario" y asignamos su dirección (byId) a una variable. Además,
        //asignamos a una variable el atributo "disabled" para activar o desactivar el botón segun
        //se cumpla, o no, la condición.
        var boton_submit_form = document.getElementById("boton_enviar").disabled;

        //Comenzamos con el procedimiento que ha de seguir la función. Lo que estamos haciendo con ella es
        //comparar todos los length de los inputs con 0. Si es igual a cero, llevaremos a cabo las acciones 
        //arriba definidas.
        if (detector_tarifa == 0){
            boton_submit_form = true;
        } else if (detector_numero == 0){
            boton_submit_form = true;
        } else if (detector_iccid == 0){
            boton_submit_form = true;
        } else if (detector_operadora == 0){
            boton_submit_form = true;
        } else if (detector_nombre == 0){
            boton_submit_form = true;
        } else if (detector_apellido == 0){
            boton_submit_form = true;
        } else if (detector_direccion == 0){
            boton_submit_form = true;
        } else if (detector_ciudad == 0){
            boton_submit_form = true;
        } else if (detector_email == 0){
            boton_submit_form = true;
        } else if (detector_numero_id == 0){
            boton_submit_form = true;
        } else if (detector_iban == 0){
            boton_submit_form = true;
        } else {
            boton_submit_form = false;
        };
    };      
</script>

<input type="submit" id="boton_enviar" value="Enviar formulario" onMouseOver="javascript:habilitar_boton();" />


</form>

Answer 1

Я считаю, что ваша проблема в том, что когда вы выполняете эту строку кода:

var boton_submit_form = document.getElementById("boton_enviar").disabled;

Вы сохраняете логическое значение того, отключена кнопка или нет, в переменной boton_submit_form. В итоге получается просто boolean хранилище. В нем нет ссылки на то, откуда взялась эта логическая переменная или на какой объект пользовательского интерфейса вы ссылались.

Итак, далее, когда вы делаете boton_submit_form = true;, оно просто меняет это логическое значение, но, опять же, оно ни на что не ссылается, и поэтому кнопка остается включенной.

Что вы должны сделать, это:

var boton_submit_form = document.getElementById("boton_enviar");

И затем, в ваших операторах if / else if вы можете включить или отключить кнопку следующим образом:

boton_submit_form.disabled = false; // To keep the button enabled
boton_submit_form.disabled = true;  // To disable the button