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'); 
          } 
        }
      });
    }

Nicolas Straub · Accepted Answer · 2013-10-02 01:11:45Z

3

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.

edited Oct 2, 2013 at 1:11

answered Sep 27, 2013 at 18:13

Nicolas Straub

3,4096 gold badges24 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user1011713 Over a year ago

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 Over a year ago

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 Over a year ago

Thanks but I'm getting an error: Uncaught SyntaxError: Unexpected Token from adding this function.

Nicolas Straub Over a year ago

should work now, I had an extra parens in my $('#model').keypress code

user1011713 Over a year ago

Sorry, it's still refreshing the page. Not sure why.

|

Bjorn · Accepted Answer · 2013-09-27 18:06:31Z

0

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.

answered Sep 27, 2013 at 18:06

Bjorn

72.4k40 gold badges140 silver badges165 bronze badges

2 Comments

user1011713 Over a year ago

Just added the function to question

Bjorn Over a year ago

Checkout @nicolas's answer. He's got it.

FMB89 · Accepted Answer · 2013-09-27 18:09:05Z

0

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());">

answered Sep 27, 2013 at 18:09

FMB89

1

Collectives™ on Stack Overflow

Execute Javascript Function from From

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related