Execute Javascript Function from From

Question

Sorry for this simple question but I can't find the answer anywhere...I'm also a Javascript newbie with 0 experience so I'm really stuck.

Anyways, I have a function that is used with a simple button click:

<input type="button" value="Add Item" onclick="addToCartt('MODELNUMBER');">

I need to change that from the current setup where you can click and hit a button and run the function with the ModelNumber argument into a form where you enter the ModelNumber manually and hit return via an html form and run the function addToCartt with the ModelNumber as the argument.

Thanks for any help

function addToCartt(product_id, quantity) {
 quantity = typeof(quantity) != 'undefined' ? quantity : 1;
 $.ajax({
 url: 'index.php?route=checkout/cart/addorder',
 type: 'post',
 data: 'product_id=' + product_id + '&quantity=' + quantity,
 dataType: 'json',
 success: function(json) {
 $('.success, .warning, .attention, .information, .error').remove();
 $('#maincontent').addClass('active');
 $('#maincontent').load('index.php?route=module/cart');
 // $('#cart').live('mouseleave', function() {
 // $(this).removeClass('active');
 // });
 if (json['redirect']) {
 location = json['redirect'];
 }
 if (json['success']) {
 $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="close.png" alt="" class="close" /></div>');
 $('.success').fadeIn('slow');
 $('#cart-total').html(json['total']);
 $('#new_total').html(json['new_total']);
 // $('html, body').animate({ scrollTop: 0 }, 'slow'); 
 } 
 }
 });
 }

Answer 1

HTML:

<form name='frm'>
 <input type='text' id='model' />
</form>

javascript:

$(function() {
 $('#model').keypress(function(e){
 if (e.which === 13) {
 $(frm).submit()
 }
 });
 $('form').submit(function(e) {
 e.preventDefault();
 addToCart($('#model').val());
 });
});

if model is the only input in your form, you don't need the keypress event.

• user1011713: Tried this but it didn't work. I also added the actual function to the question, you think you could have another look? I really appreciate the help Nicolás.
• Nicolas Straub: add a return false to the end of the function. this will short-circuit the http submit. you can also (and should) bind the function to the event using jQuery. I'll update my answer with this code right away
• user1011713: Thanks but I'm getting an error: Uncaught SyntaxError: Unexpected Token from adding this function.
• Nicolas Straub: should work now, I had an extra parens in my $('#model').keypress code
• user1011713: Sorry, it's still refreshing the page. Not sure why.

Answer 2

This is probably the HTML you want. Without being able to see your JavaScript I can't really help more than this:

<form onsubmit="return addToCart();">
 <input type="text" value"MODELNUMBER" />
 <input type="submit" value="Add Item"/>
</form>

You'll need to return false from your addToCart to prevent the form from submitting a new page load. If you use jQuery you can also call preventDefault on the event argument.

• user1011713: Just added the function to question
• Bjorn: Checkout @nicolas's answer. He's got it.

Answer 3

You need to get the value from the html input. With jQuery would be like this:

<input type="button" value="Add Item" onclick="addToCart($('#modelNumber').val());">