Click here to Skip to main content
15,892,927 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I want to add another input box into my code when something is selected

On the jsfiddle below if you select "New Claim" extra boxes appear.

I need to add a further box if "Paper" is selected from the process drop down menu

Can anyone help me please?

Any help is massively appreciated


http://jsfiddle.net/3KNnL/[^]

Thanks
Posted
Comments
Snesh Prajapati 29-Apr-14 5:53am    
What I understood that when "Paper" is selected from the Process drop-down just below the Process drop-down you want to add a textbox. Is it right?
padders01 29-Apr-14 6:53am    
Yes, that is correct, just need another text box underneath the drop down menu
What have you tried for that?

You already have written code to add input just below the Process drop-down but you need to check because problem with display property which you are setting as none and block.

First try with commenting the below code:
document.getElementById(id2).style.display = 'none';

You will see on the Paper selection you would be able to see the text box "New Tariff Details:".
just try it..hope you you will find the right solution.
 
Share this answer
 
v2
Comments
padders01 29-Apr-14 9:20am    
Hi, that works great, thanks. Can you help me a bit further please? I had added a few more input boxes.

The Claim Outcome input box should only appear if "New Claim" has been selected in Call Outcome drop down list.

I am trying to build a form that only shows certain input boxes based on the user selections.

http://jsfiddle.net/LtZa6/
Snesh Prajapati 29-Apr-14 9:30am    
Welcome. Good to know that you solved your problem. Sure I will try to solve your next issue.
padders01 29-Apr-14 9:51am    
Hey, I have solved that problem now. I do have another question though<br>
 <br>
On the fiddle below<br>
 <br>
http://jsfiddle.net/q4q86/<br>
 <br>
When you select New Claim as the Call Outcome it brings the input boxes I want. If you then select Update ongoing claim, the input boxes don't hide? Any thoughts<br>
 <br>
Thanks again
Snesh Prajapati 29-Apr-14 10:04am    
i have modified of your HTML code block as given below:

<td class="title" id="firsttdClaimOut" style="display:none" >Claim Outcome:</td>
<td style="display:none" id="secondtdClaimOut" class="field"><select name="type" önchange="display(this,'Reject');">
<option value=" "> </option>
<option value="Accept">Accept</option>
<option value="Reject">Reject</option>
<option value="Further info">Futher info</option>
</select></td>
</tbody>
</tr>
Snesh Prajapati 29-Apr-14 10:06am    
Modified script code :
if (txt.match(id2)) {

document.getElementById(id2).style.display = 'block';

document.getElementById("firsttdClaimOut").style.display = 'block';
document.getElementById("secondtdClaimOut").style.display = 'block';
}
Here you go, give this a try: http://jsfiddle.net/3KNnL/1/

I've got no idea where or how you'd like to create/display the added box, so I've added a function that will fire when you select the Paper option from that Select element. Hope it gives you an idea of where to go. You'll have to add a hidden input element somewhere that you make visible, or create an element dynamically and add it to the DOM
Using something like:
Adding
JavaScript
var newElem = document.createElement('input');
newElem.id = 'paperInputBox';
someElement.appendChild(newElem);

Where someElem is a reference to an element that you've already obtained. Perhaps a td elem with an id, to make finding it easy with document.getElementById


Removing
JavaScript
var oldElem = document.getElementById('paperInputBox');
oldElem.parentNode.removeChild(oldElem);


I've made the following changes:
1. Moved the code from [No-wrap (body)] to [No-wrap (head)]
2. Added an event listener to the 'load' event of the window
3. Attached an event listener to the select element you nominated.
4. Checked in the event listener for the current value of the select elem. If it's "Paper" I show an alert box. You'll need to either (1) make visible a new box or (2) create a new box and add it to the document at the correct place. (Don't forget to handle situations where this extra box is no longer required. I.e if the user selects "Paper" by mistake and then subsequently selects "Real".)
lll
 
Share this answer
 
Comments
padders01 29-Apr-14 7:34am    
Thanks for your reply enhzflep.

That works but I need a another input box, not a pop up message.I have tried to do it myself but it doesn't work
enhzflep 29-Apr-14 7:46am    
That's okay. Yes, I know - I already mentioned the fact that you didn't say where you'd like the new input element in my answer.

Well, what did you try and what did the browser's javascript debugger say?
padders01 29-Apr-14 7:52am    
I tried to add another input box instead of the pop up box

http://jsfiddle.net/3KNnL/3/
enhzflep 29-Apr-14 8:30am    
You still didn't bother to answer my question - "What did the javascript debugger say?"

Anyway, nevermind - it's obvious where you made a mistake in your understanding.
You simply can't just type html into a script like that and expect it to automagically end-up in some unspecified place. Firstly, you cant put html there like that, next you still haven't said where you'd like the new content to end-up.

As a result, I've added a new table to the html. It's on line 90 of the html and has an id of 'tgtTable'. I append the new row to it. You can word out where you'd prefer the new TR to appear.

See here: http://jsfiddle.net/3KNnL/7/

Also, get familiar with your browser's javascript debugger. You'd also debug a page like this _much_ faster and more easily if doing it on your own machine, rather than on jsfiddle, since you'll get meaningful line numbers and source-files listed next to the errors found. On Chrome, you can view the debugger with Ctrl-Shift-J or Ctrl-Shift-I . You can also get the console up by right-clicking an element and selecting "Inspect element"

Have fun!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900