javascript/jquery generate input element

Question

So I have this code. And I want to accomplish something probably simple for javascript guys. If a certain option is selected then add an input field on a div.

<select name="amount" >
    <option value="50">50$</option>
    <option value="100">100$</option>
    <option value="Other">Other</option>
</select>

<div id="custom_price">

</div>

So I want to add the input field once the 'Other' option is selected. I know there's a simple way around this but I cannot make it work:

document.getElementById('custom_price').innerHTML += "<input type="text" name="amount"/>"

So custom_div would look like:

<div id="custom_price">
Custom price:<br>
<input type="text" name="amount"/>
</div>

@SLaks - Ah yes, there is a syntactical error there! All the posted answers (including mine) are just different approaches to do the same thing the OP already has psuedo-accomplished :) — Travis J
– Travis J, Commented Aug 14, 2012 at 19:22

Travis J · Accepted Answer · 2012-08-14 19:16:37Z

6

Best way would be to actually make the dom element.

var newInput = document.createElement("input");
newInput.type="text";
newInput.name="amount";
document.getElementById('custom_price').appendChild(newInput);

Perhaps with a handler like this:

assign your select an id: <select name="amount" id="amount">

$("#amount").change( function() {
 if( $(this).val() == "Other" ){
  document.getElementById('custom_price').innerHTML = "";
  var newInput = document.createElement("input");
  newInput.type="text";
  newInput.name="amount";
  document.getElementById('custom_price').appendChild(newInput);
 }
});

answered Aug 14, 2012 at 19:16

Travis J

82.5k43 gold badges213 silver badges280 bronze badges

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

Comments

WTK · Accepted Answer · 2012-08-14 21:05:35Z

3

Judging by tags of your question you're using jQuery. So adding an input is fairly easy.

$("select[name=amount]").change(function() {
    if ($(this).val() == 'Other') {
        $("#custom_price").append('<input type="text" name="amount"/>');
    }
})

edited Aug 14, 2012 at 21:05

answered Aug 14, 2012 at 19:18

WTK

17.1k6 gold badges39 silver badges46 bronze badges

6 Comments

inrob Over a year ago

Thanks for your code. But when I select Other nothing appears... ?

Phrogz Over a year ago

Superfluous jQuery: how about just if (this.value=='Other') ...

Slava Fomin II Over a year ago

This will create new input field every time client selects "Other" option. Use ".empty()" before append.

inrob Over a year ago

It works now. As I said I'm a dumb at js, I put the code before the form that's why It didnt worked in the beginning. Thank you alot.

keyser Over a year ago

@bornie check out $(document).ready(function(){ //code }); It lets you run code after the document has been loaded.

|

Oriol · Accepted Answer · 2012-08-14 19:20:00Z

1

It's

document.getElementById('custom_price').innerHTML += '<input type="text" name="amount" />';

If you start a sring using ", you have to scape the caracters " inside it (\") or use '

answered Aug 14, 2012 at 19:20

Oriol

291k71 gold badges459 silver badges535 bronze badges

Comments

Diode · Accepted Answer · 2012-08-14 19:17:03Z

0

Using jQuery

$("#custom_price").empty().append('Custom price:<br><input type="text" name="amount"/>')

answered Aug 14, 2012 at 19:17

Diode

25.2k8 gold badges43 silver badges52 bronze badges

Comments

Slava Fomin II · Accepted Answer · 2012-08-14 19:17:53Z

0

Just place the input inside of a div and hide div initially. Then use jQuery/JS to show this div when necessary.

$('select[name="amount"]').change(function() {
    if($(this).val() == 'Other') {
        $('#custom_price').show();
    } else {
        $('#custom_price').hide();
    }
});

<div id="custom_price" style="display: none;">
    <p>Custom price:</p>
    <input type="text" name="amount"/>
</div>

answered Aug 14, 2012 at 19:17

Slava Fomin II

29k36 gold badges136 silver badges208 bronze badges

5 Comments

inrob Over a year ago

Thank you but I'm not looking to hide it. I want it to be generated once the user selects a certain value. This is important in my case.

Slava Fomin II Over a year ago

May i ask then why exactly do you need to create element on the fly? It's not about answering the exact question, but about implementing things the right (better) way.

inrob Over a year ago

Look the problem is with a paypal form. I have the select options that correspond to $ amounts. Also the custom payment field. But since paypal doesnt allow user defined variable I must name select and the custom amount variable the same > name="amount". In cases when user selects an option the other custom amount variable is still present (below) therefore when redirected to paypal the amount is 0 even when user selects 100$ from the menu

Slava Fomin II Over a year ago

ok, got it. I would have created a proxy form for this with hidden fields. You can update field values with javascript when necessary and send this proxy form instead of visible one. This way you will have lot's of flexibility.

inrob Over a year ago

I will google that. Thanks for letting me know, I wasnt aware of such method.

Collectives™ on Stack Overflow

javascript/jquery generate input element

5 Answers 5

Comments

6 Comments

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

6 Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related