CODEWITHSUNDEEP
javascriptphpjqueryhtml
alexandercannon
alexandercannon

Reputation: 544

how to create an editable input on click event

So I have a page that I want to use to allow users to see what in currently in the database and edit them by clicking on the box. I have a pretty hacky method that works for text imputs but for a drop down box or date selector completely falls apart. my HTML

   <td name='joineddate133'>
    <input type='date'
    id='joind133'
    name='joinda133
    value='2012-03-15'
    class='toedit'
    readonly='readonly'
    onclick='enablejoindate(this.id)'
    size='20'   />
    < /td>

The current Javascript

<script>
function enablejoindate(joindatid){
    $(function(){ 
    $("input:text[id="+ joindatid +"]").removeAttr("class");
    $("input:text[id="+ joindatid +"]").removeAttr("readonly");
    $("input:text[id="+ joindatid +"]").addClass("inlineditjoind");
  });
  }
  </script>

The inlinedit class is used as a marker so the jquery can find it easily to post and the toedit class currently just hides the attributes.

Obviously this solution isn't great and I would like to try and work out a better way to maybe create an input on the double click function etc.

Upvotes: 1

Views: 9159

Answers (4)

Rohit Agrawal
Rohit Agrawal

Reputation: 5490

Have a look to the DEMO JSFiddle

JS/JQUERY -

$("#joind133").on('click',function(){
    $(this).removeProp("readonly")
        .removeClass("toedit")
        .addClass("inlineditjoind");
});

HTML -

<td name='joineddate133'>
    <input type='date' id='joind133' name='joinda133' value='2012-03-15' class='toedit' readonly='readonly' size='20'/>
</td>

UPDATE ON REQUEST FOR MAKING IT GENERIC BINDING

$("input[type='date']").on('click',function(){
    $(this).removeProp("readonly")
        .removeClass("toedit")
        .addClass("inlineditjoind");
});

Upvotes: 1

Moob
Moob

Reputation: 16184

You could have all fields as readonly and hidden until focussed:

$("table").on("focus", "input, select", function(){
    $(this)
    .prop("readonly", false)
    .removeClass("toedit");
});

$("table").on("blur", "input, select", function(){
    $(this)
    .prop("readonly", true)
    .addClass("toedit")
    .siblings("span").text($(this).val());
});

$("table").on("click", "td", function(){
    $(this).children().focus();
});

DEMO (updated again)

Upvotes: 1

George
George

Reputation: 36784

Since you are using jQuery, use a jQuery event. It's best to set readonly to false with the prop() method:

$('input[type=date]').on('click', function(){
    $(this)
      .removeClass("toedit")
      .prop("readonly", false)
      .addClass("inlineditjoind");    
});

JSFiddle

Upvotes: 2

Arnold Daniels
Arnold Daniels

Reputation: 16563

You should take a look at X-editable.

<a
  href="#"
  id="joinda133"
  data-type="date"
  data-viewformat="dd.mm.yyyy"
  data-pk="1"
  data-placement="right"
  data-original-title="Date you've joined"
>25.02.2013</a>

Upvotes: 1

Related Questions