Onclick create input and save input value

Question

I have several span and I want to handle onclick events. First, I want to create some elements on click event. Looks like this:

<div class="priceBox">
    Special Price:
    <input name="new-price" value="" />
</div>

Then user enters some numer and I want to save the input value to the attribute of span element, which was clicked.

<span name="1" data-price="input value" />

On second click on this span, will the input dissapear.

So far I have managed to create and remove input on click. But by clicking inside the input (when I want to type), makes the input disapear, because this is another click.

Maybe example from JSFiddle will help to understand better what I want. http://jsfiddle.net/0d17qp2L/

EDIT: I've updated @Ryan 's answer and put it to JSFiddle again. It's much better but it still doesn't create data-price attribute with input value.

Ryan · Accepted Answer · 2015-03-26 11:22:44Z

1

I would recommend giving your priceBox divs a unique id that corresponds to the clicked span's name so that you can toggle it's visibility/existence.

$('span-selector').click(function(e) {
    var span = $(this);
    var name = $(this).attr('name');
    var priceBox = $('div#priceBox'+ name);

    if ($(priceBox).length == 0) {
        priceBox = $('<div/>')
            .attr({'id':'priceBox'+name, 'class':'priceBox'})
            .text('Special Price: ')
            .append(
                $('<input/>')
                    .attr({'name':'new-price'})
                    .keyup(function(e) {
                        $(span).data({'price': $.trim($(this).val())});
                    })
            );
        $(span).append(priceBox);
    } else {
        $(priceBox).remove();
    }
});

You'll probably want to add some data validation to the input box's keyup function which I haven't done to prevent non-numeric values from being set in the data-price attribute of the span tag.

EDIT

If you NEED to see the data-price attribute in the source you can change out the following line:

$(span).data({'price': $.trim($(this).val())});

With this line:

$(span).attr({'data-price': $.trim($(this).val())});

edited Mar 26, 2015 at 11:22

answered Mar 25, 2015 at 14:31

Ryan

6,86613 gold badges52 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kristyna Over a year ago

Thanks :) I've changed your code a lite bit (there are some missing brackets too). It works, but still I can't see the data-price attribute. See the edit please.

Ryan Over a year ago

When adding the data attribute in the way I have though jQuery you won't be able to see the attribute but you can access it via jQuery by calling $('span-selector').data('price'); I have fixed the bracket issues and added to my answer that should accomplish what you commented about.

rm4 · Accepted Answer · 2015-03-25 13:49:10Z

0

Don't know if I understand the question but I think you should add it to the parent of this.

If you change:

$(this).append(box);

To:

$(this).parent().append(box);

The box will not disapear if you click in it, but will disapear if you click on your items.

Here is the jsfiddle

I hope this help! :)

answered Mar 25, 2015 at 13:49

rm4

7214 silver badges16 bronze badges

1 Comment

kristyna Over a year ago

That's good :) but the input value should be saved to the attribute of span which was clicked.

Eswara Srisai · Accepted Answer · 2015-03-26 10:25:36Z

0

i think this code will help you

js code

 <script type="text/javascript">
    $(document).ready(function(){
        var inp = $('<input/>');
        $(inp).attr('type','text');
        $("body").append(inp);
        $("span").click(function(){
            $(inp).toggle();
            if($(inp).is(":hidden"))
                {
                    $("p").html("value entered is "+$(inp).val());
                }
            else
                {
                    $(inp).val("");
                }
        });
    });
    </script>

html code

<body>
<span>item1</span>
<span>item2</span>
<p></p>
</body>

answered Mar 26, 2015 at 10:25

Eswara Srisai

11 bronze badge

Collectives™ on Stack Overflow

Onclick create input and save input value

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related