Skip to main content
 <!DOCTYPE html>
<meta charset="utf-8">

<title>javascript - Obtener el valor de un input type=text de varias maneras</title>

<script>

function capturar()

{

    // obtenemos e valor por el numero de elemento

    var porElementos=document.forms["form1"].elements[0].value;

    // Obtenemos el valor por el id

    var porId=document.getElementById("nombre").value;

    // Obtenemos el valor por el Nombre

    var porNombre=document.getElementsByName("nombre")[0].value;

    // Obtenemos el valor por el tipo de tag

    var porTagName=document.getElementsByTagName("input")[0].value;

    // Obtenemos el valor por el nombre de la clase

    var porClassName=document.getElementsByClassName("formulario")[0].value;



    document.getElementById("resultado").innerHTML=" \

        Por elementos: "+porElementos+" \

        <br>Por ID: "+porId+" \

        <br>Por Nombre: "+porNombre+" \

        <br>Por TagName: "+porTagName+" \

        <br>Por ClassName: "+porClassName;

}

</script>



<style>

    form   {width:250px;height:180px;border:1px solid #ccc;padding:10px;}

</style>
<h1>Obtener el valor de un input type=text de varias maneras</h1>

<form id="form1">

    Nombre:<br><input type="text" name="nombre" value="jose" id="nombre" class="formulario">



    <p><input type="checkbox" name="acepto" id="acepto" class="formulario_check"> Acepto el contrato</p>



    <p>Deacuerdo: Si<input type="radio" name="deacuerdo" value="si"> No<input type="radio" name="deacuerdo" value="no"></p>



    <p>

    <select name="seleccion" id="seleccion" class="formulario_select">

        <option value="1">primera</option>

        <option value="2">segunda</option>

    </select>

    </p>

</form>

<input type="button" value="obtener el nombre" onclick="capturar()">

<div id="resultado"></div>

<html>

<head>

    <meta charset="utf-8">

    <title>javascript - Obtener el valor de un input type=text de varias maneras</title>

    <script>

        function capturar() {

            // obtenemos e valor por el numero de elemento

            var porElementos = document.forms["form1"].elements[0].value;

            // Obtenemos el valor por el id

            var porId = document.getElementById("nombre").value;

            // Obtenemos el valor por el Nombre

            var porNombre = document.getElementsByName("nombre")[0].value;

            // Obtenemos el valor por el tipo de tag

            var porTagName = document.getElementsByTagName("input")[0].value;

            // Obtenemos el valor por el nombre de la clase

            var porClassName = document.getElementsByClassName("formulario")[0].value;



            document.getElementById("resultado").innerHTML = "Por elementos: " + porElementos + 
            "<br>Por ID: " + porId + 
            "<br>Por Nombre: " + porNombre + 
            "<br>Por TagName: " + porTagName + 
            "<br>Por ClassName: " + porClassName;
        }

    </script>



    <style>
        form {
            width: 250px;
            height: 180px;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>

</head>



<body>

    <h1>Obtener el valor de un input type=text de varias maneras</h1>

    <form id="form1">

        Nombre:
        <br>
        <input type="text" name="nombre" value="jose" id="nombre" class="formulario">



        <p>
            <input type="checkbox" name="acepto" id="acepto" class="formulario_check"> Acepto el contrato</p>



        <p>Deacuerdo: Si
            <input type="radio" name="deacuerdo" value="si"> No
            <input type="radio" name="deacuerdo" value="no">
        </p>



        <p>

            <select name="seleccion" id="seleccion" class="formulario_select">

                <option value="1">primera</option>

                <option value="2">segunda</option>

            </select>

        </p>

    </form>

    <input type="button" value="obtener el nombre" onclick="capturar()">

    <div id="resultado"></div>

</body>

</html>

 <!DOCTYPE html>
<meta charset="utf-8">

<title>javascript - Obtener el valor de un input type=text de varias maneras</title>

<script>

function capturar()

{

    // obtenemos e valor por el numero de elemento

    var porElementos=document.forms["form1"].elements[0].value;

    // Obtenemos el valor por el id

    var porId=document.getElementById("nombre").value;

    // Obtenemos el valor por el Nombre

    var porNombre=document.getElementsByName("nombre")[0].value;

    // Obtenemos el valor por el tipo de tag

    var porTagName=document.getElementsByTagName("input")[0].value;

    // Obtenemos el valor por el nombre de la clase

    var porClassName=document.getElementsByClassName("formulario")[0].value;



    document.getElementById("resultado").innerHTML=" \

        Por elementos: "+porElementos+" \

        <br>Por ID: "+porId+" \

        <br>Por Nombre: "+porNombre+" \

        <br>Por TagName: "+porTagName+" \

        <br>Por ClassName: "+porClassName;

}

</script>



<style>

    form   {width:250px;height:180px;border:1px solid #ccc;padding:10px;}

</style>
<h1>Obtener el valor de un input type=text de varias maneras</h1>

<form id="form1">

    Nombre:<br><input type="text" name="nombre" value="jose" id="nombre" class="formulario">



    <p><input type="checkbox" name="acepto" id="acepto" class="formulario_check"> Acepto el contrato</p>



    <p>Deacuerdo: Si<input type="radio" name="deacuerdo" value="si"> No<input type="radio" name="deacuerdo" value="no"></p>



    <p>

    <select name="seleccion" id="seleccion" class="formulario_select">

        <option value="1">primera</option>

        <option value="2">segunda</option>

    </select>

    </p>

</form>

<input type="button" value="obtener el nombre" onclick="capturar()">

<div id="resultado"></div>

<html>

<head>

    <meta charset="utf-8">

    <title>javascript - Obtener el valor de un input type=text de varias maneras</title>

    <script>

        function capturar() {

            // obtenemos e valor por el numero de elemento

            var porElementos = document.forms["form1"].elements[0].value;

            // Obtenemos el valor por el id

            var porId = document.getElementById("nombre").value;

            // Obtenemos el valor por el Nombre

            var porNombre = document.getElementsByName("nombre")[0].value;

            // Obtenemos el valor por el tipo de tag

            var porTagName = document.getElementsByTagName("input")[0].value;

            // Obtenemos el valor por el nombre de la clase

            var porClassName = document.getElementsByClassName("formulario")[0].value;



            document.getElementById("resultado").innerHTML = "Por elementos: " + porElementos + 
            "<br>Por ID: " + porId + 
            "<br>Por Nombre: " + porNombre + 
            "<br>Por TagName: " + porTagName + 
            "<br>Por ClassName: " + porClassName;
        }

    </script>



    <style>
        form {
            width: 250px;
            height: 180px;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>

</head>



<body>

    <h1>Obtener el valor de un input type=text de varias maneras</h1>

    <form id="form1">

        Nombre:
        <br>
        <input type="text" name="nombre" value="jose" id="nombre" class="formulario">



        <p>
            <input type="checkbox" name="acepto" id="acepto" class="formulario_check"> Acepto el contrato</p>



        <p>Deacuerdo: Si
            <input type="radio" name="deacuerdo" value="si"> No
            <input type="radio" name="deacuerdo" value="no">
        </p>



        <p>

            <select name="seleccion" id="seleccion" class="formulario_select">

                <option value="1">primera</option>

                <option value="2">segunda</option>

            </select>

        </p>

    </form>

    <input type="button" value="obtener el nombre" onclick="capturar()">

    <div id="resultado"></div>

</body>

</html>

Origen Enlace

Te dejo un ejemplo de como obtener los valores de un textbox en JS:

 <!DOCTYPE html>
<meta charset="utf-8">

<title>javascript - Obtener el valor de un input type=text de varias maneras</title>

<script>

function capturar()

{

    // obtenemos e valor por el numero de elemento

    var porElementos=document.forms["form1"].elements[0].value;

    // Obtenemos el valor por el id

    var porId=document.getElementById("nombre").value;

    // Obtenemos el valor por el Nombre

    var porNombre=document.getElementsByName("nombre")[0].value;

    // Obtenemos el valor por el tipo de tag

    var porTagName=document.getElementsByTagName("input")[0].value;

    // Obtenemos el valor por el nombre de la clase

    var porClassName=document.getElementsByClassName("formulario")[0].value;



    document.getElementById("resultado").innerHTML=" \

        Por elementos: "+porElementos+" \

        <br>Por ID: "+porId+" \

        <br>Por Nombre: "+porNombre+" \

        <br>Por TagName: "+porTagName+" \

        <br>Por ClassName: "+porClassName;

}

</script>



<style>

    form   {width:250px;height:180px;border:1px solid #ccc;padding:10px;}

</style>
<h1>Obtener el valor de un input type=text de varias maneras</h1>

<form id="form1">

    Nombre:<br><input type="text" name="nombre" value="jose" id="nombre" class="formulario">



    <p><input type="checkbox" name="acepto" id="acepto" class="formulario_check"> Acepto el contrato</p>



    <p>Deacuerdo: Si<input type="radio" name="deacuerdo" value="si"> No<input type="radio" name="deacuerdo" value="no"></p>



    <p>

    <select name="seleccion" id="seleccion" class="formulario_select">

        <option value="1">primera</option>

        <option value="2">segunda</option>

    </select>

    </p>

</form>

<input type="button" value="obtener el nombre" onclick="capturar()">

<div id="resultado"></div>