Selecting separate values using javascript

ra_ie_darkness · April 9, 2013

what I am trying to do is something similar to a shopping cart. I am using ajax to display the search results. when i click on one item from the results it gets added to another paragraph. The problem is that when i select the second item it is appended as string to the last item.

For example if I select books and pens. It shows bookspens

I want each item to be shown separately so that i can send the seperate values to a php script for inserting it as requested items.

how can i achieve this without jquery

This is the code

search.php



$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))
		{
			$productid = $result['id'];
			$name = $result['pname'];
			echo "<input type='button' name='resultname' id='$productid' value='$name' onclick='throwval(this)'><br/>";
		}
	}

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 content = document.createTextNode(v);
	document.getElementById("newdiv").appendChild(content);
}
function sendvalues()
{
	var data = document.getElementById("newdiv").textContent;
	alert(data);
}
</script>
</head>
<body>
<!--Search Form-->
<form method="post" name ="searchform" id="idsearchform" >
<input type="text" name="search" id="searchval" />
<input type="button" name="starts" id="btn" value="startsearch" onclick="showresult()"/>
</form>
<div id="displayresult">
<!--Search results will be displayed here-->
</div>
Selected :
<p id='newdiv'>
<!--Selected values will be displayed here-->
</p>

<form name="form1" method="post" action="send_data.php">
<input type="button" id="sendtophp" name="sendingval" value="next step" onclick="sendvalues()">
</form>
<p id='fetched'>
</p>
</body>
</html>

Sign In

Selecting separate values using javascript

Recommended Posts

ra_ie_darkness

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information