No puedo cambiar el Type de un input

sergiomaidana1989 · #1 (**permalink**) 15/05/2013, 06:25

Hola.

Tengo un inconveniente... Tengo un Formulario de contacto y al boton de enviar lo tengo con un type="submit, ya que lo validé para HTML5.
Sin embargo, en IE tengo problemas. Es un dolor de cabeza. Ya pude colocarle un Script para que me valide el form a través de js. Pero necesito ahora poder cambiar el type de mi input de type="submit" a type="button", ya que así está validad, pero luego del alert envía de todas maneras.

Todavía no manejo mucho javascript. Y encontré un code en internet, que la traté de adaptar a mi caso. Pero no me sale.

Código HTML:

Ver original<script type="text/javascript">
     window.onload = function() {
          document.getElementById('enviar').innerHTML = "<input id=\"enviar\" type=\"button\" name=\"enviar_sub\" value=/"HOLAA/" />";
     }
</script>

Y aquí esta una síntesis de la estructura de la página:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
    <head>
        (...)
    </head>
 
    <body>
        <section id="wrap">
            <header>
                (...)
            </header>
            <section id="contenido">
                <section id="form-contacto">
                    <article>
                        <form name="enviarmensaje_frm">
                            <label></label>
                            <input type="text" />
                            <br><br>
                            <label></label>
                            <input type="email" />
                            <br><br>
                            (...)
                            <section id="form-botonera">
                                <input type="submit" name="enviar_sub" id="enviar" value="Enviar mensaje" />
                                <input type="reset" name="restablecer_rst" id="restablecer" value="Restablecer" />
                            </section>
                        </form>
                    </article>
                </section>
            </section>
            <footer>
                (...)
            </footer>
        </section>
    </body>
</html>

Básicamente tengo así mi código con sus respectivos id y name. Lo que no sé es cómo tendría que armar bien el Script que mostré primero para que me funcione en base al código de mi página.

No entiendo mucho de JavaScript aún.
¿Alguien podría decirme cómo se armaría ese script para mi página?

Desde ya, se los agradezco.

maycolalvarez · #2 (**permalink**) 15/05/2013, 08:27

me perdí, realmente no entiendo que quieres hacer ¿validar con JS, con HTML5 o que?

sergiomaidana1989 · #3 (**permalink**) 15/05/2013, 11:45

No, no amigo.

Mira.
Ese formulario está validado con HTML5, y funciona bárbaro, mientras no sea Internet Explorer.
Ahora... Para IE creé la condición con HTML en el <head>

Código HTML:

Ver original<!--[if IE]>
     (Script)
<![endif]-->

Donde dice "(Script)" iría el código que encontré, y que no pude hacer funcionar.
Ese Script lo que haría es cambiar el <input type="submit"> a <input type="button">. ¿Por qué? Porque si queda en tipo "submit" envía igual el form, porque me ignora los "required" y el type="email".
Además, añadí otro script de validación en esa condición para que quede validado con js. Eso funciona perfecto también.
Pero necesito ese script que me convierta de "submit" a "button", porque por mas que salte un mensaje de error del otro script envía igual después el form.

Aquí dejaré el código que extraje de:
http://stackoverflow.com/questions/9093992/change-html-input-type-by-js

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
function changefield(){
    document.getElementById("passwordbox").innerHTML = "<input id=\"passwordfield\" type=\"password\" name=\"password-field\" title=\"Password\" tabindex=\"2\" />";
    document.getElementById("password-field".focus();
}
</script>
</head>
 
<body>
<div id="passwordbox">
<input id="password-field" type="text" name="password-field" title="Password"onfocus="changefield();" value="Password" tabindex="2" />
</div>
<input type="submit" name="submit" value="sign in" tabindex="3" />
 
</body>
</html>

Ahí esta. En este código me basé.

Espero ahora haya quedado más claro
Gracias.