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,
<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.
Would you mind also providing the form that your script is interacting with?
This is the form.
<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" /> <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();
?>
and these are the links on the heading of the page.
<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>
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.
@paul_wilkins ;
Thanks for the hint.
I’ll check that.
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?