Sending fetched data from one div to another

Question

This is the code that retrieves names from mysql database using php and ajax

Updated Code

index.php

    <html>
<head>
<script language="javascript">
    function showresult()
    {  
    var product_name = document.getElementById("searchval").value;   
    if(window.XMLHttpRequest)
    {
    XMLHttpRequestObject = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
    }  
     XMLHttpRequestObject.open("POST", "search.php", true);   
     XMLHttpRequestObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                    
     XMLHttpRequestObject.send("search_res=" + product_name);  
     XMLHttpRequestObject.onreadystatechange = function()  
    {  
        if(XMLHttpRequestObject.readyState == 4)
        {
            if(XMLHttpRequestObject.status == 200)
            {
                document.getElementById("displayresult").innerHTML = XMLHttpRequestObject.responseText;
            }
        }

    }  
    }
function throwval(obj)
{
    var sent_id = obj.id;
var v = document.getElementById(sent_id).value;
    var newp = document.createElement("p");     
var text = document.createTextNode(v);
newp.appendChild(text);
document.getElementById("getselected").appendChild(newp);  
}
function sendvalues()
{

var div_val = document.getElementById("getselected");
var str="|";
    for (i=0; i < div_val.getElementsByTagName("p").length; i++)
    {
    var paragraphs = div_val.getElementsByTagName("p");
    var pvalues = paragraphs.item(i).innerHTML;
str = str + pvalues + "|";
}   
window.location="send_data.php?str="+str;
}

    </script>
    </head>
    <body>
    <form method="post" name ="searchform" id="idsearchform" >
    <input type="text" name="search" id="searchval"/>
    <input type="button" name="starts" value="startsearch" onclick="showresult()"/>
    </form>
    <div id="displayresult">

    </div>
    <div id="getselected">
    Selected :
    </div>
    <form name="sendf" method="post" action="send_data.php">
    <input type="button" id="sendtophp" name="sendingval" value="next step" onclick="sendvalues()">
    </form>
    </body>
    </html>

search.php

$mysql_con = mysql_connect("localhost","root","") or die("Could not   connect".mysql_error());
$mysql_db = mysql_select_db("test",$mysql_con) or die("Unable to select db  ".mysql_error());
$keyword = mysql_real_escape_string($_POST['search_res']);
$search_q = mysql_query("Select * from products where pname like '%$keyword%'");
if(mysql_num_rows($search_q)!=0)
{
    while($result = mysql_fetch_array($search_q))
    {
        $name = $result['pname'];
        echo "<input type='button' name='resultname' id='$productid' value='$name' onclick='throwval(this)'><br/>";
    }
}

send_data.php

<?php
$url = $_SERVER['REQUEST_URI'];
$exploded = explode('|',$url,-1);
$number = count($exploded);
?>
<html>
<body>
<table align="center" border="1">
<form method="post" action="send_data.php">
<tr>
<td>Name</td>
<td>Quantity</td>
</tr>
<?php
for($i=1;$i<$number;$i++)
{
    $p_name = $exploded[$i];
?>
<tr>
<td><input type="text" name="p_names" value="<?php echo $p_name; ?>" /></td>
<td><input type="text" name="quantity" /></td>
</tr>
<?php 
}
?>
<tr>
<td></td>
<td><input type="submit" name="send_request" value="Submit" /></td>
</tr>
</form>
</table>
</body>
</html>

I want to send the selected result to another div from where i can send the selected values to another file using php or javascript (no jquery). how can i do that.

Update: I have successfully sent data from one to another using appendchild. my problem now is that the values i add are added as a single string. I want each value to be separate so that i can send it to a php (kind of like a shopping cart). Any Ideas? Thanks

I managed to send separate values using javascript by creating a new p attribute for every value that is selected. I can now display the values in send_data.php but i do not know how to send multiple values generated by the for loop through one form. Any ideas?

First of all, mysql_ functions are being deprecated, take a look at PDO. and to change the content of a div after the page is loaded, you need JavaScript. — void, Apr 07 '13 at 19:55
check out http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery - and yes, please remove the mysql_query stuff. — herrjeh42, Apr 07 '13 at 20:41
I would have to look up PDO and once I do I will definitely update it but for now i need to send the desired value to another div using javascript which i have not been able to do. I tried to send the retrieved value to another div using innerHTML but when i search again the selected value disappears and it only selects the first value if there are more than one results for the search. How can I accomplish this? @jamie0726 — c_d_n, Apr 08 '13 at 13:15
so you need a javascript function to append html to existing html, look here for inspiration: http://stackoverflow.com/questions/6136012/html-and-append-without-jquery — herrjeh42, Apr 08 '13 at 16:25
and I could easily drop your database, as you are open to sql injection. Check this reference to understand how it works: http://roshanbh.com.np/2007/12/sql-injection-attack-examples-and-preventions-in-php.html — herrjeh42, Apr 08 '13 at 16:27
Thanks for the help. I have updated my question. could you help me out here @jamie0726 — c_d_n, Apr 09 '13 at 12:46

score 0 · Accepted Answer · answered Apr 10 '13 at 06:56

0

I understand that you are trying to build a search form. The user can do multiple searches. The user may select a result from each search request. Each selected result is stored somewhere and send to another php script once the user is done with searching and selecting.

I would add a hidden field to the HTML and append the result not only to the DIV like you have done, but also to the value of the hidden field. Let's say the user selected productId 1,3,5 the value of the hidden field would be "1,2,3". In PHP you can explode the string and cast each element into an int and do whatever you want with it.

This approach assumes that the user clicks some kind of "I am done button" once he is done with searching and selecting, so that you can submit the form with the hidden field to the server.

The alternative is to send the selected value back to the server using an Ajax request as soon as the user selected a value.

answered Apr 10 '13 at 06:56

herrjeh42

2,782
4
35
47

thanks for the help. i used the explode method to get multiple values. just have one more problem left – c_d_n Apr 10 '13 at 19:19
Let's say you want to print a selectbox for each element of $exploded. Add to the for loop: ... $p_name = $exploded[$i]; print "'; ... Note the p_names[] construction, this is a little trick to define an array in a form. So when the user clicks on the checkbox with value 3 and another one with value 4, p_names will be an array containing 3 and 4 after the form was submitted. – herrjeh42 Apr 10 '13 at 23:23
I tried this approach and changed both p_names and quantity to p_names[] and quantity[] respectively however i kept the input type as text. Then I used print_r to get the submitted values. Its working fine now. Thank you for helping me out – c_d_n Apr 11 '13 at 07:13

Sending fetched data from one div to another

1 Answers1