+ 1

Required wont work

I'm trying to make each of the expense amount fields required before calculating the total but the required attribute in each element isn't working. anyone know what I'm doing wrong? I tried putting the total_expense button inside the form but when that happens the whole page resets or just wiggs out when to click it. <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <input type="button" value="Add Expense" onclick="add_expense()"><br> <form> <div id="box"> </div> </form> <input type="submit" value="Total Expenses" onclick="calc_expense()"> <br> <input type="text" id="net_exp"/> </body> </html> var x = -1; var all_exp = 0; function add_expense(){ x += 1; $('#box').prepend("<div class='expense'><input type='text' placeholder='Expense Name'/><input type='text' placeholder='Amount' class='e' required='required'/><input type='button' class='remover' value='Remove' onclick='remove_expense()'/><br><br><br></div>"); } function calc_expense(){ all_exp=0; $('.e').each(function(){ all_exp += parseInt($(this).val()); }); $('#net_exp').val(all_exp); } function remove_expense(){ $('.expense')[0].remove(); }

html javascript jquery tag required

9th May 2018, 6:54 PM

Jordan S Reynolds

7 Answers

+ 6

Return false on submit event. <form> <input required> <input type="submit"> </form> $("form").submit(function() { calc_expense() return false; })

9th May 2018, 7:19 PM

Toni Isotalo

+ 4

Because you are not submitting the form. It doesn’t apply on click events

9th May 2018, 6:59 PM

Toni Isotalo

+ 3

You could try to use document.ready method. I think that's why .submit() is not working

9th May 2018, 7:44 PM

Toni Isotalo

+ 1

unfortunately no luck so far

9th May 2018, 8:17 PM

Jordan S Reynolds

mby because u gave required a value and why didn't you made the expanse with changing the class from 'hidden' to 'relative' or 'static'

9th May 2018, 6:59 PM

Lexfuturorum

Toni what is the best way to submit the form? the only way I know how is to put the submit button in the form but when I do that submitting the form freaks the page out. also I've tried using required='required' and just required for the input but I,get the same result.

9th May 2018, 7:12 PM

Jordan S Reynolds

Here's the updated code. I think the real problem is that when I put a value in the expense then submit it, the page freaks out. the required attribute works fine but when there are actual values it wiggs out on me. <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="https://code.jquery.com/jquery-3.1.1.js"></script> </head> <body> <input type="button" value="Add Expense" onclick="add_expense()"><br> <form id="box"> <br> <input type="submit"> </form> <input type="text" id="net_exp"/> </body> </html> var x = -1; var all_exp = 0; function add_expense(){ x += 1; $('#box').prepend("<div class='expense'><input type='text' placeholder='Expense Name'/><input type='text' placeholder='Amount' class='e' required/><input type='button' class='remover' value='Remove' onclick='remove_expense()'/><br><br><br></div>"); } $("form").submit(function() { calc_expense(); return false; }); function calc_expense(){ all_exp=0; $('.e').each(function(){ all_exp += parseInt($(this).val()); }); $('#net_exp').val(all_exp); } function remove_expense(){ $('.expense')[0].remove(); }

9th May 2018, 7:32 PM

Jordan S Reynolds