CODEWITHSUNDEEP
jqueryforms
Meules
Meules

Reputation: 1389

append form field to url

I'm trying to append a value (quantity) from a text input field to a url. Of course I can't get this to work.

What I've got is:

<form class="formProduct" id="formProduct" action="#" method="post">
<input type="text" name="quantity" id="formProductQuantity" value="{{ product.stock.minimum }}" /> // text field with quantity
<a class="button blue opener" href="" title="{{ 'Add to cart' | t }}"><span>{{ 'Add to cart' | t }}</span></a> // submit button
</form>

<script>
 var addUrl = "http://shop.com/cart/add/123456/?quantity="; // 123456 is the product id

asset("#formProduct");

function asset(product){

    $(product + " input#formProductQuantity").val("1");
    $(product + " #formProductQuantity").keyup(function () {
         var val = $(product + " input#formProductQuantity").first().val();
    });

    $(product + " .opener").click(function() {
           var val = $(product + " input#formProductQuantity").first().val();

              // Go to page
              window.location.href = addUrl + val;

    });
 }
 </script>

So what I try is to pass the quantity filled in the form to pass to http://shop.com/cart/add/123456/?quantity=100 for example. The code above I found on this forum but I can't get this to work.

Any help more then welcome

UPDATE

Ok thx to all the help here I got it to work. Any comments or modifications are still more then welcome. Function code looks like this:

<script type="text/javascript">
 var addUrl = "http://shop.com/cart/add/123456/?quantity="; // 123456  is the product id

 jQuery(document).ready(function(){
  asset("#formProduct");
  });
 function asset(product){

jQuery(product + " input#formProductQuantity").val("1");
jQuery(product + " #formProductQuantity").keyup(function () {
     var val = jQuery(product + " input#formProductQuantity").first().val();
});

jQuery(product + " .opener").click(function(event) {
  event.preventDefault();
   $.get($(this).attr('href'), function(data, status) {
       var val = jQuery(product + " input#formProductQuantity").first().val();

          // Go to page
          window.location.href = addUrl + val;
  $( "#dialog" ).dialog( "open" );
          return false;

  });
 })}

Upvotes: 1

Views: 2360

Answers (3)

Rob
Rob

Reputation: 1216

You are close. If you want the val in #formProductQuantity then use this:

var val = $("#formProductQuantity").val();

var addUrl = "http://shop.com/cart/add/123456/?quantity=" + val
top.location = addUrl

Update the href in your function: {{ 'Add to cart' | t }} // submit button

In your function add this:

$(".opener").attr("href", "http://shop.com/cart/add/123456/?quantity=" + val );

Now the anchor is set and ready to go...Then when they click the anchor, away we go :-) You can also add target="_blank" to open the url in a new page.

Upvotes: 1

skashi
skashi

Reputation: 335

You are trying to add Javascript to the submit button so it will run through the Javascript but the form will still be submitted, therefore window.location.href won't take place. What you need to do is add

return false;

to the end of your asset() function:

$(product + " .opener").click(function() {
    var val = $(product + " input#formProductQuantity").first().val();

    // Go to page
    window.location.href = addUrl + val;
    return false;
});

This will stop the form from submitting, allowing your window.location.href to redirect as you required.

Upvotes: 3

Miqdad Ali
Miqdad Ali

Reputation: 6147

I think you can use get method to submit form it will send your data through url

Upvotes: 1

Related Questions