jQuery - отправляет текст из поля ввода в div с заданным текстом

Question

Желательно с помощью jquery id хотеть обновить записанный текст из поля ввода в div одним нажатием кнопки.

Кроме того, когда это происходит, id, как этот текст, имеет определенный текст вокруг него, который былпредопределенный«письменный текст»«И ПРЕДЫДУЩИЙ письменный текст ОПРЕДЕЛЕННЫЙ ТЕКСТ»

В другой заметке я писал это, когда подумал ... что-то вроде предварительного просмотра поста в stackoverflow также не будет плохим.Потому что не важно, что текст будет отображаться после нажатия кнопки.Конечно ... какой путь будет проще ... вот тот, с которым я бы пошел ...

Есть идеи?Я погуглил свою задницу, но, думаю, я не смог найти правильных поисковых слов, чтобы описать отправку текста из поля ввода в div с помощью jquery ...

У меня действительно нет начальной точки, насколько это возможно для реальных функций, новот вводы и деления как минимум.http://jsfiddle.net/XrBy2/2/

Answer 1

UPDATE

    $(document).ready(function() {

        $('input[type=button]').click(
            function (){update(); }
        );

$('input.clear').click(
        function(){
            $('div.update-here').html("");
        }     
    )

    });

и для кнопки очистки дайте классу очистить его <input value='clear' class='clear' />

<script src="jquery.js"></script>

<script type="text/javascript">

    var textfront = "some pre defined text";

    var textend = "some pre defined text back";

    $(document).ready(function() {

        $('input[type=button]').click(
            function (){update(); }
        );

    });

    function update()
    {
        $('div.update-here').html(textfront+$('#inputform').val()+textend);
    }

ОБНОВЛЕНИЕ изменить здесь

$('div.update-here').html(textfront+$('#inputform').val()+textend);

$('div.update-here').html(textfront+$('input[name=update]').val()+textend);
</script>

<div class="update">
  <p>Update:</p>

  <input type="text" name="update" id="inputform"/>
  <input type="button" value="update"/>
</div>

<div class="update-here"></div>

<div style="margin: 0px;" class="example">written text</div>
<div class="example">AND THE PRE written DETERMINED TEXT</div>

Answer 2

Это последний с добавленной кнопкой очистки и ее функцией.

http://jsfiddle.net/XrBy2/13/

js

<script type="text/javascript">
    var textfront = "front-";

    var textend = "-back";

    $(document).ready(function() {

        $('.update').click(
            function (){update(); }
        );
        $('.clear').click(
              function (){clear(); }
        );

    });

    function update()
    {
        $('div.update-here').html(textfront+$('.update-it input').val()+textend);
    }
    function clear()
    {
        $('div.update-here').html($(''));
    }
</script>

html

<div class="update-it">
  <p>Update:</p>
  <input type="text" name="update" /><input class="update" type="button" value="update" /><input class="clear" type="button" value="clear" />
</div>

<div class="update-here"></div>

и связанные css

.body { font-size: 12px;}

.update-it { border: 1px solid #e1e1e1; padding: 4px 7px 4px 4px; width: 150px; }
.update-it input { width: 100%; }

.example, .update-here { background: #f1f1f1; margin-top: 30px; border: 1px solid #999; padding: 4px 7px 4px 4px; height: 10px; line-height: 10px; }