llamando Javascript a partir de un formulario HTML

Estoy basando mi pregunta y el ejemplo de la respuesta de Jason en this preguntallamando Javascript a partir de un formulario HTML

que estoy tratando de evitar el uso de un eventListner, y sólo para llamar handleClick onsubmit, cuando se hace clic en el botón de envío.

Absolutamente no ocurre nada con el código que tengo.

¿Por qué no se llama a handleClick?

<html> 
    <head> 
    <script type="text/javascript"> 
     function getRadioButtonValue(rbutton) 
     { 
     for (var i = 0; i < rbutton.length; ++i) 
     { 
      if (rbutton[i].checked) 
      return rbutton[i].value; 
     } 
     return null; 
     } 

     function handleClick(event) 
     { 
     alert("Favorite weird creature: "+getRadioButtonValue(this["whichThing"])); 
     event.preventDefault(); // disable normal form submit behavior 
     return false; // prevent further bubbling of event 
     } 
    </script> 
    </head> 
<body> 
    <form name="myform" onSubmit="JavaScript:handleClick()"> 
     <input name="Submit" type="submit" value="Update" onClick="JavaScript:handleClick()"/> 
     Which of the following do you like best? 
     <p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p> 
     <p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p> 
     <p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p> 
    </form> 
</body> 
</html>

edición:

Por favor, no sugieren un marco como una solución.

Aquí están los cambios relevantes que he realizado en el código, que da como resultado el mismo comportamiento.

 function handleClick() 
     { 
     alert("Favorite weird creature: "+getRadioButtonValue(document.myform['whichThing']))); 
     event.preventDefault(); // disable normal form submit behavior 
     return false; // prevent further bubbling of event 
     } 
    </script> 
    </head> 
<body> 
<form name="aye">; 
     <input name="Submit" type="submit" value="Update" action="JavaScript:handleClick()"/> 
     Which of the following do you like best? 
     <p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p> 
     <p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p> 
     <p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p> 
    </form>

Fuente

2009-03-25 Joshxtothe4

ninguno de los métodos funcionaría en los navegadores modernos si no tiene el atributo 'sandbox =" allow-scripts "' para el elemento de formulario. http://www.w3schools.com/Tags/att_iframe_sandbox.asp –

En este fragmento de código:

getRadioButtonValue(this["whichThing"]))

en realidad no estás obteniendo una referencia a nada. Por lo tanto, su radiobutton en la función getradiobuttonvalue no está definido y arroja un error.

EDITAR para obtener el valor de los botones de radio, agarra la biblioteca JQuery, y luego usar esto:

$('input[name=whichThing]:checked').val()

Editar 2 Debido al deseo de reinventar la rueda, aquí está código no Jquery:

var t = ''; 
for (i=0; i<document.myform.whichThing.length; i++) { 
    if (document.myform.whichThing[i].checked==true) { 
     t = t + document.myform.whichThing[i].value; 
    } 
}

o, básicamente, modifique la línea original de código para leer así:

getRadioButtonValue(document.myform.whichThing))

Datos 3 Aquí es su tarea:

 function handleClick() { 
     alert("Favorite weird creature: " + getRadioButtonValue(document.aye.whichThing)); 
     //event.preventDefault(); // disable normal form submit behavior 
     return false; // prevent further bubbling of event 
     } 
    </script> 
    </head> 
<body> 
<form name="aye" onSubmit="return handleClick()"> 
    <input name="Submit" type="submit" value="Update" /> 
    Which of the following do you like best? 
    <p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p> 
    <p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p> 
    <p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p> 
</form>

observa lo siguiente, me he trasladado a la llamada de función evento "onSubmit" del formulario. Una alternativa sería cambiar su botón ENVIAR a un botón estándar y colocarlo en el evento OnClick para el botón. También eliminé el "JavaScript" innecesario delante del nombre de la función, y agregué un RETORNO explícito sobre el valor que sale de la función.

En la función en sí, modifiqué cómo se estaba accediendo al formulario. La estructura es: documento. [EL NOMBRE DEL FORMULARIO]. [EL NOMBRE DEL CONTROL] para obtener cosas. Como renombró su nombre de aye, tuvo que cambiar el document.myform. a document.aye. Además, el documento .aye ["whichThing"] es simplemente incorrecto en este contexto, ya que tenía que ser document.aye.whichThing.

El último bit, me comentó el event.preventDefault();. esa línea no era necesaria para esta muestra.

EDITAR 4 Solo para ser claro. document.aye ["whichThing"] le proporcionará acceso directo al valor seleccionado, pero document.aye.whichThrough le da acceso a la colección de botones de radio que luego debe verificar. Como está utilizando la función "getRadioButtonValue (object)" para recorrer la colección, debe usar document.aye.whichThing.

ver la diferencia en este método:

