Click button made text <change> into <input>

Question

I have made a form something like this. When I click edit button, it will make test@yahoo.com into <input type="text" placeholder="test@yahoo.com">

            <fieldset class="shortfieldset">
                <div class="fieldsetTop">
                    <div class="fieldsetTop-left floatNone">
                        <h3>Login Details</h3>
                    </div>
                    <div class="fieldsetTop-right btn floatNone">
                        <a href=""> Edit </a>
                        <a href="#"> Save </a>
                    </div>
                </div>
                <p> Login ID bisa dipakai salah satu dibawah ini: </p>
                <form action="#" method="POST">
                   <label for="name"> Email </label>:
                   <span> test@yahoo.com </span> <br />
                   <label for="name"> HP </label>:
                   <span> 123123123 </span> <br />
                   <input type="submit" value="SUBMIT"> 
                </form>
            </fieldset>

What I have found is:

$(document).ready(function(){
    $(".loginDetails").click(function() {
        var input = $("<input>", {
            val: $(this).text(),
            type: "text" }
        );
        $(this).replaceWith(input);
        input.select();
    });
});

 $(document).ready(function() { $(".loginDetails").click(function() { var input = $("<input>", { val: $(this).text(), type: "text" }); $(this).replaceWith(input); input.select(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <fieldset class="shortfieldset"> <div class="fieldsetTop"> <div class="fieldsetTop-left floatNone"> <h3>Login Details</h3> </div> <div class="fieldsetTop-right btn floatNone"> <a href=""> Edit </a> <a href="#"> Save </a> </div> </div> <p>Login ID bisa dipakai salah satu dibawah ini:</p> <form action="#" method="POST"> <label for="name">Email</label>: <span> test@yahoo.com </span> <br /> <label for="name">HP</label>: <span> 123123123 </span> <br /> <input type="submit" value="SUBMIT"> </form> </fieldset> 

It is only working when I click test@yahoo.com , it will change into input. But what I want is when I click EDIT BUTTON , all the values will change into input. And also when the texts becomes inputs, the button of submit will show and a button of edit will disappear. Because this is going to update database. Any idea? Thanks

Answer 1

<fieldset class="shortfieldset">
                <div class="fieldsetTop">
                    <div class="fieldsetTop-left floatNone">
                        <h3>Login Details</h3>
                    </div>
                    <div class="fieldsetTop-right btn floatNone">
                        <a onclick="toInput($('#email'));toInput($('#hp'))" href=""> Edit </a>
                        <a href="#"> Save </a>
                    </div>
                </div>
                <p> Login ID bisa dipakai salah satu dibawah ini: </p>
                <label for="name"> Email </label>:
                <span id="email"> test@yahoo.com </span> <br />
                <label for="name"> HP </label>:
                <span id="hp"> 123123123 </span> <br />
            </fieldset>

Javascript code:

function toInput(elem){
   var input = $("<input>", {
            val: elem.text(),
            type: "text" }
        );
        elem.replaceWith(input);
        input.select();
}

Answer 2

here is solution add class name to the edit hyper link

<a class="loginDetails">Edit</a>

after that use your script and it will work as you expecting it to work will show an input box. here is the link of jsfidle http://jsfiddle.net/psjvrk4y/

Regards

Answer 3

Is this what you are looking for : http://jsfiddle.net/wegnetnn/

Logic which I have used is, add "loginDetails" class to the text field which you want to convert to input field. Add click event listener to "Edit" link and whenever user clicks on it, trigger the click event for all the element which are having "loginDetails" class.

JS Code :

$(".loginDetails").click(function(e) {
        var input = $("<input>", {
            val: $(this).text(),
            type: "text" }
        );
        $(this).replaceWith(input);
});

$("#edit-record").click(function(e){
        e.preventDefault(); // used to prevent the default anchor link behavior
        $("span.loginDetails").trigger("click");
});

Specify "edit-record" id for "Edit" link :

<a href="#" id='edit-record'> Edit </a>

Hope it helps. Let me know in case of any doubt.

Answer 4

I think originally what you'd want to do is have your "span" tags, which are what you want to change to "input" fields, to already be "input" fields, and just be disabled, rather than a totally different tag. Then on your edit click all you'd do is switch out the disabled attribute on the input fields.

Also for valid anchor tags you always need an "href". I always put "javascript:void(0);" in when I don't want the href to actually do anything, rather than leaving it blank.

<fieldset class="shortfieldset">
            <div class="fieldsetTop">
                <div class="fieldsetTop-left floatNone">
                    <h3>Login Details</h3>
                </div>
                <div class="fieldsetTop-right btn floatNone">
                    <a href="javascript:void(0);" id="edit"> Edit </a>
                    <a href="javascript:void(0);" id="save> Save </a>
                </div>
            </div>
            <p> Login ID bisa dipakai salah satu dibawah ini: </p>
            <label for="email"> Email </label>:
            <input type="text" id="email" name="email" disabled value="text@yahoo.com" />
            <label for="name"> HP </label>:
            <input type="text" id="name" name="name" disabled value="123123123" />
        </fieldset>

CSS

input[disabled] {
         // style the text box like your span here
}
#save {
    display: none;
}

jquery

$('#edit').click(function(e) {
    $(this).hide()
           .closest('fieldset')
           .find('input[type="text"]').attr('disabled', false);               

    $('#save').show();        
});

$('#save').click(function(e) {
    // do your save
    // once saved, hide btn
    $(this).hide();
});

EDIT:

If HTML5 is not available, you'll have to change the disabled attribute to:

<input ...... disabled="disabled" .... />