Jump to content

Javascript form validation before post


moosey_man1988
Go to solution Solved by moosey_man1988,

Recommended Posts

Hi everyone Im having a nightmare with javascript again grrrr, I'm just not great with javascript / jquery :(

 

so basically I have a table with inputs to create an invoice, the reason im using javascript to post the form is because i have to allow for infinite items to be added into the database

using json stringify as an array, the problem I have is im trying to force that atleast 1 item be added to the table before posting the data.

 

I am using bootstrap and this hasn't been a problem for all of my other forms because i can just add required to the input but because i have to do this one differently using an a href button

This form just wont validate (but it will post the data to the php script)

 

so here is my code: 

 

Table with inputs: 

	<tbody style="" class="item ui-sortable-handle">
			<tr>
				<td rowspan="2" class="td-icon">
					<i class="glyphicon glyphicon-resize-vertical cursor-move"></i>
				</td>
				<td class="td-text">
						<input type="hidden" name="invoice_id" value="<?php echo $invoiceNo;?>">
						<input type="hidden" name="item_id" value>
					<div class="input-group">
						<span class="input-group-addon">Item</span>
						<input type="text" name="item_name" class="input-sm form-control" required>
					</div>
				</td>
				<td class="td-amount td-quantity">
						<div class="input-group">
							<span class="input-group-addon">Quantity</span>
							<input type="text" name="item_quantity" class="input-sm form-control amount">
						</div>
				</td>
				<td class="td-amount">
					<div class="input-group">
							<span class="input-group-addon">Price</span>
							<input type="text" name="item_price" class="input-sm form-control amount">
					</div>
				</td>
				<td class="td-amount">
					<div class="input-group">
						<span class="input-group-addon">Item Discount</span>
						<input type="text" name="item_discount_amount" class="input-sm form-control amount" data-toggle="tooltip" data-placement="bottom" title data-original-title="£ Per Item">
					</div>
				</td>
					<td class="td-amount">
						<div class="input-group">
							<span class="input-group-addon">Tax Rate</span>
							<select name="item_tax_rate_id" class="form-control input-sm">
								<?php
								//this section may update based upon selections but for now We have none
								echo "<option value='0'>None</option>";
								?>
							</select>
						</div>
					</td>
					<td class="td-icon text-right td-vert-middle"></td>
			</tr>
			<tr>
				<td class="td-textarea">
					<div class="input-group">
						<span class="input-group-addon">Description</span>
						<textarea name="item_description" class="input-sm form-control"></textarea>
					</div>
				</td>
				<td colspan="2" class="td-admount td-vert-middle">
					<span>Subtotal</span>
					<br>
					<span name="subtotal" class="amount"></span>
				</td>
				<td class="td-amount td-vert-middle">
					<span>Discount</span>
					<br>
					<span name="item_discount_total" class="amount"></span>
				</td>
				<td class="td-amount td-vert-middle">
					<span>Tax</span>
					<br>
					<span name="item_tax_total" class="amount"></span>
				</td>
				<td class="td-amount td-vert-middle">
					<span>Total</span>
					<br>
					<span name="item_total" class="amount"></span>
				</td>
			 </tr>
		 </tbody>

	 </table>
 	</form>
  </div>
 </div>
 <!-- End of items Tables-->

The Save button at the top of the page before the table:

<a href="#" class="btn btn-success ajax-loader" id="btn_save_invoice">

And lastly my attempt at the javascript / jquery / ajax:

<script type="text/javascript">
	$('#btn_save_invoice').click(function () {


		$('#item_form').validate({
		rules: {
			item_name:{
					required: true,
					message: 'This is required'
				}
			},
		});

					var items = [];
					var item_order = 1;
					$('table tbody.item').each(function () {
							var row = {};
							$(this).find('input,select,textarea').each(function () {
									if ($(this).is(':checkbox')) {
											row[$(this).attr('name')] = $(this).is(':checked');
									} else {
											row[$(this).attr('name')] = $(this).val();
									}
							});
							row['item_order'] = item_order;
							item_order++;
							items.push(row);
					});
					$.post("<?php echo url()."Clients/invoice_ajax.php"; ?>", {
									invoice_id: <?php echo $invoice_id; ?>,
									invoice_number: $('#invoice_number').val(),
									invoice_date_created: $('#invoice_date_created').val(),
									invoice_date_due: $('#invoice_date_due').val(),
									invoice_status_id: $('#invoice_status_id').val(),
									invoice_password: $('#invoice_password').val(),
									items: JSON.stringify(items),
									invoice_discount_amount: $('#invoice_discount_amount').val(),
									invoice_discount_percent: $('#invoice_discount_percent').val(),
									invoice_terms: $('#invoice_terms').val(),
									custom: $('input[name^=custom]').serializeArray(),
									payment_method: $('#payment_method').val()
							},
							function (data) {
									var response = JSON.parse(data);
									if (response.success == '1') {
					                         window.location = "<?php echo url()."Clients/invoice_ajax.php"; ?>/" + <?php echo $invoice_id; ?>;
					                     }
					                     else {
					                         $('#fullpage-loader').hide();
					                         $('.control-group').removeClass('has-error');
					                         $('div.alert[class*="alert-"]').remove();
					                         var resp_errors = response.validation_errors,
					                             all_resp_errors = '';
					                         for (var key in resp_errors) {
					                             $('#' + key).parent().addClass('has-error');
					                             all_resp_errors += resp_errors[key];
					                         }
					                         $('#invoice_form').prepend('<div class="alert alert-danger">' + all_resp_errors + '</div>');
					                     }
					                 });
					         });

</script>

Please bare in mind the actual posting section of the form Works perfectly! the only issue is the inputs will not validate before post.

 

here is what the page looks like (i have highlighted the parts that I am referring to in the post:

 

post-178672-0-32645600-1453914860_thumb.png

 

I really am thankful for all the help i get, a huge thank you in advance to anyone who helps with this.

 

 

 

 

 

Link to comment
Share on other sites

  • 2 weeks later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.