How to add text into a div using a html form?

Question

Adding the insertion of input type text into the div title on the same screen. Attempted broken function to they turn the input into a variable and use it to fill in the div.

<body>
<div class="form">
Form <br><br>
<form name="input" action="javascript:alert(titleValue);">

Title: <input type="text" name="title" class="titleInsert">

<input type="submit" value="Submit">

</form>

</div>

<div class="offer_display">

<div class="title" id= title></div>
</div>

</body>

<script>
var titleValue="";
$('#titleInsert').on("change", function () {
titleValue=$(this).val();
$("#title h3").text("titleValue");
});

</script>
</html>

Tomor · Accepted Answer · 2014-08-25 13:46:39Z

1

Another problem with you code is, that you have to use "input" event and not "change".

See working code on fiddle: http://jsfiddle.net/z037qv3n/

<body>
   Form <br><br>
   <form name="input" action="javascript:alert(titleValue);">
   Title: <input type="text" name="title" id="titleInsert">
   <input type="submit" value="Submit">
</form>

<div class="title" id="title"></div>
</body>

<script>
var titleValue="";
$('#titleInsert').on("input", function () {
  titleValue=$(this).val();
  $("#title").text(titleValue);
});

</script>
</html>

answered Aug 25, 2014 at 13:46

Tomor

9141 gold badge6 silver badges10 bronze badges

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

Comments

idmean · Accepted Answer · 2014-08-25 13:36:51Z

0

Change your code for $('div.title').html(titleValue);

edited Aug 25, 2014 at 13:36

idmean

15k9 gold badges63 silver badges90 bronze badges

answered Aug 25, 2014 at 13:34

Carlos Guzman

3635 silver badges11 bronze badges

Comments

Rakesh Shetty · Accepted Answer · 2014-08-25 13:46:57Z

0

Live Demo : JSFIDDLE

You have to include jQuery library in your head section like this

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

There are lot of mistakes in your code please see below:

First mistake you should put your jQuery inside ready function.

Second mistake there is no such id #titleInsert it is a class so you have to do .titleInsert

Third mistake there is no tag h3 in #title

Fourth mistake you should use .keyup event instead .change event

Replace your jQuery code with following :

<script type="text/javascript">

$(document).ready(function(){

var titleValue="";
$('.titleInsert').on("keyup", function () {
titleValue=$(this).val();
$("#title").text("titleValue");
});

});

</script>

edited Aug 25, 2014 at 13:46

answered Aug 25, 2014 at 13:41

Rakesh Shetty

4,6268 gold badges44 silver badges82 bronze badges

Collectives™ on Stack Overflow

How to add text into a div using a html form?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related