How to retrieve text of dynamically create textbox in another php file using POST method?

Question

I dynamically created a textbox on the event of click on a certain button and now I want to retrieve the text from the textbox to display on another php form page. Following is my html code where I assign the name "c1", "c2" and "c3" to the dynamically created textboxes.

<script>
            $(document).ready(function(){
            $("#t11, #t12").click(function(){
                var div = $("<div />"); 
        div.html(GenerateTextbox("","c1"));
        $("#TextBoxContainer").append(div);
                 var div = $("<div />");
        div.html(GenerateTextbox("","c2"));  
        $("#TextBoxContainer").append(div);
                 var div = $("<div />");
        div.html(GenerateTextbox("","c3")); 
        $("#TextBoxContainer").append(div);
            });
});
function GenerateTextbox(value,name1) {
            console.log(name1);
    return '<input name = "'+ name1 + '" type="text" value = "' + value + '" /> ';} 
</script>

My php code in another document:

<td>
                <input type="<?php echo $_POST["t1"];?>"> <?php echo $_POST["c1"];?> 
                <input type="<?php echo $_POST["t1"];?>"><?php echo $_POST["c2"];?>
                <input type="<?php echo $_POST["t1"];?>"><?php echo $_POST["c3"];?>
            </td>

When the second php page is directed to, it say that c1, c2 and c3 are undefined indices. Everything else works fine but I cannot get this information from one page to the other.

Please help!

Full form html:

<table align="center">
    <form action="output.php" method="post">
    <tr> 
        <td>
        Background color of page:<br/>
        </td>
        <td>
   <input id="ex" type="color" name="bgcol" id="nbg">
        </td> 
    </tr>
        <tr> 
        <td>
        Name of form:
        </td>
        <td>
        <input type="text" name="titleform" id="titleform">
        </td>
     </tr>
        <tr> 
        <td>
        Font size:
        </td>
        <td>
        <input type="text" name="fontsize" id="fontsz">
        </td>
    </tr>
        <tr> 
        <td>
        Font:
        </td>
        <td>
        <input type="text" name="fontt" id="nbg">
        </td>  
    </tr>
        <tr> 
        <td>
        Font color:
        </td>
        <td>
        <input id="ex"type="color" name="fontt" id="nbg">
        </td>  
    </tr>
        <tr> 
        <td>
        Background color of form:<br/>
        </td>
        <td>
        <input id="ex" type="color" name="bgcolor" id="nbg" value="#FFFFFF">
        </td>   
    </tr>
        <tr> 
        <td>
        Input #1:
        </td>
        <td>
        <input type="text" name="input1" id="nbg">
        </td>     
        <td>
        Type:
        </td>
        <td>
             <select name="t1" id="t1">
        <option>text</option>
        <option id="t11">radio</option>
        <option id="t12">checkbox</option>
    </select>
            </td>
            <td>
            <div id="TextBoxContainer">  
    <!--Textboxes will be added here -->  
</div>
            </td>

        <tr> 
        <td>
        Input #2:
        </td>
        <td>
        <input type="text" name="input2" id="nbg">
        </td>  
        <td>
        Type:
        </td>
        <td>
        <select name="t2">
        <option>text</option>
        <option id="t21">radio</option>
        <option id="t22">checkbox</option>
    </select>
        </td>  
            <td>
            <div id="TextBoxContainer2">  
    <!--Textboxes will be added here -->  
</div>
            </td>
    </tr>
        <tr> 
        <td>
        Input #3:
        </td>
        <td>
        <input type="text" name="input3" id="nbg">
        </td>  
        <td>
        Type:
        </td>
        <td>
        <select name="t2">
        <option>text</option>
        <option id="t31">radio</option>
        <option id="t32">checkbox</option>
    </select>
        </td>
            <td>
            <div id="TextBoxContainer3">  
    <!--Textboxes will be added here -->  
</div>
            </td>
    </tr>
        <tr> 
        <td>
        Input #4:
        </td>
        <td>
        <input type="text" name="input4" id="nbg">
        </td>
        <td>
        Type:
        </td>
        <td>
        <select name="t4">
        <option>text</option>
        <option id="t41">radio</option>
        <option id="t42">checkbox</option>
    </select>
        </td>  
            <td>
            <div id="TextBoxContainer4">  
    <!--Textboxes will be added here -->  
</div>
            </td>
    </tr>
        <tr> 
        <td>
        Input #5:
        </td>
        <td>
        <input type="text" name="input5" id="nbg">
        </td>   
        <td>
        Type:
        </td>
        <td>
        <select name="t5">
        <option>text</option>
        <option id="t51">radio</option>
        <option id="t52">checkbox</option>
    </select>
        </td>
            <td>
            <div id="TextBoxContainer5">  
    <!--Textboxes will be added here -->  
</div>
            </td>
    </tr>
        <tr>
        <td>
            <button type="submit" name="Create_form" id="form2" value="submit" onclick="return check()"> >Submit
            </button>   
            </td>
        </tr>
    </form>
</table>

Show GenerateTextbox please. Are these textboxes inside a form with method=post? — James
– James, Commented Aug 25, 2018 at 18:24
added in the edit.. yes, the textboxes are inside a form with method post — Tanshiv2
– Tanshiv2, Commented Aug 25, 2018 at 19:01

Gabriel · Accepted Answer · 2018-08-26 11:01:13Z

1

You need to attach your div to the DOM, and particularly as a child element of your form. Otherwise, the <input>s never get POSTed.

$("#myForm").append(div);

Also, since you used jQuery to manipulate your div and form in the first place, I would advise you continue with jQuery to build the inner inputs, rather than just provide inner HTML in your GenerateTextbox function.

answered Aug 26, 2018 at 11:01

Gabriel

1,44913 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gabriel Over a year ago

@Transhiv2 You have several other flaws in your HTML, the first one being that it is not recommended to place a form tag inside a table tag, with your trs yet inside the form. So, I guess that you're appending your div container to a node which is not supposed to show you anything (typically, outside any tr or td but still inside a form which is itself inside a table).

Gabriel Over a year ago

(Btw I think that they were already not appearing at all, when you weren't even trying to attach them to the DOM earlier, correct?)

Collectives™ on Stack Overflow

How to retrieve text of dynamically create textbox in another php file using POST method?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related