Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2009
    Posts
    351
    Thanks
    75
    Thanked 0 Times in 0 Posts

    simple AJAX problem

    How do i send the id of a submit button in a form.

    The will be a couple of 100 form buttons in the loop so i want to send the id of the button that is click.

    here is the code i have so far.

    if anyone can help please do. Thanks

    PHP Code:

    <html>
    <head>
    <script type="text/javascript">
    function showUser(str)
    {
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getuser.php?q="+str,true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>

    <table border="1">
    <tr>
    <th>Viewed</th>
    <th>Event</th>

    <th>id</th>


    showUser(this.value)

    <?php
    $sql 
    "SELECT * FROM events WHERE `show` =  'yes' AND date > now() ORDER BY date ASC";
            
    $result mysql_query($sql);
                    
            while(
    $row mysql_fetch_array($result)) {
                
    $id $row['id'];
            echo <<<
    HTML         
            
    <tr>    
                <
    td>
                  <
    form name="contact" method="post" action="">
                                <
    div>
                                    <
    input type="submit" name="action" value="Viewed"/>
                                </
    div>
                            </
    form>
                </
    td>
            </
    tr>
            
    HTML;    
            }

    ?>
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,206
    Thanks
    80
    Thanked 4,565 Times in 4,529 Posts
    Okay, for starters, you can't use a submit button. If you do, the <form> *WILL* be submitted!

    Just use an ordinary button.

    And then it's trivial:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showUser(str)
    {
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","getuser.php?q="+str,true);
        xmlhttp.send();
    }
    </script>
    </head>
    <body>
    <div id=="txtHint"></div>
    
    <form><!-- form isn't really used here -->
    <table border="1">
    <tr>
        <th>Viewed</th>
        <th>Event</th>
        <th>id</th>
    </tr>
    <?php
    $sql = "SELECT * FROM events WHERE `show` =  'yes' AND date > now() ORDER BY date ASC";
    $result = mysql_query($sql);
                    
    while($row = mysql_fetch_array($result)) 
    {
        $id = $row['id'];
    ?>
    <tr>    
        <td>
            <input type="button" value="Viewed" 
                   onclick="showUser(<?php echo $row["id"]; ?>)" />
        </td>
        <td>
            <?php echo $row["event"]; ?>
        </td>
        <td>
            <?php echo $row["id"]; ?>
        </td>
    </tr>
    <?php
    }
    ?>
    </table>
    </form>
    </body>
    </html>
    I guessed at what you wanted to show in the second and third <td>s in the rows.

    You had headings for three columns, so you should have 3 columns in each row, of course.

    The above assumes that your $row["id"] is a number. If not, you need to change the onclick slightly:
    Code:
                   onclick="showUser('<?php echo $row["id"]; ?>')" />
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    kevinkhan (06-21-2012)

  • #3
    Regular Coder
    Join Date
    Jun 2009
    Posts
    351
    Thanks
    75
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Okay, for starters, you can't use a submit button. If you do, the <form> *WILL* be submitted!

    Just use an ordinary button.

    And then it's trivial:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showUser(str)
    {
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","getuser.php?q="+str,true);
        xmlhttp.send();
    }
    </script>
    </head>
    <body>
    <div id=="txtHint"></div>
    
    <form><!-- form isn't really used here -->
    <table border="1">
    <tr>
        <th>Viewed</th>
        <th>Event</th>
        <th>id</th>
    </tr>
    <?php
    $sql = "SELECT * FROM events WHERE `show` =  'yes' AND date > now() ORDER BY date ASC";
    $result = mysql_query($sql);
                    
    while($row = mysql_fetch_array($result)) 
    {
        $id = $row['id'];
    ?>
    <tr>    
        <td>
            <input type="button" value="Viewed" 
                   onclick="showUser(<?php echo $row["id"]; ?>)" />
        </td>
        <td>
            <?php echo $row["event"]; ?>
        </td>
        <td>
            <?php echo $row["id"]; ?>
        </td>
    </tr>
    <?php
    }
    ?>
    </table>
    </form>
    </body>
    </html>
    I guessed at what you wanted to show in the second and third <td>s in the rows.

    You had headings for three columns, so you should have 3 columns in each row, of course.

    The above assumes that your $row["id"] is a number. If not, you need to change the onclick slightly:
    Code:
                   onclick="showUser('<?php echo $row["id"]; ?>')" />

    Thats exactly what i needed thanks VERY MUCH

    this is probably asking to much but is there any easy way of getting rid of the table row when i click the button...

    im looking at this tutorial http://tutorialzine.com/2010/03/ajax...php-mysql-css/ but jez it is way to complicated for me

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,206
    Thanks
    80
    Thanked 4,565 Times in 4,529 Posts
    Oh, trivial.

    Change the <input> to this:
    Code:
            <input type="button" value="Viewed" 
                   onclick="showUser(this,<?php echo $row["id"]; ?>)" />
    (again, put apostrophes around the php echo if the id is not a number)

    And then change the function:
    Code:
    function showUser(inp,str)
    {
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","getuser.php?q="+str,true);
        xmlhttp.send();
    
        var node = inp.parentNode;
        while ( node != null )
        {
            if ( node.tagName == "TR" )
            {
                node.parentNode.removeChild( node );
                break;
            }
            node = node.parentNode;
        }
    }
    Stuff in red is new. Nothing removed, just added.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    kevinkhan (06-22-2012)

  • #5
    Regular Coder
    Join Date
    Jun 2009
    Posts
    351
    Thanks
    75
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Oh, trivial.

    Change the <input> to this:
    Code:
            <input type="button" value="Viewed" 
                   onclick="showUser(this,<?php echo $row["id"]; ?>)" />
    (again, put apostrophes around the php echo if the id is not a number)

    And then change the function:
    Code:
    function showUser(inp,str)
    {
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","getuser.php?q="+str,true);
        xmlhttp.send();
    
        var node = inp.parentNode;
        while ( node != null )
        {
            if ( node.tagName == "TR" )
            {
                node.parentNode.removeChild( node );
                break;
            }
            node = node.parentNode;
        }
    }
    Stuff in red is new. Nothing removed, just added.

    Thats very good fair play to you.

    Thanks very much really appreciate it.
    I really have to start learning java script. its cool the stuff you can do


  •  

    Posting Permissions

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