Adding Select option with jquery is not working

Question

I am trying to adjust the option value according to the quantity of the product, for the combination selected. I have done as below:

 var html='';
 jQuery.each(array, function(i,val){
      html +='<option value="'+val+'">'+val+'</option>';
 });
 var select_div='<select id="ajaxselect"  name="product_qty">'+html+'</select>';
 // alert(old_price);
 $('#select_quantity').html(select_div);
 $("#ajaxselect").css({
      width: "50px", height: "50px", display: "block", top: "0px", left: "0px",
 });

Where array is defined and its value is coming.

This will give me this in view after jquery effect

 <div id="select_quantity">
      <select id="ajaxselect" name="product_qty" style="width: 50px; height: 50px; display: block; top: 0px; left: 0px;">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">4</option>
           <option value="5">5</option>
           <option value="6">6</option>
      </select>
 </div>

But after selecting and subbmitting form, the product_quantity is not submitted as post element The post is as below

 Array ( 
      [id] => 2 
      [name] => Cardigan Stitch 
      [img] => /images/product/174febdfab0e13f983cc3cce91c1a5b9.jpg 
      [pc_id] => 1 
      [price] => 15 
      [product_color] => 2 
      [product_size] => 4 
      [add_to_cart] => )

while it should be like this:

 Array ( 
      [id] => 2 
      [name] => Cardigan Stitch 
      [img] => /images/product/174febdfab0e13f983cc3cce91c1a5b9.jpg 
      [pc_id] => 1 
      [price] => 15 
      [product_color] => 2 
      [product_size] => 4 
      [product_qty] => 1 
      [add_to_cart] => )

I have done same in another project and its working fine there. But its not working here. CAn anyone please help me. Trying to fix it since 3 hours. Any kind of help are appreciated. Thank you.

Are you sure div #select_quantity is inside you form tag ? — GGO
– GGO, Commented Dec 12, 2017 at 8:50
@GGO well i have placed it inside form tag but after jquery effect form is closing above it. Yet the submit button is working and other elements are also submitted which are below the closing tag. But product_qty is not submitted. — TShrestha
– TShrestha, Commented Dec 12, 2017 at 9:09
Can you show us complete form html output please ? html before POST sending and after jquery effect — GGO
– GGO, Commented Dec 12, 2017 at 9:23
@GGO Thank you for your help. I solved it with your hint. I was opening the form after one div and closing the form in another div. The issue was with div. Thank you so much. — TShrestha
– TShrestha, Commented Dec 12, 2017 at 9:50

GGO · Accepted Answer · 2017-12-12 10:40:47Z

1

Make sure your div #select_quantity is inside the submitted form tag. Maybe you have a misplaced closing tag in source code.

answered Dec 12, 2017 at 10:40

GGO

2,7484 gold badges22 silver badges43 bronze badges

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

Comments

Hema Nandagopal · Accepted Answer · 2017-12-12 08:49:11Z

We can get the selected value using :selected. Hope this helps.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   
  var html='';
            jQuery.each(Array, function(i,val){
            html +='<option value="'+val+'">'+val+'</option>';
            });
            var select_div='<select id="ajaxselect" name="product_qty">'+html+'</select>';
            $('#select_quantity').html(select_div);
            alert($( "#select_quantity option:selected").text())
            
            $("#ajaxselect").css({
            width: "50px", height: "50px", display: "block", top: "0px", left: "0px",
            });


});
</script>
</head>
<body>


</body>
</html>

Collectives™ on Stack Overflow

Adding Select option with jquery is not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related