changing html content based on form input

Question

I'm attempting to create an online personality test for a client I am having troubles making form elements updated a table the way I would like them to. The page has eight different color squares with a select form element below each square and option values between 1 and 25. When the user selects the value (25 being most liked and 1 being least for that color) there is a table below the colors with two rows of 25 squares that I would like to update based on the selection. For example for the first selector the color is a dark green, if the user was to select the number 22 then I would like the cell below the the cell marked 22 to turn dark green. In addition the user should only be able to select a particular value only once as the same number cannot be assigned multiple colors. Any help is greatly appreciated.

<img value="4" src="sft/images/color4.jpg" draggable="true" ondragstart="drag(event)">
    <img value="2" src="sft/images/color2.jpg" draggable="true" ondragstart="drag(event)">
    <img value="3" src="sft/images/color3.jpg" draggable="true" ondragstart="drag(event)">
    <img value="1" src="sft/images/color1.jpg" draggable="true" ondragstart="drag(event)">
    <form name="colorselect" action="#">
        <select name="color4" style="width:150px; margin-bottom: 10px; background-color: #0f6700; color: #ffffff">
        <option value="">&nbsp;</option>
        <?php 
            $option = '1';
            while ($option <= '25'){
                echo '<option value=/"'.$option.'">'.$option.'</option>';
                $option ++;
            }
        ?>
        </select>
        <select name="color2" style="width:150px;margin-bottom: 10px; background-color: #701b55; color: #ffffff">
        <option value="">&nbsp;</option>
        <?php 
            $option = '1';
            while ($option <= '25'){
                echo '<option value=/"'.$option.'">'.$option.'</option>';
                $option ++;
            }
        ?>
        </select>
        <select name="color3" style="width:150px;margin-bottom: 10px;  background-color: #ee8400; color: #ffffff">
        <option value="">&nbsp;</option>
        <?php 
            $option = '1';
            while ($option <= '25'){
                echo '<option value=/"'.$option.'">'.$option.'</option>';
                $option ++;
            }
        ?>
        </select>
        <select name="color1" style="width:150px;margin-bottom: 10px;  background-color: #00243c; color: #ffffff">
        <option value="">&nbsp;</option>
        <?php 
            $option = '1';
            while ($option <= '25'){
                echo '<option value=/"'.$option.'">'.$option.'</option>';
                $option ++;
            }
        ?>
        </select>

    <img value="6" src="sft/images/color6.jpg" draggable="true" ondragstart="drag(event)">
    <img value="5" src="sft/images/color5.jpg" draggable="true" ondragstart="drag(event)">
    <img value="7" src="sft/images/color7.jpg" draggable="true" ondragstart="drag(event)">
    <img value="8" src="sft/images/color8.jpg" draggable="true" ondragstart="drag(event)">
        <select name="color6" style="width:150px;margin-bottom: 10px;  background-color: #74bf12; color: #ffffff">
        <option value="">&nbsp;</option>
        <?php 
            $option = '1';
            while ($option <= '25'){
                echo '<option value=/"'.$option.'">'.$option.'</option>';
                $option ++;
            }
        ?>
        </select>       
        <select name="color5" style="width:150px;margin-bottom: 10px;  background-color: #b00917; color: #ffffff">
        <option value="">&nbsp;</option>
        <?php 
            $option = '1';
            while ($option <= '25'){
                echo '<option value=/"'.$option.'">'.$option.'</option>';
                $option ++;
            }
        ?>
        </select>       
        <select name="color7" style="width:150px;margin-bottom: 10px;  background-color: #000000; color: #ffffff">
        <option value="">&nbsp;</option>
        <?php 
            $option = '1';
            while ($option <= '25'){
                echo '<option value=/"'.$option.'">'.$option.'</option>';
                $option ++;
            }
        ?>
        </select>       
        <select name="color8" style="width:150px;margin-bottom: 10px;  background-color: #FFFFFF">
        <option value="">&nbsp;</option>
        <?php 
            $option = '1';
            while ($option <= '25'){
                echo '<option value=/"'.$option.'">'.$option.'</option>';
                $option ++;
            }
        ?>
        </select>
    </form>

    <table id="sftTable">
    <tr>
        <td colspan="5" style="border-top:none;border-right:none;border-left:none">Strong Like</td>
        <td colspan="5" style="border-top:none;border-right:none;border-left:none">Like</td>
        <td colspan="5" style="border-top:none;border-right:none;border-left:none">Nuetral</td>
        <td colspan="5" style="border-top:none;border-right:none;border-left:none">Dislike</td>
        <td colspan="5" style="border-top:none;border-right:none;border-left:none">Strong Dislike</td>
    </tr>
    <tr>
    <?php $count = '25';
        while ($count >= '1' ) {
            echo '<td width=/"30px/">'.$count.'</td>';
            $count --;

        }
        ?>
    </tr>
    <tr height="30px">
        <?php $count = '25';
        while ($count >= '1' ) {
            echo '<td width=/"30px/" id=/"'.$count.'">&nbsp;</td>';
            $count --;

        }
        ?>
    </tr>
    </table>

