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 pletely 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.

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 pletely 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.

• javascript
• php
• jquery
• html

Share Improve this question Follow asked Sep 30, 2013 at 9:40 alexandercannonalexandercannon 54366 silver badges2424 bronze badges 2

• With a dropdown, how do you envisage a user would add a new menu item? – ChrisW Commented Sep 30, 2013 at 9:47
• I was thinking it would just exist in place of the text, so it goes from looking like just text to being an input – alexandercannon Commented Sep 30, 2013 at 9:55

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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

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)

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>

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");
});