function handleClick() { 
    alert("Direct Access: " + document.aye["whichThing"]); 
    alert("Favorite weird creature: " + getRadioButtonValue(document.aye.whichThing)); 
    return false; // prevent further bubbling of event 
}

Fuente

2009-03-25 21:25:16

¿De qué otra forma obtendría el valor de un radioButton? –

Use getRadioButtonValue (document.myform ['whichThing']). Estoy pasando por alto javascript OO un poco aquí, pero "esto" se utiliza para referirse a un objeto cuando una función es parte del alcance del objeto. Su ejemplo usa funciones de nivel superior y ningún objeto. –

Ahh, esto está fallando también. ¿Puedes dar más de un ejemplo? –

Retire javascript: de onclick=".., onsubmit=".. declaraciones

javascript: prefijo se utiliza sólo en href="" o similares atributos (no eventos relacionados)

Fuente

2009-03-25 21:25:10

También se puede usar javascript forma url con

<form action="javascript:handleClick()">

O utilizar controlador de eventos onSubmit

<form onSubmit="return handleClick()">

En la forma posterior, si devuelve falso del handleClick evitará el procedimiento de sumisión normal. Devuelve verdadero si quieres que el navegador siga el procedimiento de sumisión normal.

Su controlador de eventos onSubmit en el botón también falla debido a la parte Javascript:

EDIT: yo sólo probamos este código y funciona:

<html> 
    <head> 
    <script type="text/javascript"> 

     function handleIt() { 
     alert("hello"); 
     } 

    </script> 
    </head> 

<body> 
    <form name="myform" action="javascript:handleIt()"> 
     <input name="Submit" type="submit" value="Update"/> 
    </form> 
</body> 
</html>

Fuente

2009-03-25 21:33:48 Miquel

Intenté ambos estos, ninguno hizo ninguna diferencia, no se mostró ninguna alerta independientemente de lo que probé –

Por favor, vea mi edición, la solución funciona – Miquel

Joshxtothe4 tiene razón ... su alerta está fallando, no principalmente porque su función no se está llamando, ni porque está siendo llamado dos veces debido a la duplicación de la llamada al evento javascript, pero debido a que el constructo this ["whichThing"] está causando un error. –

Hay algunas cosas a cambio en su versión editada:

Ha tomado la sugerencia de usar g document.myform['whichThing'] un poco demasiado literal. Su formulario se llama "aye", por lo que el código para acceder a los botones de opción de "whatThing" debe usar ese nombre: `document.aye ['whichThing'].
No existe el atributo action para la etiqueta <input>. Use onclick en su lugar: <input name="Submit" type="submit" value="Update" onclick="handleClick();return false"/>
La obtención y cancelación de un objeto Evento en un navegador es un proceso muy complicado. Varía mucho según el tipo de navegador y la versión. IE y Firefox manejan estas cosas de manera muy diferente, por lo que un simple event.preventDefault() no funcionará ... de hecho, la variable de evento probablemente ni siquiera se definirá porque se trata de un controlador onclick de una etiqueta. Esta es la razón por la cual Stephen está intentando tanto sugerir un marco. Me doy cuenta de que quieres saber la mecánica, y recomiendo google para eso. En este caso, como una solución simple, use return false en la etiqueta onclick como en el número 2 anterior (o devuelva falso de la función como se sugirió stephen).
Debido a # 3, deshazte de todo, no de la instrucción de alerta en tu controlador.

El código debe parecerse a:

function handleClick() 
     { 
     alert("Favorite weird creature: "+getRadioButtonValue(document.aye['whichThing'])); 
     } 
    </script> 
    </head> 
<body> 
    <form name="aye"> 
     <input name="Submit" type="submit" value="Update" onclick="handleClick();return false"/> 
     Which of the following do you like best? 
     <p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p> 
     <p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p> 
     <p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p> 
    </form>

Fuente

2009-03-26 17:51:19

Gracias por su ayuda. Elegí la respuesta de Stephens porque sentí que poner mucho más trabajo en, pero su respuesta también fue muy útil. Salud. –

Bastante ejemplo de Miquel (# 32) debe ser rellenado:

<html> 
<head> 
    <script type="text/javascript"> 
    function handleIt(txt) { // txt == content of form input 
    alert("Entered value: " + txt); 
    } 
    </script> 
</head> 
<body> 
<!-- javascript function in form action must have a parameter. This 
    parameter contains a value of named input --> 
    <form name="myform" action="javascript:handleIt(lastname.value)"> 
    <input type="text" name="lastname" id="lastname" maxlength="40"> 
    <input name="Submit" type="submit" value="Update"/> 
    </form> 
</body> 
</html>

Y la forma debe tener:

<form name="myform" action="javascript:handleIt(lastname.value)">

Fuente

2016-11-17 12:41:48

Y el formulario debe tener: –

llamando Javascript a partir de un formulario HTML

Respuesta

Cuestiones relacionadas