CODEWITHSUNDEEP
javascriptjqueryhtml
user1011713
user1011713

Reputation: 279

Execute Javascript Function from From

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

Upvotes: 0

Views: 59

Answers (3)

Nicolas Straub
Nicolas Straub

Reputation: 3411

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.

Upvotes: 3

FMB89
FMB89

Reputation: 1

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

Upvotes: 0

Bjorn
Bjorn

Reputation: 71810

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.

Upvotes: 0

Related Questions