input with separated options (php, js, html)

Greetings all!

I would like to ask you all for advice with my idea here. And your opinion. The thing is. I have 5 text inputs and many separated divs (options). When I click on div, I want to get it’s value into one text inputs which I will choose by click before clicking on div (option). For now, I have this:

<input type="text" class="mark" value="" id="choice1"/>

<input type="text" class="mark" value="" id="choice2"/>

<div class="copy">option1</div>
<div class="copy">option2</div>
<div class="copy">option3</div>
<div class="copy">option4</div>
<div class="copy">option5</div>
<div class="copy">option6</div>

<script type="text/javascript">
    $(document).on('click', '.mark', function(e){
       e.preventDefault();
       var pokus = $(this).attr("class","paste")
       $(document).on('click', '.copy', function(a){
           a.preventDefault();
           $('.paste').val($(this).text());
        })
     });

</script>

So, when I click on input (with class “mark”) it will also get class “paste”, then I click on on of option (with class “copy”) and it will be pasted into selected input.

Problem is, that I need to remove class “paste” after value from option is copied into input value. And here I got stucked.

When I try something like this:

$(document).getElementsByClassName("paste").removeClass('paste');

I get error that getElementsByClassName is not a function.

I want to ask you if someone has and idea how to make this happen. Thanks a lot!

Answer

Remove class paste of all mark to have just one “selected”, see preview “Select” input with jquery

$(document).on('click', '.mark', function(e) {
    // Prevent multiple input select
    $(".mark").removeClass("paste")

    // Add class to "selected" input
    $(this).addClass("paste")
});

$(document).on('click', '.copy', function(a) {
    $('.paste').val($(this).text());
    $(".paste").removeClass("paste");
})

Advertisement

Answer