How to make a input field when click on a table cell

Question

How can I make input field instead of comma separated text from my bellow table.

In my bellow code when click a table cell it add its own text string into a input field like

A1,A2,A3,A4

But I would like to output each field as input field and value of the field from the table cell where clicked. Actually I want to save each filed value to database. That's why I need input field.

<input type="text" class="some_class" value="text of the the cell" >

Can someone help me to modify my code?

My table is look like

Jsfiddle

$(function () {

  var isMouseDown = false,

    isHighlighted;

  $("#ticketLayout .select")

    .mousedown(function () {

      isMouseDown = true;

      $(this).toggleClass("highlighted");

      ticketName();

	  calculate();

      isHighlighted = $(this).hasClass("highlighted");

      return false; // prevent text selection

    })



    .mouseover(function () {

      if (isMouseDown) {

        $(this).toggleClass("highlighted", isHighlighted);

        ticketName();

		calculate();

      }

    });



  $(document)

    .mouseup(function () {

      isMouseDown = false;

    });

});

 

 function ticketName(){ 

var count = $("#ticketLayout td.highlighted").length;

$(".ticket-count").text(count);



var ticketValue = "";

$("#ticketLayout td.highlighted").each(function(){

    ticketValue += $(this).text() + ",";

});

$(".selected-ticket").val(ticketValue);

}



//Calculate Price

function calculate()

{

	var qty = document.getElementById("ticket-count").innerText;

	var value = document.getElementById("item-price").innerText;

	var result =  value * qty;

	

	$(".total-price").val(result);

}

table .select {

  width:40px;

  height:40px;

  text-align:center;

  vertical-align:middle;

  background-color:#fff;

  border:1px solid #c0c0c0;

}

table .selected {

  width:40px;

  height:40px;

  text-align:center;

  vertical-align:middle;

  background-color:red;

  border:1px solid #c0c0c0;

}



table td.highlighted {

  background-color:#60fc60;

}



.ticket-panel{

  margin-top:30px;

  margin-left:30px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="ticket-panel">

  <p>Ticket Fare: <span id="item-price" class="item-price">450</span>Taka</p>

						  <table cellpadding="0" cellspacing="0" id="ticketLayout">

							<tbody>

							  <tr><td class="select">A1</td><td class="select">A2</td><td></td><td class="select">A3</td><td class="select">A4</td></tr>

							  <tr> <td class="select">B1</td><td class="selected">B2</td><td></td><td class="select">B3</td><td class="select">B4</td></tr>

							 

</tbody>  

</table>

  

  					<form action="booking.php" method="post">

						  <div class="ticket-data">



  <div class="seats-container"></div>



								<p>Your Seat:<input id="tickets" name="ticket_no" type="text" class="selected-ticket" /></p>

								<p>Seat No: <span class="ticket-count" id="ticket-count" > </span></p>

								<p>Total Price: <input type="number" name="total-price" id="total-price" class="total-price" /></p>

								<button id="submit" type="submit" name="submit" class="btn btn-success">Continue</button>

							 </div>

					 </form>

Answer 1

So from what i understand from your questions that you need to create a new input for each highlighted <td> instead of appending the text to another input value. This can be done by changing the ticketName() function to be like this :

function ticketName(){ 
    var count = $("#ticketLayout td.highlighted").length;
    $(".ticket-count").text(count);
    $('.seats-container').html('');
    $("#ticketLayout td.highlighted").each(function(){
        $('.seats-container').append('<div>Seat : <input name="seats[]" type="text" class="some_class" value="'+$(this).text()+'" ></div>');
    });
}

Also you need to change your html code to put the inputs container div inside the <form> so that all the input will be submitted with the form data.. so you have to append this to your form :

<div class="seats-container"></div>

How to make a input field when click on a table cell

Sign up