moosey_man1988 Posted January 27, 2016 Share Posted January 27, 2016 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: I really am thankful for all the help i get, a huge thank you in advance to anyone who helps with this. Quote Link to comment https://forums.phpfreaks.com/topic/300674-javascript-form-validation-before-post/ Share on other sites More sharing options...
Solution moosey_man1988 Posted February 7, 2016 Author Solution Share Posted February 7, 2016 Solved it by putting some javascript If statements on button click. Quote Link to comment https://forums.phpfreaks.com/topic/300674-javascript-form-validation-before-post/#findComment-1530832 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.