1

I need to develop a web form where user select a category and based the category new input fields appears. I know this has something to do with javascript. I looked into github and stackoverflow. But could not find a proper answer.

My requirement in simple way

transacton form

1)Select Field: domain, merchandise, vehicle

2Select role: buyer . / seller,

3)Enter other pary email:

4) who pays escrow: buyer, seller, both

5) length of inspection: 1-30 days

6) transaction title:

7) MERCHANDISE/VEHICLE ESCROW

ADD SHIPPING.
who pays for shipping

8)

Domain ESCROW ( more than one escrow can add)

enter domain name

enter price

9)

Merchandise ESCROW ( more item can add)

item name
quantity
 price
description
shipping fee

10)

Vehicle ESCROW

vehicle year
vehicle make
 modal
price

User has the option to enter VIN, odometer, notes, registration expiration date, state titled, state registered, and can include a fee for shipping.

shipping fee

As I mentioned when user selects vehicle escrow, the fields for the vehicle escrow needs to appear, I tried to do this using, getElementById and innerHTML, it seems quite complex.

Plus, certain fields need to add more than one time. I looked at append JQuery for this but still no clue.

I would be glad if anyone can help me with this regard.

Please do check the link below. It has a form where it changes according to the item selected.

http://ikman.lk/en/new

Thanks.

Improve this question
1
  • Could you please show the source code? Commented Oct 13, 2013 at 6:11

3 Answers 3

Reset to default
1

You can use below logic in this case. Also refer to below url to see how to show/ hide contents using jquery.

if( domain is selected){
  hideEveryThing();
  shopwSomeThing();  

}

http://www.w3schools.com/jquery/jquery_hide_show.asp

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

Comments

1

So put all your top-level categories into a select element and then check for when one is selected with jQuery, then show that category's inputs (hide them all with CSS display: none first):

$('select').change(function(){
    if ($(this).val() == ' Category Name ') {
        show the inputs for this category;
    }
});
Improve this answer

Comments

0

If your using javascript then you can go with:

document.getElementById("divid").style.display="none"; //To hide div
document.getElementById("divid").style.display="block"; //To show div

If your using jquery then:

$("#divid").hide(); //To hide div
$("#divid").show(); //To show div

OR 

$('#divid').css({'display':'none'});  //To hide div
$('#divid').css({'display':'block'}); //To show div
Improve this answer

Comments