jimfog 31 Posted January 25 Report Share Posted January 25 take a look at this fiddle https://jsfiddle.net/fiddlehunt/Lnt74wje/18/ Select the doctor radio button to see what happens...an input box appears in a place I do not want. I want it to appear right besides the radio button/text...as shown in the image snapshot below I thouht that enclosing the image input/label on a span tag(which is inline element) would the trick...but it does not. Furthermore the label is set to display block by the css code...it is this which creates the problem in the first place. Any ideas... Quote Link to post Share on other sites
niche 143 Posted January 25 Report Share Posted January 25 (edited) Try changing the label display to inline and put a line break after each input option. EDIT I’m pretty sure display:block for the input label is the problem. Edited January 25 by niche Quote Link to post Share on other sites
jimfog 31 Posted January 26 Author Report Share Posted January 26 thanks...there is one last detail. when the user clicks the doc radio and then some other radio the search box stays there(unwanted)...AND subsequent clicks of the doctor radio(after clicking othe radio buttons) displays many search boxes in the DOM-besides the doctor radio button. How to tackle these two. I have thought some solutions but I want to hear your opinion. Quote Link to post Share on other sites
dsonesuk 929 Posted January 26 Report Share Posted January 26 On change you remove any existing input elements of that id ref, before inserting the new input after radio button radio selection. Quote Link to post Share on other sites
jimfog 31 Posted January 27 Author Report Share Posted January 27 7 hours ago, dsonesuk said: On change you remove any existing input elements of that id ref, before inserting the new input after radio button radio selection. Ι do not get it....do you mean something like this https://jsfiddle.net/fiddlehunt/Lnt74wje/45/ The results are not the desired... Quote Link to post Share on other sites
dsonesuk 929 Posted January 27 Report Share Posted January 27 No silly, you dont use the textual html as selector, you use the id of that newly created input $('.basics #med').remove(); Use a existing parent as guide to element, as the newly added element did not exist on page load. You might to make it hide completely if other radio button are checked, then make it show only when #medical is selected. Quote Link to post Share on other sites
jimfog 31 Posted January 27 Author Report Share Posted January 27 16 minutes ago, dsonesuk said: No silly, you dont use the textual html as selector, you use the id of that newly created input You are absolutely right....do not know what I was thinking... This is better now https://jsfiddle.net/fiddlehunt/Lnt74wje/62/ Still I must do it like this-your sugestion is better: 17 minutes ago, dsonesuk said: You might to make it hide completely if other radio button are checked, then make it show only when #medical is selected. Quote Link to post Share on other sites
dsonesuk 929 Posted January 27 Report Share Posted January 27 (edited) $('.basics :radio').on('click' ,function(){ $('.basics #med').remove(); }); remove the previous code, add this separately on its own on click function as this does exactly the same for all radio buttons. https://jsfiddle.net/0no1zbyh/ Edited January 27 by dsonesuk Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.