SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Description field is called even though its not empty?

    Hi guys,

    I have a simple javascript codes that will validate the form if some of the fields is empty.
    The input fields that needs to be validated is "title", "title URL" and "description".

    Below are the codes,
    Code:
    	<script>
    		function validateForm() {
    			var title=document.forms["myform"]["title"].value;
    			var url=document.forms["myform"]["url"].value;
    			var description=document.forms["myform"]["description"].value;
    			
    			if (title==null || title=="") {
    				alert("Title must be filled out");
    				return false;
    			}
    			if (url==null || url=="") {
    				alert("Title URL must be filled out");
    				return false;
    			}
    			if (description==null || description=="") {
    				alert("Description must be filled out");
    				return false;
    			}
    		}	
    	
                (function ($) {
     
                    // We'll use this to cache the progress bar node
                    var pbar;
     
                    // This flag determines if the upload has started
                    var started = false;
     
                    $(function () {
     
                        // Start progress tracking when the form is submitted
                        $('#upload-form').submit(function() {
     
                            // Hide the form
                            //$('#upload-form').hide();
     
                            // Cache the progress bar
                            pbar = $('#progress-bar');
     
                            // Show the progress bar
                            // Initialize the jQuery UI plugin
                            pbar.show().progressbar();
     
                            // We know the upload is complete when the frame loads
                            $('#upload-frame').load(function () {
     
                                // This is to prevent infinite loop
                                // in case the upload is too fast
                                started = true;
     
                                // Do whatever you want when upload is complete
                                //alert('Upload Complete!');
     
                            });
     
                            // Start updating progress after a 1 second delay
                            setTimeout(function () {
     
                                // We pass the upload identifier to our function
                                updateProgress($('#uid').val());
     
                            }, 1000);
     
                        });
     
                    });
     
                    function updateProgress(id) {
     
                        var time = new Date().getTime();
     
                        // Make a GET request to the server
                        // Pass our upload identifier as a parameter
                        // Also pass current time to prevent caching
                        $.get("<?php echo base_url('admin/admin2/getprogress'); ?>", { uid: id, t: time }, function (data) {
     
                            // Get the output as an integer
                            var progress = parseInt(data, 10);
     
                            if (progress < 100 || !started) {
     
                                // Determine if upload has started
                                started = progress < 100;
     
                                // If we aren't done or started, update again
                                updateProgress(id);
     
                            }
     
                            // Update the progress bar percentage
                            // But only if we have started
                            started && pbar.progressbar('value', progress);
     
                        });
     
                    }
     
                }(jQuery));
        </script>
    The validateForm() method should be called first for form validation before the jQuery codes.
    The problem is when the 3 fields is filled out 'title', 'title url' and 'description',
    when I press the submit button the 'descrition' field will popup the alert() message,
    even though it's already filled out.

    So what I'm doing wrong here?
    Anyone would like to help me please.

    Thanks in advance.
    Quality codes are optimized and tested...
    Click here for inspiration..

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by solidcodes View Post
    So what I'm doing wrong here?
    Anyone would like to help me please.
    Would you mind also providing the form that your script is interacting with?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    This is the form.

    Code:
    <form name="myform" action="<?php echo base_url('admin/admin2/add_record_proc') ?>" method="post" enctype="multipart/form-data" id="upload-form" target="upload-frame" onsubmit="return validateForm()">
    <?php
    //echo form_open_multipart('admin/admin2/add_record_proc');
    		foreach($records as $record) {
    ?> 
    		<table>
    		<tr>
    			<td align="left"><?php echo form_label('Project Tittle: ', 'title'); ?></td>
    			<td align="left"><input type="text" name="title" id="title" value="<?php echo $record['title']; ?>" size="60"/></td>
    			<td style="color: red;"  align="left"><?php echo ' ' . form_error('title'); ?></td>
    		</tr>
    		<tr>
    			<td align="left"><?php echo form_label('Site URL: ', 'url'); ?></td>
    			<td align="left"><input type="text" name="url" id="url" value="<?php echo $record['title_url']; ?>"/>(prefix: http://)</td>			
    			<td style="color: red;" align="left"><?php echo ' ' . form_error('url'); ?></td>
    		</tr>	
    		<tr>
    			<td align="left"><?php echo form_label('Description: ', 'description'); ?></td>
    			<td align="left">
    				<?php
    							$data = array(
    				              'name'        => 'description',
    				              'id'          => 'description',
    				              'class'		=> 'input-xxlarge',
    				              'value'		=> $record['description'],
    				              'rows'        => '30',
    				            );
    				
    				echo form_textarea($data, set_value('description'));
    				?>			
    			</td>
    			<td style="color: red;" align="left"><?php echo ' ' . form_error('description'); ?></td>
    		</tr>
    		<tr>
    			<td align="left"><?php echo form_label('Version: ', 'version'); ?></td>
    			<td align="left"><input type="text" name="version" id="version" value="<?php echo $record['version']; ?>" maxlength="10" size="5"/></td>			
    			<td style="color: red;" align="left"><?php echo ' ' . form_error('version'); ?></td>
    		</tr>
    		<tr>
    			<td align="left"><?php echo form_label('Stage: ', 'stage'); ?></td>
    			<td align="left">
    				<select name="stage">
    					<option value="">------</option>
    				    <option value="Alpha">Alpha</option>
    				    <option value="Beta">Beta</option>
    				    <option value="RC">Release Candidate</option>
    				    <option value="Stable">Stable</option>
    				</select>
    			</td>
    			<td style="color: red;" align="left"><?php echo ' ' . form_error('stage'); ?></td>
    		</tr>
    		<tr>
    			<td align="left"><?php echo form_label('Date started: ', 'date_started'); ?></td>
    			<td align="left">
    				<input type="text" name="date_started_yr" id="date_started_yr" value="<?php echo $record['date_started_yr']; ?>" maxlength="4" size="4"/>-
    				<select name="date_started_mo">
    				    <option value="january">january</option>
    				    <option value="february">february</option>
    				    <option value="march">march</option>
    				    <option value="april">april</option>
    				    <option value="may">may</option>
    				    <option value="june">june</option>
    				    <option value="july">july</option>
    				    <option value="august">august</option>
    				    <option value="september">september</option>
    				    <option value="october">october</option>
    				    <option value="november">november</option>
    				    <option value="december">december</option>
    				</select>-
    				<input type="text" name="date_started_dy" id="date_started_dy" value="<?php echo $record['date_started_dy']; ?>" maxlength="2" size="2"/>				
    				(Year-Month-Day)			
    			</td>
    			<td style="color: red;" align="left"><?php echo ' ' . form_error('date_started_yr'); ?></td>
    		</tr>
    		<tr>
    			<td align="left"><?php echo form_label('Last update: ', 'last_update'); ?></td>
    			<td align="left">
    				<input type="text" name="last_update_yr" id="last_update_yr" value="<?php echo $record['last_update_yr']; ?>" maxlength="4" size="4"/>-
    				<select name="last_update_mo">
    				    <option value="january">january</option>
    				    <option value="february">february</option>
    				    <option value="march">march</option>
    				    <option value="april">april</option>
    				    <option value="may">may</option>
    				    <option value="june">june</option>
    				    <option value="july">july</option>
    				    <option value="august">august</option>
    				    <option value="september">september</option>
    				    <option value="october">october</option>
    				    <option value="november">november</option>
    				    <option value="december">december</option>
    				</select>-
    				<input type="text" name="last_update_dy" id="last_update_dy" value="<?php echo $record['last_update_dy']; ?>" maxlength="2" size="2"/>				
    				(Year-Month-Day)
    			</td>
    			<td style="color: red;" align="left"><?php echo ' ' . form_error('last_update_yr'); ?></td>
    		</tr>
    		<tr>
    			<td align="left"><?php echo form_label('Date finished: ', 'date_finished'); ?></td>
    			<td align="left">
    				<input type="text" name="date_finished_yr" id="date_finished_yr" value="<?php echo $record['date_finished_yr']; ?>" maxlength="4" size="4"/>-
    				<select name="date_finished_mo">
    				    <option value="january">january</option>
    				    <option value="february">february</option>
    				    <option value="march">march</option>
    				    <option value="april">april</option>
    				    <option value="may">may</option>
    				    <option value="june">june</option>
    				    <option value="july">july</option>
    				    <option value="august">august</option>
    				    <option value="september">september</option>
    				    <option value="october">october</option>
    				    <option value="november">november</option>
    				    <option value="december">december</option>
    				</select>-
    				<input type="text" name="date_finished_dy" id="date_finished_dy" value="<?php echo $record['date_finished_dy']; ?>" maxlength="2" size="2"/>				
    				(Year-Month-Day)
    			</td>
    			<td style="color: red;" align="left"><?php echo ' ' . form_error('date_finished_yr'); ?></td>
    		</tr>
    		<tr>
    			<td align="left"><?php echo form_label('YouTube URL: ', 'video'); ?></td>
    			<td align="left"><input type="text" name="video_url" id="video_url" value="<?php echo $record['video_url']; ?>" size="20"/>(prefix: http://)</td>			
    			<td style="color: red;" align="left"><?php echo ' ' . form_error('video'); ?></td>
    		</tr>	
    		<tr>
    			<td align="left"><?php echo form_label('Technology: ', 'technology'); ?></td>
    			<td align="left"><input type="text" name="technology" id="technology" value="<?php echo $record['technology']; ?>" size="20"/></td>			
    			<td style="color: red;" align="left"><?php echo ' ' . form_error('technology'); ?></td>
    		</tr>
    		<tr>
    			<td align="left"><?php echo form_label('Buy: ', 'buy'); ?></td>
    			<td align="left"><input type="text" name="buy" id="buy" value="<?php echo $record['buy']; ?>" size="20"/>(prefix: http://)</td>			
    			<td style="color: red;" align="left"><?php echo ' ' . form_error('buy'); ?></td>
    		</tr>	
    		<tr>
    			<td align="left"><?php echo form_label('Document: ', 'document'); ?></td>
    			<td align="left"><input type="text" name="document" id="document" value="<?php echo $record['document']; ?>" size="20"/>(prefix: http://)</td>			
    			<td style="color: red;" align="left"><?php echo ' ' . form_error('document'); ?></td>
    		</tr>
    		<tr>
    			<td align="left"><?php echo form_label('Demo: ', 'demo'); ?></td>
    			<td align="left"><input type="text" name="demo" id="demo" value="<?php echo $record['demo']; ?>" size="20"/>(prefix: http://)</td>			
    			<td style="color: red;" align="left"><?php echo ' ' . form_error('demo'); ?></td>
    		</tr>	
    		<tr>
    			<td align="left"><?php echo form_label('Download: ', 'download'); ?></td>
    			<td align="left"><input type="text" name="download" id="download" value="<?php echo $record['download']; ?>" size="20"/>(prefix: http://)</td>
    			<td style="color: red;" align="left"><?php echo ' ' . form_error('download'); ?></td>
    		</tr>	
    		<tr>
    			<td align="left"><?php echo form_label('Change Log: ', 'changelog'); ?><br>(10,000 characters only)</td>
    			<td align="left">
    				<?php
    							$data = array(
    				              'name'        => 'changelog',
    				              'id'          => 'changelog',
    				              'class'		=> 'input-xxlarge',
    				              'value'		=> $record['changelog'],
    				              'rows'        => '30',
    				            );
    				
    				echo form_textarea($data, set_value('changelog'));
    				?>			
    			</td>
    			<td style="color: red;" align="left"><?php echo ' ' . form_error('changelog'); ?></td>
    		</tr>
    		<tr>
    			<td></td>
    			<td align="left">
    				<b>Things to consider before uploading your file.</b><br>
    				---------------------------------------------------<br>
    				<b>Allowed filename extensions: </b>gif, jpg and .png<br>
    				<b>Allowed maximum file size: </b>2 Megabytes only<br>
    				<b>Allowed maximum width: </b>1000 pixels only<br>
    				<b>Allowed maximum height: </b>700 pixels only.<br>
    			</td>
    			<td></td>
    		</tr>
    		<tr>
    			<td align="left"><?php echo form_label('Photo: ', 'photo'); ?></td>
    			<td align="left">
    				<input type="hidden" id="uid" name="UPLOAD_IDENTIFIER" value="<?php echo $uid; ?>">
    				<input name="userfile" type="file" />&nbsp;<br>
    			</td>
    			<td style="color: red;" align="left"><?php echo ' ' . form_error('photo'); ?></td>
    		</tr>	
    		<tr>
    			<td></td>
    			<td align="left">
    		        <div id="progress-bar"></div>
    		        <iframe id="upload-frame" name="upload-frame"></iframe>
    			</td>
    			<td></td>
    		</tr>
    			
    		</table>
    					    
    <?php 
    		}
    echo "<input type='submit' name='submit'  id='submit' value='Save' />"; 
    //echo form_submit('submit', 'Save');
    echo form_close();
    ?>
    Quality codes are optimized and tested...
    Click here for inspiration..

  4. #4
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    and these are the links on the heading of the page.
    Code:
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url('css/bootstrap.css'); ?>" media="screen">
    	<link rel="stylesheet" type="text/css" href="<?php echo base_url('css/bootstrap-responsive.css'); ?>" media="screen">
    	<link rel="stylesheet" type="text/css" href="<?php echo base_url('css/cpanel2.css'); ?>" media="screen" />
    	<link rel="stylesheet" type="text/css" href="<?php echo base_url('css/fileupload.css'); ?>" media="screen" />
        <link rel="stylesheet" type="text/css" href="<?php echo base_url('css/jquery-ui.css'); ?>" rel="stylesheet" />
    
        <script type="text/javascript" src="<?php echo base_url('js/jquery-1.10.1.js'); ?>"></script>
        <script type="text/javascript" src="<?php echo base_url('js/bootstrap.min.js'); ?>"></script>
        <script type="text/javascript" src="<?php echo base_url('js/fileupload.js'); ?>"></script>
        <script type="text/javascript" src="<?php echo base_url('js/jquery-ui.js'); ?>"></script>
    Quality codes are optimized and tested...
    Click here for inspiration..

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Thank you for posting the PHP code - I see that the description section is a textarea element.
    I seem to get successful results when using a textarea for the description area with your script.

    May I ask - do you have multiple description sections on the one web page? If you do, your existing PHP code will result in identical identifiers on each of the description areas. Identifiers must be unique identifiers.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @paul_wilkins ;
    Thanks for the hint.
    I'll check that.
    Quality codes are optimized and tested...
    Click here for inspiration..

  7. #7
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I reviewed the form again.
    And I noticed I have two textarea but they have different identifiers.

    So what could be the other reasons?
    Quality codes are optimized and tested...
    Click here for inspiration..

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by solidcodes View Post
    I reviewed the form again.
    And I noticed I have two textarea but they have different identifiers.

    So what could be the other reasons?
    We would next want to see the actual HTML code that your PHP script generates. Can you link us to a test page at which we can experience the problem?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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