saravanan mp · Accepted Answer · 2015-10-28 08:25:08Z

1

Try this code..

<!DOCTYPE html>
    <html lang="en">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    function selectRange(elem,val)
    {
    var color = $("#"+elem).css("background-color");
    var color2 =$("#change"+val).css("background-color");
        if(color2=='transparent')
        {
        $("#change"+val).css("background-color", color);
        }
        else
        {
            alert("Already Color Set");
        }
    }
    </script>
    </head>
    <body>
    <form name="colorselect" action="#">
    <select name="color1" id="color1" onchange="selectRange(this.id,this.value);" style="width:150px; margin-bottom: 10px; background-color: #0f6700; color: #ffffff">
    <option value="">&nbsp;</option>
    <?php 
        $option = '1';
        while ($option <= '5'){
            echo '<option value="'.$option.'">'.$option.'</option>';
            $option ++;
        }
    ?>
    </select>
    <select name="color2" id="color2" onchange="selectRange(this.id,this.value);" style="width:150px;margin-bottom: 10px; background-color: #701b55; color: #ffffff">
    <option value="">&nbsp;</option>
    <?php 
        $option = '1';
        while ($option <= '5'){
            echo '<option value="'.$option.'">'.$option.'</option>';
            $option ++;
        }
    ?>
    </select>
    <select name="color3" id="color3" onchange="selectRange(this.id,this.value);" style="width:150px;margin-bottom: 10px;  background-color: #ee8400; color: #ffffff">
    <option value="">&nbsp;</option>
    <?php 
        $option = '1';
        while ($option <= '5'){
            echo '<option value="'.$option.'">'.$option.'</option>';
            $option ++;
        }
    ?>
    </select>
    <select name="color4" id="color4" onchange="selectRange(this.id,this.value);" style="width:150px;margin-bottom: 10px;  background-color: #b00917; color: #ffffff">
    <option value="">&nbsp;</option>
    <?php 
        $option = '1';
        while ($option <= '5'){
            echo '<option value="'.$option.'">'.$option.'</option>';
            $option ++;
        }
    ?>
    </select>
    <select name="color5" id="color5" onchange="selectRange(this.id,this.value);" style="width:150px;margin-bottom: 10px;  background-color: #000000; color: #ffffff">
    <option value="">&nbsp;</option>
    <?php 
        $option = '1';
        while ($option <= '5'){
            echo '<option value="'.$option.'">'.$option.'</option>';
            $option ++;
        }
    ?>
    </select>

    </form>

    <table id="sftTable">
    <tr>
    <td  style="border-top:none;border-right:none;border-left:none">Strong <br/>Like</td>
    <td  style="border-top:none;border-right:none;border-left:none">Like</td>
    <td  style="border-top:none;border-right:none;border-left:none">Nuetral</td>
    <td  style="border-top:none;border-right:none;border-left:none">Dislike</td>
    <td  style="border-top:none;border-right:none;border-left:none">Strong<br/> Dislike</td>
    </tr>
    <tr>
    <?php $count = '5';
    while ($count >= '1' ) {
        echo '<td width="30px" style="" id="change'.$count.'">'.$count.'</td>';
        $count --;
   }
    ?>
    </tr>

    </table></body>
    </html>

answered Oct 28, 2015 at 8:25

saravanan mp

7833 gold badges17 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

keycrew Over a year ago

awesome! Thanks for the help!

keycrew Over a year ago

saravanan mp, thanks again for the response. That is exactly what I was looking for. In further testing I found an new issue that I had not thought of, if the user selects and option, then changes their minds, the original selection remains the color selected as well as the new. Do you have a suggestion on making the original selection clear?

saravanan mp Over a year ago

@keycrew can you explain clearly. I am not getting what you want exactly. Also accept the answer.

keycrew Over a year ago

Thanks again saravanan, through a little bit of dabbling I was able to solve the last half of my problem. Not sure if it is necessarily the best way but it seems to work. I went ahead and made the changes in the following answer to the code.

keycrew · Accepted Answer · 2016-02-10 08:40:28Z

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>

//added variable that is defined by onfocus to pass previously selected value
	function selectRange(elem,val,oldval)
    {
    var color = $("#"+elem).css("background-color");
    var color2 =$("#change"+val).css("background-color");
        if(color2=='transparent')
        {
	//resets background of previously selected value before changing to new selection
        $("#change"+oldval).css("background-color", "transparent"); 
        $("#change"+val).css("background-color", color);
        }
        else
        {
            $("#change"+oldval).css("background-color", "transparent");
            $("#change"+oldval).value(oldval);
			alert("Already Color Set");
			
			// need to reset the value of dropdown that was selected to prevent clearing of previous entry
        }
    }
	
    </script>

<div style="clear:both">
		<img value="4" src="sft/images/color4.jpg" draggable="true" ondragstart="drag(event)">
		<img value="2" src="sft/images/color2.jpg" draggable="true" ondragstart="drag(event)">
		<img value="3" src="sft/images/color3.jpg" draggable="true" ondragstart="drag(event)">
		</div>
