CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
user2712982
user2712982

Reputation:

Form that change input fields based on the input value selected

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.

Upvotes: 1

Views: 4346

Answers (3)

Josh KG
Josh KG

Reputation: 5150

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;
    }
});

Upvotes: 1

Joke_Sense10
Joke_Sense10

Reputation: 5412

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

Upvotes: 0

Dark Knight
Dark Knight

Reputation: 8357

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

Upvotes: 1

Related Questions