CODEWITHSUNDEEP
javascriptjquery
Andy Andy
Andy Andy

Reputation: 299

Replace text based on submit

What I am trying to do is to dynamically replace the corresponding text with the string from input field.(field1>field11, field2>field22)

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

Can you give me any clue on how to do it in 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>

Upvotes: 0

Views: 102

Answers (4)

RGS
RGS

Reputation: 5211

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

Demo:

http://jsfiddle.net/F74ec/

Upvotes: 0

haxxxton
haxxxton

Reputation: 6442

if your intention is to use this code multiple times it might be better to use classs rather than id's to stop you needing to create a bunch of bind events.

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/

Upvotes: 0

Antonio Papa
Antonio Papa

Reputation: 1666

Try this:

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

and jquery: 

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

Upvotes: 0

easteregg
easteregg

Reputation: 509

this should do the trick

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

or in live

http://jsfiddle.net/u8EB9/

you could also hook the function to the "change" event but than youll get your text only updated, after you left the input! this depends on your needs!

Upvotes: 2

Related Questions