Fill form field with the value of another field

Question

Fill form field with the value of another field

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

Very good. I know that this is a treated topic, but in my particular case I can not solve it. I have a form that sends multiple rows to a database. What I need is that when filling in one of the fields manually, an entire column of the form is filled in with that value. The form would be something like:

<form role="form" method="post" action="food.php">
    <div class="row">
      <div class="col-md-3">
    <input type="text" id='food' onchange='add();'>
      </div>

    <div class="row">
      <div class="col-xs-12">
        <table id="production" class="table-bordered">
          <thead>
            <tr>
              <th>Date</th>
              <th>Batch</th>
              <th>Tubs</th>
            </tr>
          </thead>
        <tbody>
<?php while ($r=$query1->fetch_array()):?>
            <tr>

              <td>
              <div class="form-group">
              <input type="date" class="form-control" value="<?php echo date('Y-m-d'); ?>" name="feeddate[]" required />
              </div>
              </td>

              <td>
              <div class="form-group">
              <input type="text" class="form-control" value="<?php echo $r["batchnumber"]; ?>" name="batchnumber[]"  /> 
              </div>
              </td>

              <td>
              <div class="form-group">
              <input type="text" id='showId' class="form-control" name="batchtubs[]" />
              </div>
              </td>

And to fill in the field automatically I used this:

<script type="text/javascript">
    function add()
    {      document.getElementById('showId').value=document.getElementById('food').value;
    }
</script>

The problem is that I only fill the first row of values, but there are more than 60 (the number is variable, depending on the values that the query brings).

I've tried other functions, like

  <script type="text/javascript">
        function add()
        {
            jsvar=document.getElementById('food').value;
            document.formname.formvar.value = jsvar;
        }

  </script>

    <input id='food' onchange='add();'>

   <form name="formname">
    <input name="formvar" value="">
  </form>

That I did well doing tests, until I inserted it in the td field of the table, and I no longer returned the values.

I also tried other ideas, but without result:

<form name="form" action="" method="post">
  <input type="text" name="subject" id="subject" value="230">

  <input type="text" name="new" id="new" value="<?php echo $POST['subject']; ?>">
  </form>

I have a pretty clear feeling that I'm making a mess of myself. Any ideas to solve it? Thank you! Alex.

javascript html

asked by Alex 01.08.2017 в 16:21

source

2 answers

2

A piece of advice should be tested step by step before passing it to the front-end, and then put it in the corresponding place.

For example, I send an id:

    <tbody id="mainElement">
        <?php 

            $stmt = $pdo->prepare('SELECT * FROM  users WHERE id=:id_login AND estado =1');
            $stmt->bindValue(':id_login', $_GET['id']);
            $stmt->execute();

        ?>

        <? while($user =  $stmt->fetch(PDO::FETCH_OBJ)): ?>

            <tr class='remover-<?=$user->id?>'>
                    <td>
                     <select name='monto[]' id='monto' class='tasa form-control' >
                    <option value="<?=$user->moneda?>" ><?=$user->moneda?></option>
                    </select>
                        </td>
                                <td>
                                 <input type='text' name='tasa[]' id="tasa"  style='width:100px;' class='form-control' placeholder='$0.00' value="<?=$user->tasa ?>">
                                </td>
                                <td>
                                <a href='#' onclick='delete(<?=$user->id?>);' class='removeTr btn btn-danger btn-sm'><i class='fa  fa-trash-o'></i></a>
                                </td>
                            </tr>
                        <? endwhile; ?>

And I refilled the fields, but first I verified that the data arrived correctly.

To remove the elements.

 function delete(data) {
    $('.remover-' + data).remove();
}

This would be if it's only PHP.

answered by 01.08.2017 в 22:22

Why does this happen with the buttons? C # - Threads, Timers and something else

score 3 · Accepted Answer

Assign a class to the input, find the input for the class and then assign the value to each one.

For example:

function add()
{
  var elements = document.querySelectorAll(".entrada-usuario");
  var valor = document.getElementById('food').value;

  for(var i = 0; i < elements.length;i++)
  {
     elements[i].value = valor;
  }
}

<input type="text" placeholder="Escriba aqui..." id='food' onkeyup='add();'>

<div>
<input type="text" id='showId' class="form-control entrada-usuario" name="batchtubs[]" />

</div>
<div>
<input type="text" id='showId' class="form-control entrada-usuario" name="batchtubs[]" />

</div>
<div>
<input type="text" id='showId' class="form-control entrada-usuario" name="batchtubs[]" />

</div>

Remember that when you assign several elements with the same id and you search with javascript, you will always return the last one.