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

Question

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.

missing # should be....$("#teste").dialog("open"); and $("#texto").val() — Mamun
– Mamun, Commented Jan 26, 2019 at 13:18
Thanks, that was really my mistake, but it's still not working here. I open the .html page, type something, click the button and nothing happens. — Pablo Sylar
– Pablo Sylar, Commented Jan 26, 2019 at 13:23
1) From what I see above, there is no element with an id teste which could act as a dialog. 2) .dialog() is a jQuery-UI method and the library is not loaded. 3) Open the console... You certainly have meaningful errors there. — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Jan 26, 2019 at 13:33

Louys Patrice Bessette · Accepted Answer · 2019-01-26 13:40:13Z

2

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);
});

edited Jan 26, 2019 at 13:40

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

answered Jan 26, 2019 at 13:35

Sophie

381 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

v-moe · Accepted Answer · 2019-01-26 13:28:54Z

1

Try this:

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

answered Jan 26, 2019 at 13:28

v-moe

1,4431 gold badge13 silver badges32 bronze badges

Comments

Rmahajan · Accepted Answer · 2019-01-26 13:37:39Z

0

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>

answered Jan 26, 2019 at 13:37

Rmahajan

1,3711 gold badge14 silver badges24 bronze badges

1 Comment

Louys Patrice Bessette Over a year ago

The document ready wrapper is a nice advise... But in no way is the issue here since the script is below the HTML markup. -- A separate .js file does not allow much more operations at all, it only allow a script to be used in multiple pages.

Ovenwand · Accepted Answer · 2019-01-26 13:43:00Z

0

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)?

answered Jan 26, 2019 at 13:43

Ovenwand

458 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related