JQuery copy and paste in real time a input value into another-CodePudding

I've create a PHP page with a form, where i populate all the inputs with the data taked from the DB. I need that in the field "Titolo", when the user start to edit/write something, in real time this value must be copy and paste in the field "Meta Titolo".

I suppose that the soluion could be a JQuery, but i don't know how do that :/ I tried something like this, but sure not work

$(document).ready(function() {
    $("#editor_titolo" ).on("keyup change", function(e) {
      var namer = $('.form-control').attr('#meta_titolo');
      $( namer).text($(this).val());
    });
  });

My form is structured in this way:

 <div > 
            <div >
                <div > 
                    <form action="" method="POST" name="traduzione_testo">  
                        <label for="titolo" >Titolo</label>
                        <input type="text" name='editor_titolo' id='editor_titolo'   style="height: 50px;weight: 100px;" placeholder="Titolo" value="<?= isset($titolo_tradotto) ? $titolo_tradotto: ''?>">
                </div>
                <div > 
                    <label for="meta-titolo" >Meta-Titolo</label>
                    <input type="text" name='meta_titolo' id='meta_titolo'   style="height: 50px;weight: 100px;" placeholder="Meta-Titolo" value="<?=isset($meta_titolo_tradotto) ? $meta_titolo_tradotto: ''?>">
                </div>
                <div > 
                    <label for="link-rewrite" >Link-Rewrite</label>
                    <input type="text" name='link-rewrite' id='link-rewrite'   style="height: 50px;weight: 100px;" placeholder="Link-rewrite"  value="<?=isset($link_rewrite_tradotto) ? $link_rewrite_tradotto: ''?>"> 
                    <button onclick="">Genera Rewrite-link</button> 
                </div>
                <div > 
                    <label for="descrizione" >Descrizione</label>
                    <textarea  name='descrizione' id="descrizione" style="weight: 100px;height: 300px" rows="15" placeholder="Descrizione prodotto"><?PHP echo isset($descrizione_tradotto) ? $descrizione_tradotto : '' ?></textarea>  
                </div>
                <div > 
                    <label for="descrizione_breve" >Descrizione breve</label>
                    <textarea  name='descrizione_breve' id="descrizione_breve" style="height: 70px;weight: 100px" rows="15" placeholder="Descrizione breve prodotto" ><?PHP echo isset($descrizione_breve_tradotto) ? $descrizione_breve_tradotto : '' ?></textarea>  
                </div>
                <button type="submit" name="submit" >Salva</button>
                    </form>        
            </div>   
    </div>

CodePudding user response：

Not sure what you are trying to do with the .attr("#meta_titolo").

But you can do this:

$(document).ready(function() {
  $("#editor_titolo").on("keyup change", function(e) {
    $("#meta_titolo").val($(this).val());
  });
});

Also please note you are trying to set the value of an input, so you need to use .val($(this).val()) not .text($(this).val())

Demo

$(document).ready(function() {
  $("#editor_titolo").on("keyup change", function(e) {
    $("#meta_titolo").val($(this).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      <form action="" method="POST" name="traduzione_testo">
        <label for="titolo" >Titolo</label>
        <input type="text" name='editor_titolo' id='editor_titolo'  style="height: 50px;weight: 100px;" placeholder="Titolo" value="">
    </div>
    <div >
      <label for="meta-titolo" >Meta-Titolo</label>
      <input type="text" name='meta_titolo' id='meta_titolo'  style="height: 50px;weight: 100px;" placeholder="Meta-Titolo" value="">
    </div>
    <div >
      <label for="link-rewrite" >Link-Rewrite</label>
      <input type="text" name='link-rewrite' id='link-rewrite'  style="height: 50px;weight: 100px;" placeholder="Link-rewrite" value="<?=isset($link_rewrite_tradotto) ? $link_rewrite_tradotto: ''?>">
      <button onclick="">Genera Rewrite-link</button>
    </div>
    <div >
      <label for="descrizione" >Descrizione</label>
      <textarea  name='descrizione' id="descrizione" style="weight: 100px;height: 300px" rows="15" placeholder="Descrizione prodotto"><?PHP echo isset($descrizione_tradotto) ? $descrizione_tradotto : '' ?></textarea>
    </div>
    <div >
      <label for="descrizione_breve" >Descrizione breve</label>
      <textarea  name='descrizione_breve' id="descrizione_breve" style="height: 70px;weight: 100px" rows="15" placeholder="Descrizione breve prodotto"><?PHP echo isset($descrizione_breve_tradotto) ? $descrizione_breve_tradotto : '' ?></textarea>
    </div>
    <button type="submit" name="submit" >Salva</button>
    </form>
  </div>
</div>

CodePudding user response：

The attr() method sets or returns attributes and values which is something you do not need here !

All you need is the meta_titolo id

$(document).ready(function() {
    $("#editor_titolo" ).on("keyup change", function(e) {
      var namer = $('#meta_titolo');
      namer.val($(this).val());
    });
  });