<div style="clear:both; margin: 0px auto 10px auto;">
<?php 
		$nextpagevariable = "Supercalifragilisticexpialidocious";
		$nextpagevariable = sha1($nextpagevariable);
		?>
		<form name="colorselect" method="post" action="sftcount.php?<?php echo $nextpagevariable; ?>&id=1" >
			<select name="color4" id="color4" onfocus="this.oldvalue = this.value" onchange="selectRange(this.id,this.value, this.oldvalue); document.activeElement.blur();" style="width:150px; height: 25px; padding:0; background-color: #0f6700; color: #ffffff">
			<option value="">&nbsp;</option>
			<?php 
				$option = '1';
				while ($option <= '25'){
					echo '<option value="'.$option.'" ';
					if (!empty($color4)){ if ($color4 == $option) { echo "selected "; }}
					echo '>'.$option.'</option>';
					$option ++;
				}
			?>
			</select>
			<select name="color2" id="color2"  onfocus="this.oldvalue = this.value" onchange="selectRange(this.id,this.value, this.oldvalue); document.activeElement.blur();" style="width:150px; height: 25px; padding:0; background-color: #701b55; color: #ffffff">
			<option value="">&nbsp;</option>
			<?php 
				$option = '1';
				while ($option <= '25'){
					echo '<option value="'.$option.'" ';
					if (!empty($color2)){ if ($color2 == $option) { echo "selected "; }}
					echo '>'.$option.'</option>';
					$option ++;
				}
			?>
			</select>
			<select name="color3" id="color3"  onfocus="this.oldvalue = this.value" onchange="selectRange(this.id,this.value, this.oldvalue); document.activeElement.blur();" style="width:150px; height: 25px; padding:0; background-color: #ee8400; color: #ffffff">
			<option value="">&nbsp;</option>
			<?php 
				$option = '1';
				while ($option <= '25'){
					echo '<option value="'.$option.'" ';
					if (!empty($color3)){ if ($color3 == $option) { echo "selected "; }}
					echo '>'.$option.'</option>';
					$option ++;
				}
			?>
			</select>
			</div>
<div style="clear:both;">
		<img value="1" src="sft/images/color1.jpg" draggable="true" ondragstart="drag(event)">
		<img value="6" src="sft/images/color6.jpg" draggable="true" ondragstart="drag(event)">
		<img value="5" src="sft/images/color5.jpg" draggable="true" ondragstart="drag(event)">
		</div>
		<div style="clear:both;">
			<select name="color1" id="color1" onfocus="this.oldvalue = this.value" onchange="selectRange(this.id,this.value, this.oldvalue); document.activeElement.blur();" style="width:150px; height: 25px; padding:0; background-color: #00243c; color: #ffffff">
			<option value="">&nbsp;</option>
			<?php 
				$option = '1';
				while ($option <= '25'){
					echo '<option value="'.$option.'">'.$option.'</option>';
					$option ++;
				}
			?>
			</select>
		
			<select name="color6" id="color6" onfocus="this.oldvalue = this.value" onchange="selectRange(this.id,this.value, this.oldvalue); document.activeElement.blur();" style="width:150px; height: 25px; padding:0; background-color: #74bf12; color: #ffffff">
			<option value="">&nbsp;</option>
			<?php 
				$option = '1';
				while ($option <= '25'){
					echo '<option value="'.$option.'">'.$option.'</option>';
					$option ++;
				}
			?>
			</select>		
			<select name="color5" id="color5" onfocus="this.oldvalue = this.value" onchange="selectRange(this.id,this.value, this.oldvalue); document.activeElement.blur();" style="width:150px; height: 25px; padding:0; background-color: #b00917; color: #ffffff">
			<option value="">&nbsp;</option>
			<?php 
				$option = '1';
				while ($option <= '25'){
					echo '<option value="'.$option.'">'.$option.'</option>';
					$option ++;
				}
			?>
			</select>		
			
		
		</div>

    <table id="sftTable">
    <tr>
			<td colspan="5" style="border-top:none;border-right:none;border-left:none">Strong Like</td>
			<td colspan="5" style="border-top:none;border-right:none;border-left:none">Like</td>
			<td colspan="5" style="border-top:none;border-right:none;border-left:none">Nuetral</td>
			<td colspan="5" style="border-top:none;border-right:none;border-left:none">Dislike</td>
			<td colspan="5" style="border-top:none;border-right:none;border-left:none">Strong Dislike</td>
    </tr>
    <tr>
    <?php $count = '25';
    while ($count >= '1' ) {
        echo '<td width="4%" style="" id="change'.$count.'">'.$count.'</td>';
        $count --;
   }
    ?>
    </tr>

    </table>
	
			<p>
		<div class="backbutton"> Back</div>
		<input type="submit" value="next" class="nextbutton">
		</form>
		</p>
		<p><?php 
		echo $color4;
			
		?></p>
</div>

Thanks again to saravanan mp for the initial code. This is just a revision with an added feature. Could not have gotten this far without the help

Collectives™ on Stack Overflow

changing html content based on form input

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related