CODEWITHSUNDEEP
javascriptphpjqueryhtml
rosuandreimihai
rosuandreimihai

Reputation: 656

Show input elements after select

I have a form where depending on users choice, the input elements are visible or not. Actually, the user is setting a defined type of partner in another form, with the elements that are allowed to be visible on that type of partner if selected

Type 1 would have this elements visible:

<input type="text" id="partner" name="partner" class="span12" value="<?= $partner->partner;?>" />
<input type="text" id="address" name="address" class="span12" value="<?= $partner->address;?>" />
<input type="text" id="phone" name="phone" class="span12" value="<?= $partner->phone;?>" />

Type 2 would have as visible elements:

<input type="text" id="partner" name="partner" class="span12" value="<?= $partner->partner;?>" />
<input type="text" id="country" name="country" class="span12" value="<?= $partner->country;?>" />
<input type="text" id="markname" name="markname" class="span12" value="<?= $partner->markname;?>" />

Type 3 is supposed to have them all.

The partner form will start with a select box like this:

<select>
    <option>Type 1</option>
    <option>Type 2</option>
    <option>Type 3</option>
</select>

The user can definde new visual types and therefore the partner page has to be dynamic. The page will start by showing only the select box and after selection the elements allowed by the selected type would be displayed.

I know it has to be done by ajax, but I do not now how how to keep them all in same page and refresh the content without refreshing the page

Upvotes: 0

Views: 597

Answers (1)

eg_dac
eg_dac

Reputation: 701

 $("select").on("change", function(){ 
    $.ajax({ 
        type: "post", 
        url: "/link-to-post-to", 
        data: $("select").val(), 
        success: function(data){ 
            //append to page here 
        }, 
        error: function(xhr, status, error){ 
            console.log(error) 
        } 
    }); 
 });

so the php container will print out the html, then in the jquery it will add it to the page.

Upvotes: 1

Related Questions