Заменить текст на основе отправки

0

То, что я пытаюсь сделать, - это динамически заменить соответствующий текст на строку из поля ввода. (Field1> field11, field2> field22)

http://jsfiddle.net/c2CUE/3/

Можете ли вы дать мне понять, как это сделать в jquery?

<table>
  <tr>
    <td><h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="field1"></td>
    <td><span class="field11">asdasd</span></td>
  </tr>
  <tr>
          <td><h2>Field 1</h2>
<input type="text" name="field2" value="qwerty"></td>
      <td><span class="field22">asdasd</span></td>
  </tr>
</table>
  • 0
    Я уверен, что забыл написать код вашего скрипта
  • 0
    Вы хотите заменить весь текст тем, что находится на входе? или вы хотите найти и заменить символы из диапазона с контентом из ввода? Вы также можете использовать JQuery или только JS?
Теги:

4 ответа

2
Лучший ответ

это должно сделать трюк

$(document).ready(function () {
    $("input.field1").on("keyup",function () {
        $("span.field11").html($(this).val()); 
    });
});

или вживую

http://jsfiddle.net/u8EB9/

вы также можете подключить функцию к событию "change", но вы получите только обновленный текст после того, как вы оставите вход! это зависит от ваших потребностей!

0

Попробуй это:

<form id="form" method="post">
    <table>
       <tr>
       <td><h2>Field 1</h2>
           <input type="text" name="field1" value="qwerty" class="field1"></td>
       <td><span class="field11">asdasd</span></td>
       </tr>
       <tr>
       <td><h2>Field 1</h2>
           <input type="text" name="field2" value="qwerty"></td>
       <td><span class="field22">asdasd</span></td>
       </tr>
    </table>
</form>

и jquery:

$(document).ready(function(){
    $('#form').submit(function(e){
        e.preventDefault();
        $('.field11').html($('.field1').val());
        $('.field22').html($('.field2').val());
    });
}
0

если вы намерены использовать этот код несколько раз, возможно, лучше использовать class а не id чтобы остановить необходимость создания связки событий привязки.

HTML:

<table>
  <tr>
    <td>
      <h2>Field 1</h2>
      <input type="text" name="field1" value="qwerty" class="replacer" />
      <input type="button" class="replace" value="replace" />
    </td>
    <td>
      <span class="replacee field11">asdasd</span>
    </td>
  </tr>
  <tr>
    <td>
        <h2>Field 1</h2>
        <input type="text" class="replacer" name="field2" value="qwerty" />
        <input type="button" class="replace" value="replace" />
    </td>
    <td>
      <span class="replacee field22">asdasd</span>
    </td>
  </tr>
</table>

JS:

$('.replace').on('click', function(){
    var parentRow = $(this).closest('tr');
    parentRow.find('.replacee').text(parentRow.find('.replacer').val());
});

http://jsfiddle.net/c2CUE/4/

0

HTML:

<table>
  <tr>
    <td><h2>Field 1</h2>
<input type="text" name="field1" value="qwerty" class="field1"></td>
    <td><span class="field11">asdasd</span></td>
  </tr>
  <tr>
          <td><h2>Field 1</h2>
<input type="text" name="field2" value="qwerty"></td>
      <td><span class="field22">asdasd</span></td>
  </tr>
</table>

JQuery:

$("input[type='text']").on("keyup",function () {
        $(this).parent().next().find('span').html($(this).val());
});

Демо - версия:

http://jsfiddle.net/F74ec/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню