How to get value from a Select in contenteditable and maintain value

Question

How to get value from a Select in contenteditable and maintain value

Navigation

#1 by (1 votes)

0

Hi, I'm adapting a code and I need your help ....

What I need is that through a select to obtain a value and that it is shown in the editable cell (item_mes) and when adding another row to insert data that value is maintained in the editable cell (item_mes)

<head>
  <title>hi</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br /><br />
  <div class="container">
   <br />
   <h2 align="center">hello</h2>
   <br />
   <div class="table-responsive">
    <table class="table table-bordered" id="crud_table">

      <tr>
        <select name="meses">
        <option value="enero">Enero</option>
  <option value="febrero">Febrero</option>
  <option value="marzo">Marzo</option>
  <option value="abril">Abril</option>
</select>
</tr>
     <tr>
      <th width="30%">Item Name</th>
      <th width="10%">Item Code</th>
      <th width="45%">Item_Mes</th>
     </tr>
     <tr>
      <td contenteditable="true" class="item_name"></td>
      <td contenteditable="true" class="item_code"></td>
      <td contenteditable="true" class="item_mes"></td>
      <td></td>
     </tr>
    </table>
    <div align="right">
     <button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button>
    </div>
    <div align="center">
     <button type="button" name="save" id="save" class="btn btn-info">Save</button>
    </div>
    <br />
    <div id="inserted_item_data"></div>
   </div>
   
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 var count = 1;
 $('#add').click(function(){
  count = count + 1;
  var html_code = "<tr id='row"+count+"'>";
   html_code += "<td contenteditable='true' class='item_name'></td>";
   html_code += "<td contenteditable='true' class='item_code'></td>";
   html_code += "<td contenteditable='true' class='item_mes'></td>";
   html_code += "<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>";   
   html_code += "</tr>";  
   $('#crud_table').append(html_code);
 });
 
 $(document).on('click', '.remove', function(){
  var delete_row = $(this).data("row");
  $('#' + delete_row).remove();
 });
 
 $('#save').click(function(){
  var item_name = [];
  var item_code = [];
  var item_mes = [];
  $('.item_name').each(function(){
   item_name.push($(this).text());
  });
  $('.item_code').each(function(){
   item_code.push($(this).text());
  });
  $('.item_mes').each(function(){
   item_desc.push($(this).text());
  });
  $.ajax({
   url:"insert.php",
   method:"POST",
   data:{item_name:item_name, item_code:item_code, item_mes:item_mes },
   success:function(data){
    alert(data);
    $("td[contentEditable='true']").text("");
    for(var i=2; i<= count; i++)
    {
     $('tr#'+i+'').remove();
    }
    fetch_item_data();
   }
  });
 });
 
 function fetch_item_data()
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   success:function(data)
   {
    $('#inserted_item_data').html(data);
   }
  })
 }
 fetch_item_data();
 
});
</script>

html

asked by outsider 05.09.2018 в 02:56

source

1 answer

How to pass variables by link and GET method with resource routes Laravel Get input type data with php

score 1 · Accepted Answer

After reading the question, I understand that you want any new row that is created to have the value of the month in its Item_mes column. To do this, just add to the onclick event of the button that inserts the selected value (attribute value):

html_code += "<td contenteditable='true' class='item_mes'>" + $('#comboMeses option:selected').val() + "</td>";

If instead of the value attribute you want to add the text in the innerHTML of the option, use instead:

html_code += "<td contenteditable='true' class='item_mes'>" + $('#comboMeses option:selected').html() + "</td>";

The code would look like this:

<head>
  <title>hi</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br /><br />
  <div class="container">
   <br />
   <h2 align="center">hello</h2>
   <br />
   <div class="table-responsive">
    <table class="table table-bordered" id="crud_table">

      <tr>
        <select id="comboMeses" name="meses">
          <option value="enero">Enero</option>
          <option value="febrero">Febrero</option>
          <option value="marzo">Marzo</option>
          <option value="abril">Abril</option>
        </select>
        <button type="button" name="add" id="add" class="btn btn-success btn-xs">+</button>
</tr>
     <tr>
      <th width="30%">Item Name</th>
      <th width="10%">Item Code</th>
      <th width="45%">Item_Mes</th>
      <th></th>
     </tr>
    </table>
    <div id="inserted_item_data"></div>
   </div>
  </div>
  <div align="center">
     <button type="button" name="save" id="save" class="btn btn-info">Save</button>
    </div>
 </body>
</html>

<script>
$(document).ready(function(){
 var count = 1;
 $('#add').click(function(){
  count = count + 1;
  var html_code = "<tr id='row"+count+"'>";
   html_code += "<td contenteditable='true' class='item_name'></td>";
   html_code += "<td contenteditable='true' class='item_code'></td>";
   html_code += "<td contenteditable='true' class='item_mes'>" + $('#comboMeses option:selected').val() + "</td>";
   html_code += "<td><button type='button' name='remove' data-row='row"+count+"' class='btn btn-danger btn-xs remove'>-</button></td>";   
   html_code += "</tr>";  
   $('#crud_table').append(html_code);
 });
 
 $(document).on('click', '.remove', function(){
  var delete_row = $(this).data("row");
  $('#' + delete_row).remove();
 });
 
 $('#save').click(function(){
  var item_name = [];
  var item_code = [];
  var item_mes = [];
  $('.item_name').each(function(){
   item_name.push($(this).text());
  });
  $('.item_code').each(function(){
   item_code.push($(this).text());
  });
  $('.item_mes').each(function(){
   item_desc.push($(this).text());
  });
  $.ajax({
   url:"insert.php",
   method:"POST",
   data:{item_name:item_name, item_code:item_code, item_mes:item_mes },
   success:function(data){
    alert(data);
    $("td[contentEditable='true']").text("");
    for(var i=2; i<= count; i++)
    {
     $('tr#'+i+'').remove();
    }
    fetch_item_data();
   }
  });
 });
 
 function fetch_item_data()
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   success:function(data)
   {
    $('#inserted_item_data').html(data);
   }
  })
 }
 fetch_item_data();
 
});
</script>

However, I can not help but highlight a couple of changes that I would make:

Your header has 3 columns but the rest of the rows have four, so the header does not have a right edge. Is this the expected behavior? Consider adding a colspan if you want one column to occupy the equivalent of more columns or add another th.

You build the row with a text string and insert that text into the innerHTML. Fortunately browsers optimize these concatenations of text, so there are no performance problems (and even if there were, if your string occupies less than 200 characters you will not notice the difference). However, if you are using JQuery I like it better (and this is just my opinion) go build the object with JQuery functions.

It would be something like the following:

var $fila = $('<tr></tr>')
    .attr('id', 'row' + count)
    .append(
        $('<td></td>')
            .attr('contenteditable', 'true')
        ...
    )
    ...

This way when you want to make changes you can work on JQuery elements that you have been creating, with all the facilities that JQuery gives you instead of changing a text string, something that becomes unmanageable as the complexity of the elements increases. elements that you create.

As I say, the latter is just an opinion.

I hope it serves you.