SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: JS and php

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    JS and php

    I'm learning php here, but my project requires javascript. Now I'm forced to do JS thing.

    I downloaded a code that can dynamically add textbox, my problem is how php can get the value of the generated textbox.
    For validation and submission.
    I don't even know how to make a submit button upon clicking the link.
    any help? thank you.

    Code:
    <SCRIPT language="javascript"> 
    var intTextBox=0; 
    
    //FUNCTION TO ADD TEXT BOX ELEMENT 
    function addElement() 
    { 
    intTextBox = intTextBox + 1; 
    var contentID = document.getElementById('content'); 
    var newTBDiv = document.createElement('div');
    newTBDiv.setAttribute('id','strText'+intTextBox); 
    newTBDiv.innerHTML = "Serial numbers "+intTextBox+": <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/>";
    
    contentID.appendChild(newTBDiv); 
    
    } 
    
    //FUNCTION TO REMOVE TEXT BOX ELEMENT 
    function removeElement() 
    { 
    if(intTextBox != 0) 
    { 
    var contentID = document.getElementById('content'); 
    contentID.removeChild(document.getElementById('strText'+intTextBox)); 
    intTextBox = intTextBox-1; 
    } 
    } 
    </SCRIPT> 
    </head> 
    <body> 
    <p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p> 
    <p><a href="javascript:addElement();" >Add</a> <a href="javascript:removeElement();" >Remove</a></p> 
    <div id="content"></div>

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hello,

    Wrap the area with the inputs in a <form> and a <input type="submit"> And all the values will get posted to the server and can be processed by PHP.

  3. #3
    Keeper of the SFL StarLion's Avatar
    Join Date
    Feb 2006
    Location
    Atlanta, GA, USA
    Posts
    3,747
    Mentioned
    64 Post(s)
    Tagged
    0 Thread(s)
    As Mark said, use a form; keep in mind that PHP and JS operate in completely different spaces and runtimes - neither one knows about the other.

    (Simplified quite a bit)
    Page is requested.
    The Server identifies the script as PHP, and the PHP engine does what it needs to do. The result is HTML.
    The HTML is then sent to the browser.
    The browser then interprets the HTML, and starts any Javascript it needs to.
    Javascript does whatever it needs to do; in this case, dynamically create form elements.
    When the Submit button is pushed, the browser gathers all the data for that form, and sends another page request to the server. And the process starts again.
    Never grow up. The instant you do, you lose all ability to imagine great things, for fear of reality crashing in.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2011
    Posts
    221
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <html> 
    <head> 
    <title>Adding and Removing Text Boxes Dynamically</title> 
    <SCRIPT language="javascript"> 
    var intTextBox=0; 
    
    //FUNCTION TO ADD TEXT BOX ELEMENT 
    function addElement() 
    { 
    intTextBox = intTextBox + 1; 
    var contentID = document.getElementById('content'); 
    var newTBDiv = document.createElement('div');
    var submit = document.getElementById('submit').style.visibility="visible";
    newTBDiv.setAttribute('id','strText'+intTextBox); 
    //newTBDiv.innerHTML = "Serial numbers "+intTextBox+": <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/><br/><br/>";
    newTBDiv.innerHTML = "Serial numbers "+intTextBox+": <input type='text' id='" + intTextBox + "' name='sn[]'/><br/><br/>";
    contentID.appendChild(newTBDiv);
    //contentID.appendChild(submit);
    } 
    
    //FUNCTION TO REMOVE TEXT BOX ELEMENT 
    function removeElement() 
    { 
    if(intTextBox != 0) 
    { 
    var contentID = document.getElementById('content'); 
    contentID.removeChild(document.getElementById('strText'+intTextBox)); 
    intTextBox = intTextBox-1; 
    } 
    } 
    </SCRIPT> 
    </head> 
    <body> 
    <p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p> 
    <p><a href="javascript:addElement();" >Add</a> <a href="javascript:removeElement();" >Remove</a></p>
    <form action='test.php' method='post'>
    <div id="content"></div>
    <div id="submit" style="visibility: hidden;">
     <input type='submit' value='submit'>   
        
    </div>
    </form>
    </body> 
    </html>
    this works fine. Thank you.

  5. #5
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    725
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    HI Guys

    I have seen ur code.... I am using it but there is one problem.

    I have added one checkbox and two textboxes, and my code looks like this

    <html>
    <head>
    <title>Adding and Removing Text Boxes Dynamically</title>
    <SCRIPT language="javascript">
    var intTextBox=0;

    //FUNCTION TO ADD TEXT BOX ELEMENT
    function addElement()
    {
    intTextBox = intTextBox + 1;
    var contentID = document.getElementById('content');
    var newTBDiv = document.createElement('div');
    var submit = document.getElementById('submit').style.visibility="visible";
    newTBDiv.setAttribute('id','strText'+intTextBox);
    newTBDiv.innerHTML = "Serial numbers "+intTextBox+ "<input type='checkbox' id='cb" + intTextBox + "' name='cb[]'/>" + ": <input type='text' id='nm" + intTextBox + "' name='nm[]'/> -- <input type='text' id='vl" + intTextBox + "' name='vl[]'/><br/><br/>";
    contentID.appendChild(newTBDiv);
    }

    //FUNCTION TO REMOVE TEXT BOX ELEMENT
    function removeElement()
    {
    if(intTextBox != 0)
    {
    var contentID = document.getElementById('content');
    contentID.removeChild(document.getElementById('strText'+intTextBox));
    intTextBox = intTextBox-1;

    if(intTextBox < 1) {
    document.getElementById('submit').style.visibility="hidden";

    }


    }
    }
    </SCRIPT>
    </head>
    <body>
    <p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>

    <form action='post.php' method='post'>
    <div id="content"></div>
    <div id="submit" style="visibility: hidden;">
    <input type='submit' value='submit'>

    </div>
    </form>
    <p><a href="javascript:addElement();" >Add</a> <a href="javascript:removeElement();" >Remove</a></p>
    </body>
    </html>

    And I am getting an output like the following.

    Array
    (
    [cb] => Array
    (
    [0] => on
    [1] => on
    )

    [nm] => Array
    (
    [0] => a
    [1] => b
    )

    [vl] => Array
    (
    [0] => 1
    [1] => 2
    [2] => 3
    )

    )

    Now, in the above output how do I know pragmatically which checkbox values were checked and which textbox were filledup?

    If there is anyway we can use names of the elements instead of indexed arrays? For example

    Array
    (
    [t_x] => 1
    [t_y] => 2
    [t_z] => 3
    )



    THanks


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
  •