SheepIT and drop-down list
Hello !
I have a dynamic form and use the SheepIT plugin to clone my form elements.
The form has a drop-down list with 2 options: 'No' and 'Yes'.
If the value is 'Yes' must show a paragraph.
My problem is: when change the value in drop-down list , he show the paragraph in all cloned forms.
My code:
- <!DOCTYPE HTML>
<html>
<head>
<title>SheepIT</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.sheepItPlugin.js"></script>
</head>
<body>
<div id="content">
<div id="primary">
<div class="asp">
<form class="blockStyledForm" name="demoForm" method="post" action="newtable.php">
<fieldset>
<div class="field">
<div class="legend">Date</div>
<!-- Form-->
<div id="person_phones" class="embed">
<!-- Cloned form-->
<div id="person_phones_template" class="template">
<label for="person_phones_#index#">Specie:</label>
<input name="specie[]" type="text" id="person_phones_#index#" style="width:258px;"/>
<a id="person_phones_remove_current"><img class="delete" src="images/cross.png" width="16" height="16" border="0"></a><br />
<label for="person_phones_#index#">Celule:</label>
<input id="person_phones_#index#" name="cel[]" type="text" size="7" maxlength="10" /><br />
<label for="person_phones_#index#">Dilutia:</label>
<select id="sel_phones_#index#" name="dilutia[]">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<br />
<p id="person_phones_#index#" name="par" style="display:none;">500 = <input type="text" id="person_phones_#index#" name="x[]" size="2"> : <input id="person_phones_#index#" type="text" name="y[]" size="2"></p>
</div>
<!-- /Cloned form-->
<div id="person_phones_noforms_template" class="noItems">Fara Specie</div>
<!-- Butons-->
<div id="person_phones_controls" class="controls">
<div id="person_phones_add" class="btn form add"><a><span>Adauga</span></a></div>
<div id="person_phones_remove_last" class="btn form remove"><a><span>Elimina</span></a></div>
<div id="person_phones_remove_all" class="btn form removeAll"><a><span>Elimina Tot</span></a></div>
<div id="person_phones_add_n">
<input id="person_phones_add_n_input" type="text" size="4" />
<div id="person_phones_add_n_button" class="btn form add"><a><span>Adauga</span></a></div>
</div>
</div>
<!-- /Butons-->
</div>
<!-- /Form-->
<script type="text/javascript">
var phonesForm = $("#person_phones").sheepIt({
separator: '',
allowRemoveLast: true,
allowRemoveCurrent: true,
allowRemoveAll: true,
allowAdd: true,
allowAddN: true,
// Limite; maximul de specii
maxFormsCount: 90,
minFormsCount: 0,
iniFormsCount: 1,
removeLastConfirmationMsg: 'Esti sigur?',
removeCurrentConfirmationMsg: 'Esti sigur?',
removeAllConfirmationMsg: 'Esti sigur?',
afterAdd: function(source, newForm) {
// focus la elementul clonat
$(newForm).find('input').focus(function() {
$(this).addClass("focus");
});
$(newForm).find('input').blur(function() {
$(this).removeClass("focus");
});
$(document).ready(function(){
$("input[name^='specie']").autocomplete("autocomplete.php", {
selectFirst: true
});
});
$(newForm).find("select").live('change', function () {
if ($(this).val() == 1) {
$("p[name^='par']").show();
}
else{
$("p[name^='par']").hide();
}
});
}
});
</script>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
So please help me.
Thank very much in advance.