New Topic/Question
Reply
<script src="../includes/js/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
//From main form area
$('.dhcp0').click(function(){//inject the html block into the container
if($(this).val() == "Yes"){
$('#spanContainer').html('<div id="inputContainer0"><div id="inputs0"><input type="text" name="IP_Start0" class="IP_Start" /></div></div><button type="button" id="cloneInput">ADD FIELD</button>').fadeIn('fast');
$('#cloneInput').click(function(){//create additional input fields via clone function
var inputNum = $('#inputContainer0 > div').length;
var newInput = $('#inputs0').clone().appendTo('#inputContainer0');
newInput.find('input[type=text]').val("");//clear all cloned input fields
});
}else{
$('#spanContainer').fadeOut('fast');
};
});
//Clone main form area
$('#clone').click(function(){
var hostNum = $('#cloneContainer > div').length;//get the number of child divs within cloneContainer (there will always be at least 1)
var newForm = $('#cloneMe0').clone().prop('id', 'cloneMe' + hostNum);
newForm.find('input[type=text]').val("");//clear all cloned input fields
newForm.find('input:radio:checked').prop('checked', false);//clear all radio buttons
newForm.find('#inputs0').children('input:not(:first)').remove();//remove all but the first input text field
newForm.find('.dhcp0').each(function(){$(this).prop('name', 'DHCP' + hostNum)});//rename radio groups so they are independent of each other
newForm.find('#spanContainer').html('').hide();
newForm.find('.dhcp0').bind("click", function(){
if($(this).val() == "Yes"){
$('#cloneMe' + hostNum + ' .spanContainer').html('<div id="inputContainer0"><div id="inputs0"><input type="text" name="IP_Start0" class="IP_Start" /></div></div><button type="button" id="cloneInput" class="cloneInput">ADD FIELD</button>').fadeIn('fast');
$('#cloneMe' + hostNum + ' .IP_Start').prop('name', 'IP_Start' + hostNum);
$('#cloneMe' + hostNum + ' #inputContainer0').prop('id', 'inputContainer' + hostNum);
[color="#FF0000"]$('#cloneMe' + hostNum + ' .cloneInput').bind('click', function(){[/color]
var inputCount=$('#cloneMe' + hostNum + ' #inputContainer' + hostNum + ' > div').length;
var clonedInput = $('#cloneMe' + hostNum + ' #inputContainer' + hostNum + ' #inputs0').clone().prop('id', 'inputs' + hostNum);
clonedInput.find('input[type=text]').val("");//clear all cloned input fields
clonedInput.appendTo('#cloneMe' + hostNum + ' #inputContainer' + hostNum);
});
}else{
$('#cloneMe' + hostNum + ' .spanContainer').fadeOut('fast');
};
});
$('#ipCount').attr('value', (hostNum + 1));
newForm.appendTo('#cloneContainer');
});
});
</script>
</head>
<body>
<form action="arrayNew.cfm" method="post" name="arrayForm">
<div id="cloneContainer">
<div class="theClones" id="cloneMe0"><!---This gets counted cloned and appended below--->
<h5>Does the host obtain IP through DCHP?</h5>
<label for="DHCP0">Yes<input type="radio" name="DHCP0" class="dhcp0" value="Yes" /></label>
<label for="DHCP0">No<input type="radio" name="DHCP0" class="dhcp0" value="No" /></label>
<div id="spanContainer" class="spanContainer" style="display:none;"></div>
</div>
</div>
<button type="submit">Submit</button>
<button type="button" id="clone">Clone Me</button>
<input type="hidden" id="ipCount" name="ipCount" value="1" />
</form>
</body>
</html>
Everything works well in ie8. In ie7 the only issue is with the red color coded click function in the block above. Why not work in ie7? I'm researching on my own and have seen issues with ie7 and id's vs. classes.
Thanks for any insight you may have!
Cheers!
MultiQuote
| 