Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    In form validation from php array

    I'm a novice coder but am trying to learn quickly by gleaning wisdom from those who are way beyond me. So here goes. The following code does what I want when I hit the submit button - let's the user know that their answers are incorrect based off of the answers in the array $right_answers. However, I'd like to do this without refreshing the page. I know there is probably a simple way to do this with javascript but I'm so new to it that I don't even know where to begin. Any help would be greatly appreciated. BTW, if you see errors in my php code in regards to best practices please feel free to let me know that as well. I want to get better.

    Josh

    Code:
    if (isset($_POST['submit'])) { // Form has been submitted.
    	$blank1 = mysql_prep($_POST['blank1']);
    	$blank2 = mysql_prep($_POST['blank2']);
    	$blank3 = mysql_prep($_POST['blank3']);
    	$blank4 = trim(mysql_prep($_POST['blank4']));
    	$blank5 = trim(mysql_prep($_POST['blank5']));
    }
    
    $message1 = 'Try Again';
    $errors = null;
    $answers = array_values($_POST);
    $right_answers = array('blank1', 'blank2', 'blank3', 'blank4', 'blank5');
    
    ?>
    </head>
    <body class="portfolio item">
    	<!-- Header -->
    	<div id="header">
    		<div id="masthead" class="wrapper">
     			<!-- Logo & Description -->
    			<div id="branding" role="banner">
    				<div id="site-title">
    					<a rel="home" title="growthtrack" href="index.php"><img src="img/growthtrack.png" width="150" height="75" alt="GrowthTrack Logo" /></a>
    				</div>
    			</div>
    			<!-- Navigation -->
    			<?php include('includes/navigation.php'); ?>
    		<!-- Header background, gradient, and header content -->
    		<div id="sub-header">
    			<div id="portfolio-header" class="wrapper">
    				<h1><?php echo $pagename;?></h1>
    			</div>
    		</div>
    		
    		<!-- Header shadow ( as background img ) -->
    		<div class="header-shadow"></div>
    	</div>
    
    
    	<!-- Main content -->
    	<div id="main" class="wrapper">
        	<div class="row">
            	<div class="one-half">
                	<div class="two-column-box-shadow">
                		<iframe width="470" height="350" src="http://www.youtube.com/embed/XXMThydnMMU" frameborder="0" allowfullscreen></iframe>
                    </div>
                </div>
                <div class="one-half last">
                <iframe width="470" height="378" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowtransparency="true" src="http://chatroll-cloud-1.com/embed/chat/growth-track?id=89t7ts6iJ3k&platform=html&w=$0"></iframe>
                </div>
            </div>
            <form action="startingpoint.php" method="post" id="contact-form">
            <div class="row">
    				<ul class="accordion">
                        <li class="accordion-item active">
                            <h6><span></span>Introduction</h6>
                            <div class="accordion-content">This is where someone would fill in the <input id="blank1" name="blank1" type="text" size="30" value="<?php echo $blank1;?>"/>.
    						<?php if(!in_array($blank1, $right_answers)) {echo "<p class='error-message'>" . $message1; } ?>
    
                            </div>
                        </li>
                        <li class="accordion-item">
                            <h6><span></span>Chapter 1</h6>
                            <div class="accordion-content">This is where someone would fill in another <input id="blank2" name="blank2" type="text" size="30" value="<?php echo $blank2;?>"/>.
                            <?php if(!in_array($blank2, $right_answers)) {echo "<p class='error-message'>" . $message1; } ?>
                            </div>
                            <div class="accordion-content">This is where someone would fill in another <input id="blank3" name="blank3" type="text" size="30" value="<?php echo $blank3;?>"/>.
                            <?php if(!in_array($blank3, $right_answers)) {echo "<p class='error-message'>" . $message1; } ?>
                            </div>
                            <div class="accordion-content">This is where someone would fill in another <input id="blank4" name="blank4" type="text" size="30" value="<?php echo $blank4;?>"/>.
                             <?php if(!in_array($blank4, $right_answers)) {echo "<p class='error-message'>" . $message1; } ?>
                            </div>
                            <div class="accordion-content">This is where someone would fill in another <input id="blank5" name="blank5" type="text" size="30" value="<?php echo $blank5;?>"/>.
                             <?php if(!in_array($blank5, $right_answers)) {echo "<p class='error-message'>" . $message1; } ?>
                            </div>
                        </li>
                    </ul>
                     <div class="row">				
    				<button class="button grey" name="submit" type="submit" id="submit">Submit Answers</button>
    					</div>
            </div>
            </form>
    	</div>
    	
        
    	<?php include('includes/footer.php');?>
    
    	<div id="fb-root"></div>
    	<!-- Footer (footer-sidebar and sub-footer) -->
            <script type="text/javascript" src="js/elements.js"></script>
    		<script type="text/javascript" src="js/css-animator.js"></script>
    		<script type="text/javascript">
            $('.accordion').each(function(ix, el) {
                    $('.accordion-item', $(this)).each(function(i, e) {
                        var contentDiv = $('.accordion-content', $(e));
                        $(this).attr('data-height', contentDiv.outerHeight());
                        contentDiv.css('overflow', 'hidden');
                        if(i != 0) {
                            $(e).removeClass('active');
                            contentDiv.height(0);
                        }
                    });
                });
            
                $(".accordion > li > h6").click(function(){
                    var $parent = $(this).parent('.accordion-item'),
                        $accordion = $parent.parent('.accordion');
                    
                    if($parent.length) {
                        if( $parent.hasClass('active') ) {
                            return false;
                        } else {
                            $('.accordion-item', $accordion).removeClass('active');
                            $('.accordion-item .accordion-content', $accordion).height(0);
            
                            $parent.addClass('active');
                            $('.accordion-content', $parent).height( $parent.attr('data-height') );
                        }
                    }
                });
            </script>
            <script type='text/javascript'>
    			
            
            </script>
            
            <script type="text/javascript" src="js/events_map.js"></script>
    
    
            <!-- Fancy box -->
            <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
            
            <!-- cutie theme JS -->
            <script type="text/javascript" src="js/cutie.js"></script>
            
            
            <!-- Twitter widget -->
            <script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"></script>
    </body>
    </html>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    it would be more helpful to show your rendered html (run the page, view source, copy and paste it here) than your raw php code, but below is a very basic script for a quiz - you can probably see its shortcomings just by looking at it:

    Code:
    <body>
    <div id="quiz"> 
    cat<input type="text"/><br>
    dog<input type="text"/><br>
    mouse<input type="text"/><br>
    horse<input type="text"/><br>
    rabbit<input type="text"/>
    </div>
    <input type="button" value="check answers" onclick="check()"/>
    <div id="res"></div>
    <script type="text/javascript">
    function check(){
    var right=0
    ans=["cat","dog","mouse","horse","rabbit"];
    inps=document.getElementById("quiz").getElementsByTagName("input")
    for (var i = 0; i < inps.length; ++i) {
    if(inps[i].value.toLowerCase()==ans[i]){
    	right++	
    		}
    	}
    document.getElementById("res").innerHTML="you got "+right+" out of 5 correct!"; 	
    }
    
    </script>
    </body>

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I noticed some shortsightedness with my code so I revised it to work better. However, I'd still like this functionality to happen client side. Here is the code:

    Code:
    $message = 'The following answers are incorrect: ';
    $errors = null;
    $answers = array_values($_POST);
    $right_answers = array('blank1', 'blank2', 'blank3', 'blank4', 'blank5');
    for($i=0;$i<count($answers);$i++){
    	if($answers[$i] != $right_answers[$i] && $answers[$i] != ''){
    	$errors .= $answers[$i] . ", "; 	
    	}
    		
    }
    ?>
    </head>
    <body class="portfolio item">
    	<!-- Header -->
    	<div id="header">
    		<div id="masthead" class="wrapper">
     			<!-- Logo & Description -->
    			<div id="branding" role="banner">
    				<div id="site-title">
    					<a rel="home" title="growthtrack" href="index.php"><img src="img/growthtrack.png" width="150" height="75" alt="GrowthTrack Logo" /></a>
    				</div>
    			</div>
    			<!-- Navigation -->
    			<?php include('includes/navigation.php'); ?>
    		<!-- Header background, gradient, and header content -->
    		<div id="sub-header">
    			<div id="portfolio-header" class="wrapper">
    				<h1><?php echo $pagename;?></h1>
    			</div>
    		</div>
    		
    		<!-- Header shadow ( as background img ) -->
    		<div class="header-shadow"></div>
    	</div>
    
    
    	<!-- Main content -->
    	<div id="main" class="wrapper">
        	<div class="row">
            	<div class="one-half">
                	<div class="two-column-box-shadow">
                		<iframe width="470" height="350" src="http://www.youtube.com/embed/XXMThydnMMU" frameborder="0" allowfullscreen></iframe>
                    </div>
                </div>
                <div class="one-half last">
                <iframe width="470" height="378" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowtransparency="true" src="http://chatroll-cloud-1.com/embed/chat/growth-track?id=89t7ts6iJ3k&platform=html&w=$0"></iframe>
                </div>
            </div>
            <form action="startingpoint.php" method="post" id="contact-form">
            <div class="row">
    				<ul class="accordion">
                        <li class="accordion-item active">
                            <h6><span></span>Introduction</h6>
                            <div class="accordion-content">This is where someone would fill in the <input id="blank1" name="blank1" type="text" size="30" value="<?php echo $blank1;?>"/>.
    						</div>
                        </li>
                        <li class="accordion-item">
                            <h6><span></span>Chapter 1</h6>
                            <div class="accordion-content">This is where someone would fill in another <input id="blank2" name="blank2" type="text" size="30" value="<?php echo $blank2;?>"/>.
                            </div>
                            <div class="accordion-content">This is where someone would fill in another <input id="blank3" name="blank3" type="text" size="30" value="<?php echo $blank3;?>"/>.
                            </div>
                            <div class="accordion-content">This is where someone would fill in another <input id="blank4" name="blank4" type="text" size="30" value="<?php echo $blank4;?>"/>.
                            </div>
                            <div class="accordion-content">This is where someone would fill in another <input id="blank5" name="blank5" type="text" size="30" value="<?php echo $blank5;?>"/>.
                            </div>
                        </li>
                    </ul>
                     <div class="row">
                     <?php if (!empty($errors)) {echo "<p class='error-message'>" . $message . $errors . "</p><br>";} ?>
    				
    				<button class="button grey" name="submit" type="submit" id="submit">Submit Answers</button>
                    <?php if (empty($errors) && count($answers) == 6) {
    					echo "<button class='button grey' href='startingpoint2.php'>Continue</button>";	
    				}?>
    					</div>
            </div>
            </form>
    	</div>
    	
        
    	<?php include('includes/footer.php');?>
    
    	<div id="fb-root"></div>
    	<!-- Footer (footer-sidebar and sub-footer) -->
            <script type="text/javascript" src="js/elements.js"></script>
    		<script type="text/javascript" src="js/css-animator.js"></script>
    		<script type="text/javascript">
            $('.accordion').each(function(ix, el) {
                    $('.accordion-item', $(this)).each(function(i, e) {
                        var contentDiv = $('.accordion-content', $(e));
                        $(this).attr('data-height', contentDiv.outerHeight());
                        contentDiv.css('overflow', 'hidden');
                        if(i != 0) {
                            $(e).removeClass('active');
                            contentDiv.height(0);
                        }
                    });
                });
            
                $(".accordion > li > h6").click(function(){
                    var $parent = $(this).parent('.accordion-item'),
                        $accordion = $parent.parent('.accordion');
                    
                    if($parent.length) {
                        if( $parent.hasClass('active') ) {
                            return false;
                        } else {
                            $('.accordion-item', $accordion).removeClass('active');
                            $('.accordion-item .accordion-content', $accordion).height(0);
            
                            $parent.addClass('active');
                            $('.accordion-content', $parent).height( $parent.attr('data-height') );
                        }
                    }
                });
            </script>
            <script type="text/javascript" src="js/events_map.js"></script>
    
    
            <!-- Fancy box -->
            <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
            
            <!-- cutie theme JS -->
            <script type="text/javascript" src="js/cutie.js"></script>
            
            
            <!-- Twitter widget -->
            <script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js"></script>
    </body>
    </html>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •