CODEWITHSUNDEEP
javascriptjqueryhtml
Pablo Sylar
Pablo Sylar

Reputation: 11

Can't show text from an input when click button with jQuery

I'm trying to code a simple form that will get some text and then display in a dialog box when i click on the submit button.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Página Teste</title>
</head>
<body>
<header>
    <div>
        <h1>Questão 4</h1>
    </div>
</header>

<div>
    <label for="texto">Texto: </label>
    <textarea name="texto" id="texto" rows="5" cols="10"></textarea>

    <button type="submit" id="submit">Enviar</button>
</div>  
<script>

    var teste = $("texto").val;

    $("submit").on("click", function(){
        $("teste").dialog("open");
    });

</script>
</body>
</html>

When i click on the button nothing happens, and i've tried some ways of doing this script and none seem to work.

Upvotes: 0

Views: 96

Answers (4)

Ovenwand
Ovenwand

Reputation: 45

When you call $("teste").dialog("open"); or $("texto").val() jQuery will look for an element <teste></teste> in the dom. Since the element doesn't exist in your example, it won't do anything.

Perhaps you're missing a . or # in the selector you're passing to $(selector)?

Upvotes: 0

Sophie
Sophie

Reputation: 38

You're missing some # and .val is a function so use .val().

I'm not sure I understand what you want to do with the dialog box, but should try something like this: 

$("#submit").on("click", function(){
    var teste = $('#texto').val();

    alert(teste);
});

Upvotes: 2

Rmahajan
Rmahajan

Reputation: 1361

You can do using document ready. Also if you want you can have separate javascript file and do much more operations

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Página Teste</title>
</head>
<body>
<header>
    <div>
        <h1>Questão 4</h1>
    </div>
</header>

<div>
    <label for="texto">Texto: </label>
    <textarea name="texto" id="texto" rows="5" cols="10"></textarea>

    <button type="submit" id="submit">Enviar</button>
</div>  
<script>

 $(document).ready(function(){
   var teste = $('#texto').val();
    $("#submit").on("click", function(){
        alert("teste")
    });})

</script>
</body>
</html>

Upvotes: 0

v-moe
v-moe

Reputation: 1433

Try this: 

$(document).ready(function(){
  var teste = $("texto").val;
    $("#submit").on("click", function(){
        console.log("something happens");
    });})

Upvotes: 1

Related Questions