Hi all,
I have a major problem with a script Im writing for personal use, driving me up the wall all weekend
The script allows you to add steps along with a picture and a caption, there is a button at the bottom which allows you to either ‘remove last step’ or ‘add another step’ limited to a maximum of 10 steps. When using it on a browser and viewing the html it works seamlessly, the name and id changes as required, it works great apart form the fact that after step1 none of the other steps (ie, step2 step3 step4) send the variables upon form submission. I am using method post for the form and below is the javascript and the html for the step adder:
<script type=“text/javascript”>
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 steps allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<div style="margin-bottom:25px; height:180px;"><div class="form"><label>Step '+ counter + ': </label>' +
'<div class="form"><input readonly="readonly" id="step'+ counter + '" type="hidden" name="step'+ counter + '" maxlength="92"size="50" value="step'+ counter + '"/><div class="formholder">Photo <input style="outline: 5px solid #f5f5f5;" type="file" class="file" name="pics' + counter + '"/></div></br>' +
'<div style="margin-top:10px; margin-bottom:10px;" class="formholder">Title <input style="outline: 5px solid #f5f5f5; display:; width:330px;" id="rtitle' + counter + '" type="text" name="rtitle' + counter + '" maxlength="55" size="30"><br /></div></div>' +
'<div class="formholder"><textarea style="outline: 5px solid #f5f5f5; display:block; width:370px; height:85px; padding:0; margin:0 auto; overflow:auto;" rows="3" cols="49" type="text" name="step' + counter + '" id="step' + counter + '" value="" ></textarea></div></div></div>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more steps to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\
Step " + i + " : " + $(‘#step’ + i).val();
}
alert(msg);
});
});
</script>
<div id=“fragment-4” class=“ui-tabs-panel”>
<div class=“dividerlarge”>
<div id='TextBoxesGroup'>
<div style="margin-bottom:25px; height:180px;" id="TextBoxDiv1">
<div class="form">
<label>Step 1: </label>
<div class="form">
<input readonly="readonly" id="step1" type="hidden" name="step1" maxlength="92"size="50" value="step1"/>
<div class="formholder">
Photo <input style="outline: 5px solid #f5f5f5;" type="file" class="file" name="pics"/>
</div>
</br>
<div style="margin-top:10px; margin-bottom:10px;" class="formholder">
Title
<input style="outline: 5px solid #f5f5f5; display:; width:330px;" id="rtitle" type="text" name="rtitle" maxlength="55" size="30"/>
<br />
</div>
</div>
<div class="formholder">
<textarea style="outline: 5px solid #f5f5f5; display:block; width:370px; height:85px; padding:0; margin:0 auto; overflow:auto;" type='text' id='step1' name='step1' rows="3" cols="49"></textarea>
</div>
</div>
</div>
</div>
<div style="float:left; width: 400px;">
<input style="border: 1px solid #dddddd; margin-left:95px; background:#f5f5f5; font-weight:bold; color:#78AB46;" type='button' value='Click to add step' id='addButton'>
<input style="border: 1px solid #dddddd; background:#f5f5f5; font-weight:bold; color:#c16b54;" type='button' value='Click to remove last' id='removeButton'>
</div>
</div>
</div>
Can you see any reason it is not sending the data??
I will be eternally greatful for any advice