Changing the placeholder for multiple inputs based on relevant select

Question

I'm very new to programming, and not very good at it yet... I've been searching and trying to get this working, but couldn't. Anyways, the user is supposed to be able to add numbers (http://codepen.io/anon/pen/dPaEoo), and if the select option behind one of the inputs is changed, it should change the placeholder of that input field. enter code here

When I tried it (I tried using find, closest, prev, and many other things), it didn't work, it changed all of the inputs, or just the first one...

Any help would be appreciated!

Guruprasad J Rao · Answer 1 · 2015-03-26T13:55:33.083

0

Just add this into your js file

$('.optiesel').on('change',function() {
       $(this).prev('input').attr('placeholder',$(this).find(":selected").text()); 
});

EDIT : That wasn't working for dynamically added elements (usually it should work when .on is applied) but the below code will be alternative for that.

$(document).on('change', '.optiesel', function() {
    $(this).prev('input').attr('placeholder',$(this).find(":selected").text()); 
});

edited Mar 26 '15 at 13:55

answered Mar 26 '15 at 13:38

Guruprasad J Rao

28,253
13
87
176

1

Thanks for the answer! I'm using Matt's answer above, but this seemed to work too :) – Protpot Mar 26 '15 at 13:51
Glad it worked!! Happy coding.. :) By the way please accept @Matt's answer if it worked so that it will be useful for others.. :) – Guruprasad J Rao Mar 26 '15 at 13:53

score 0 · Accepted Answer · edited Mar 26 '15 at 14:27

0

Two things you may be tripping over: make sure you're triggering on the 'change' event, not the 'click' event on the selects. And, make sure you're binding the event handler to the new .child nodes. Something like this:

$("#addBtn").click(function () {
    var newChild = $(".child:last").clone();
    newChild.appendTo("#wrapDiv");
    bindSelectActions();
});

$("#removeBtn").click(function () {
    if ($('.child').length > 1) {
      $("#wrapDiv").children(".child:last").remove();
    }
});
var bindSelectActions = function () {
    $('.optiesel').change(function () {
    $(this).closest('.child').find('.input').attr('placeholder',     $(this).val());
    });
}

I would avoid the remove function if it is the last element

edited Mar 26 '15 at 14:27

Francesco

1,313
7
14

answered Mar 26 '15 at 13:42

Matt

311
1
7

Thank you so much! It works now! I am wondering tho, if you have the time to explain, how come bindSelectActions is in a var, and not a function like I would expect (like 'function bindSelectActions (){code}'? – Protpot Mar 26 '15 at 13:52
in that case if don't add any element the change of placeholder doesn't work, do you want that? – Francesco Mar 26 '15 at 14:03
@Protpot - either way of defining functions (with or without var) works. There's a long discussion of the differences here: http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname. Check that out and see if it clears it up a bit, or perhaps confuses you more :) Either way, the function you create is an object; the differences have to do with when it's compiled, where you can call it, and in what manner you can pass it around. – Matt Mar 27 '15 at 00:27

score 0 · Answer 3 · answered Mar 26 '15 at 13:58

You are dynamically adding new inputs and selects. If you add a listener to your select it will just work for those which were added before the document was loaded. You need to add a listener to the parent div then trigger it by clicking on select. like so:

$('#wrapDiv').on('change', 'select.optiesel', function(){
    $(this).siblings('input.input').attr('placeholder', $(this).val());
});

Also when you add a new child to your wrapDiv you are just cloning the last child and you are coping all the changes that were made. Add the third line of this code to your existing Add function to change the input to how it was:

$("#addBtn").click(function () {
    var newChild = $(".child:last").clone();
    newChild.children('input').attr('placeholder', 'Thuisnummer (9 cijfers)').val('');
    newChild.appendTo("#wrapDiv");
});

Also do not let the user delete the a child if only of them is left. There will be nothing to clone then. You can use this to check for the condition:

if($("div#wrapDiv div.child").length > 1)

Thanks for explaining! I have some code to make the remove button be disabled if there is just one number, but I didn't include it here. Thanks a lot for the input anyways, you guys are awesome! — Protpot, Mar 26 '15 at 14:01
No problem. I just wanted to help as much as I could since you said you're new here. Happy you got everything worked out! — Makan, Mar 26 '15 at 14:12
I did use your line to clear the clone's value! :) Thanks a bunch again, I hope one day I'll be helping others out like you are :D — Protpot, Mar 26 '15 at 14:21

Changing the placeholder for multiple inputs based on relevant select

3 Answers3