SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript not sending post variables - No firebug errors?

    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 &nbsp; <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 &nbsp; &nbsp; &nbsp;<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 += "\n 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 &nbsp; <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 &nbsp; &nbsp; &nbsp;
    <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

  2. #2
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    It looks like every step id being added to the DOM in it's own form. You should append them to the form that contains the submit button.

    You can check the layout of your form using Firebug's DOM inspector.

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Immerse,

    Thanks a lot for your quick response
    I had a look using firebug but to my knowledge it seems as if the elements are being included with the form
    I have attached a URL to my testing 'sandbox' with a set of username and password so it is possible to visually see my awful code at work

    http://ajburchell.com (log in with ajb225 as the username and tigger for the password, its the name of my cat dont laugh haha)
    then after logging in navigate to the link ajburchell.com/admin_recipes.php you will see some tabs, if you click on create recipe and then steps or ingredients this is where the problem is

    Thanks you soo much again
    Andrew


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •