Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Converting a text input to a select element with JavaScript

I'm doing some front end development on a hosted e-commerce platform. The system sends a text input for the customer to choose the quantity of items they want to add to their cart, but I would prefer a select. I don't have access to the markup the system spits out in this regard, so I'd like to use JavaScript to change the text input to a select element.

I used jQuery to remove the select and duplicate the input element with a select with the right choices, but when I try to add something to my cart, only one item is added, regardless of the choice in the select.

Here's the native markup:

<div id="buy-buttons">
  <label>Quantity:</label>
  <input name="txtQuantity" type="text" value="1" id="txtQuantity" class="ProductDetailsQuantityTextBox">
  <input type="submit" name="btnAddToCart" value="Add To Cart" id="btnAddToCart" class="ProductDetailsAddToCartButton ThemeButton AddToCartThemeButton ProductDetailsAddToCartThemeButton">
</div>

Here's the jQuery I'm running to update my markup.

 $("#txtQuantity").remove();
 $("#buy-buttons").append('<select id="txtQuantity" type="text" value="1" class="ProductDetailsQuantityTextBox"></select>');
 $("#txtQuantity").append('<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>');

Does anyone know why this isn't working? Shouldn't the select be submitting the information to through the form in the same way as the text input?

Thanks!

like image 502
John Avatar asked Jun 23 '12 17:06

John


People also ask

How to set min and maxlength in HTML?

You can specify a minimum length (in characters) for the entered value using the minlength attribute; similarly, use maxlength to set the maximum length of the entered value, in characters.

How do you select text in HTML?

The select() method is used to select the content of a text field.

What will happen when we will use input type is equal to text?

The <input type="text"> defines a single-line text field. The default width of the text field is 20 characters.


3 Answers

Use replaceWith instead of remove and append. Also the type attribute on the <select> is unnecessary and the <option> nodes should be within the <select>. Here's the docs on replaceWith - http://api.jquery.com/replaceWith/.

$("#txtQuantity")
    .replaceWith('<select id="txtQuantity" name="txtQuantity" class="ProductDetailsQuantityTextBox">' +
          '<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>' +
        '</select>');
like image 53
TJ VanToll Avatar answered Sep 28 '22 01:09

TJ VanToll


You haven't set the field name. Add name='txtQuantity' to the select. Without a name attribute the value of the field will not get posted back to the server.

Also rather than setting value='1' on the select (which isn't doing anything), add selected='selected' to the first option. The result is the same as by default the first option is selected.

You are presumably ending up with the select after the submit button with the above code. However that has been covered in another answer.

like image 22
James Gaunt Avatar answered Sep 28 '22 01:09

James Gaunt


If you already have an dropdown/select list and you just want to add an item to it from a label/textbox then you can try this :

 if ($(textBoxID).val() != '') {
                $(dropDownID)
                    .append($("<option></option>")
                        .attr('value', ($(textBoxID).val()))
                            .text($(textBoxID).val())).val($(textBoxID).val())
}
like image 25
foo-baar Avatar answered Sep 28 '22 02:09

foo-baar