Domanda

Notice: Before starting to explain, just let me point this out: This isn't a duplicated topic, this one is about insertAfter, not appendTo, and I still couldn't make it.

What's the deal?

When I click on Radio Button it clones a paragraph containing 1 input type text, 1 input type radio and 2 buttons (1 to add, and the other to remove the whole paragraph) Can you guys help me making this add button working?

What's supposed to do? It's supposed to add 1 radio immediately after the first input radio of it's paragraph

Fiddle here Thank you Arun P Johny

Ok, here's the thing

HTML

<input type="text" class="teste">

<!--Input text-->
<p class="text"><br><input type="text" placeholder="Question Name"><br><input type="text" value="User Answer" disabled><button onclick="remove_element(this)">Remove</button></p>

<!--Input date-->
<p class="date"><br><input type="text" placeholder="Question Name"><br><input type="date" disabled><button onclick="remove_element(this)">Remove</button></p>

<!--Input Radio-->
<p class="radio"><br><input type="text" placeholder="Question Name"><br><input class="radio_option" type="radio"><input type="text"><button onclick="addOption(this)">+</button><br><button onclick="remove_element(this)">Remove</button></p>

<p>Select a field to add</p>
<button type="text" class="addtext" onclick="addElement(this)">Textbox</button>
<button type="date" class="adddate" onclick="addElement(this)">Date</button>
<button type="radio" class="addradio" onclick="addElement(this)">Radio Button</button>

<div id="create_form"></div>

Style

<style>
.teste{
    display:none;
}

.text{
    display:none;
}

.date{
    display:none;
}

.radio{
    display:none;
}
</style>

It's just setting its display to hide it

jQuery

function addElement(element){
var type = $(element).attr("type");
$("."+ type + ":first").clone().appendTo("#create_form");
$("."+ type + ":last").toggle();
};  

function remove_element(input){
     $(input).parent().remove();
};

function addOption(element){
    $(".teste:first").clone().appendTo($(element).parent().find("input:last"));
    $(".teste:last").toggle();
}; 
È stato utile?

Soluzione

I created a fiddle for you that works and added the click handlers for the script:

$('.addtext, .adddate, .addradio').click(function() {
   addElement($(this));
});

http://jsfiddle.net/m2AwP/4/

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top