Can Someone Help With This (Should Be Easy Coding)

@TheNewOneOct 26.2014

Hi, I need to code what I have designed in this picture: ~~[URL=”https://imageshack.com/i/idrOD13sj”]~~https://imageshack.com/i/idrOD13sj[/URL]

Basically all the dropdown menus will have exactly the same selections and all the information that will be automatically filled in when chosing a dropdown selection for each row will have exactly the same information.

Can somebody help with this please?

Just unsure how to go about it, as everything is exactly the same over and over again I think it will be pretty straight forward I just dont know everything about javascript.

to post a comment

JavaScript

6 Comments(s) _↴

@jsargent3840Oct 27.2014 — #Assuming you don't mind using a table for layout, this example is 2 nested "for" loops. You might use a 3rd nested "for" loop if you could build your drop down options dynamically. Also it appears you have two text input fields next to each drop down, but I'm not sure if the user populates those or if you do it dynamically, so you'll have to do some more work after you get the initial layout done. Here is just one approach:

[CODE]
 <script>
 document.write('<table>');
 document.write('<tr>');
 document.write('<th>&nbsp;</th>');
 for (i=0; i<6; i++) {
 document.write('<th>&nbsp;</th><th>W</th><th>P</th>');
 }
 document.write('</tr>');
 for (i=0; i<16; i++) {
 document.write('<tr>');
 document.write('<td align="right">'+(i+1)+'.</td>');
 for (j=0; j<6; j++) {
 document.write('<td><select id="select_'+i+'_'+j+'">');
 document.write('<option value="1">Option 1</option>');
 document.write('<option value="2">Option 2</option>');
 document.write('<option value="3">Option 3</option>');
 document.write('</select></td>');
 document.write('<td><input type="text" id="input_w_'+i+'_'+j+'" size="2" /></td>');
 document.write('<td><input type="text" id="input_p_'+i+'_'+j+'" size="2" /></td>');
 }
 document.write('</tr>');
 }
 document.write('</table>');
 </script>
 [/CODE]

@TheNewOneauthorOct 27.2014 — #This is excellent, thank you.

Also the two text boxes are to be automatically populated with information once an option is selected from the downdown boxes.

How would I add this to the code?

@jsargent3840Oct 27.2014 — #Without more specific information about what you expect I can't tell you exactly, but the idea would be to attach an onchange event handler to the <select> element. Then when a user makes a selection, it triggers that onchange handler (a function that gets called when the user makes a choice), and you do whatever you need to do in that function. So in code it would look like this:

[CODE]<script>
 document.write('<table>');
 document.write('<tr>');
 document.write('<th>&nbsp;</th>');
 for (i=0; i<6; i++) {
 document.write('<th>&nbsp;</th><th>W</th><th>P</th>');
 }
 document.write('</tr>');
 for (i=0; i<16; i++) {
 document.write('<tr>');
 document.write('<td align="right">'+(i+1)+'.</td>');
 for (j=0; j<6; j++) {
 document.write('<td><select id="select_'+i+'_'+j+'" onChange="myChangeHandler(this);">');
 document.write('<option value="1">Option 1</option>');
 document.write('<option value="2">Option 2</option>');
 document.write('<option value="3">Option 3</option>');
 document.write('</select></td>');
 document.write('<td><input type="text" id="input_w_'+i+'_'+j+'" size="2" /></td>');
 document.write('<td><input type="text" id="input_p_'+i+'_'+j+'" size="2" /></td>');
 }
 document.write('</tr>');
 }
 document.write('</table>');
 function myChangeHandler(theSelect) {
 //Select just changed, do what you need to do here.
 //Variable 'theSelect' gives you a link to the specific <select> which changed in case you need it.
 }
 </script>
 
 
 
 [/CODE]

@TheNewOneauthorOct 28.2014 — #Without more specific information about what you expect I can't tell you exactly, but the idea would be to attach an onchange event handler to the <select> element. Then when a user makes a selection, it triggers that onchange handler (a function that gets called when the user makes a choice), and you do whatever you need to do in that function. So in code it would look like this:

[CODE]<script>
 document.write('<table>');
 document.write('<tr>');
 document.write('<th>&nbsp;</th>');
 for (i=0; i<6; i++) {
 document.write('<th>&nbsp;</th><th>W</th><th>P</th>');
 }
 document.write('</tr>');
 for (i=0; i<16; i++) {
 document.write('<tr>');
 document.write('<td align="right">'+(i+1)+'.</td>');
 for (j=0; j<6; j++) {
 document.write('<td><select id="select_'+i+'_'+j+'" onChange="myChangeHandler(this);">');
 document.write('<option value="1">Option 1</option>');
 document.write('<option value="2">Option 2</option>');
 document.write('<option value="3">Option 3</option>');
 document.write('</select></td>');
 document.write('<td><input type="text" id="input_w_'+i+'_'+j+'" size="2" /></td>');
 document.write('<td><input type="text" id="input_p_'+i+'_'+j+'" size="2" /></td>');
 }
 document.write('</tr>');
 }
 document.write('</table>');
 function myChangeHandler(theSelect) {
 //Select just changed, do what you need to do here.
 //Variable 'theSelect' gives you a link to the specific <select> which changed in case you need it.
 }
 </script>[/QUOTE]
 
 this has just went over my head I can work out how to edit the drop down options to show what a user can select but how do I put the values automatically in both boxes once a user has a dropdown selected?

@rootOct 29.2014 — #You should not use document.write, why? Because it is out dated, poor programming and methods exist in JS to allow removal and addition of elements to the DOM tree.

This page should be made with HTML code, it would IMHO be better off as a static HTML code and JavaScript to add functionality or it could be generated server-side.

@deathshadowOct 29.2014 — #I have to agree with . on document.write, and even IF you were going to use document.write there's no reason to use twenty of them to do three or four of them's job!

Though given the second part, the auto-plugin of values would ONLY work scripting on, I'd be tempted to leave it in the scripting but be damned sure my markup has a NOSCRIPT saying "You need JS for this" -- this violates my basic principle of "if you can't make it work without scripting you likely have no business adding scripting to it" -- but this seems more like a web application than a website, and those operate under different rules.

Of course if it's empty, what makes it a table heading -- if you want it drawn that's a job for CSS not non-breaking spaces...

Though it's really hard to say for certain what should be done without seeing the DATA that's being processed. Data dictates markup AND behavior.

But, for the sake of argument let's say your OPTION were something like this:

Pine 2x4

Pine 6x6

Cedar 2x4

Cedar 3x6

I'd be parsing the values to plug in out of the VALUE on the OPTION, probably using a character like vertical-break as the delimiter. Now, can I assume that all these SELECT are getting the SAME option? I'm going to assume so. Something like:

<option value="pine|2|4">Pine 2x4</option>

<option value="pine|6|6">Pine 6x6</option>

... and so forth. Then you can just "split" value to pull the ones you want to plug in.

I also would be trapping change off the DOM instead of using the onchange method. REALLY I think the various on[i]event[/i] attributes should be stricken from JS entirely.

Also in #JavaScript _↴

How to validate whether a user enter a valid data?Closing/reopening IFrame containing JavaScript "Contains" in JS

Success!

Help @TheNewOne spread the word by sharing this article on Twitter...

Tweet This

Can Someone Help With This (Should Be Easy Coding)

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Can Someone Help With This (Should Be Easy Coding)

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