My project is to create a webpage to search mobile gadgets on a website(www.mudah.my), and I want the result to be shown on my own webpage, but NOT redirecting me to www.mudah.my. May I know is that possible to do that? I've ask around and people told me that I can use Ajax, but I totally don't know how to implement it since I have 0 knowledge on it and I'm lack of time to learn from scratch. Below are my code to search items.

<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
    <title>Seller Evaluation System</title>
    <style type="text/css">
        body {background-image:url("images.jpg");}
    </style>
</head>

<body>

 <!-- first, use ajax to load the page.  then use jquery dom manipulation.
1. find the div that holding all the ads
2. extract the entire div into variable
3. replace all the mudah footprint
4. populate the entire div into your own page. -->

    <h1><center>Seller Evaluation System<center></h1>

        <p><center>
            <script>
                function searchSite(){
                var input=document.getElementById("searchinput").value;
                var searchForm=document.getElementById("searchForm");
                searchForm.action="http://www.mudah.my/Malaysia/Electronics-3000/"+input+"-for-sale?lst=0&fs=1&q="+input+"y&cg=3000&w=3&so=1&st=s";
                searchForm.submit();
            }
            </script>

            <!--<script>
    function displayResult(){
     $.ajax({
     url: searchForm.action,
     dataType: 'text',
     success: function(data) {
          var elements = $("<div>").html(data)[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
          for(var i = 0; i < elements.length; i++) {
               var theText = elements[i].firstChild.nodeValue;
               // add code to populate the div into my page
          }
     }
});
 } -->
            </script>

            <form method="get" action="" id="searchForm">
            <input type="text" id="searchinput" size="33" placeholder="Search Electronic Gadgets..." autofocus>
            <button onclick="searchSite()">Search</button>
            <!--<iframe src="http://www.mudah.my/Malaysia/Electronics-for-sale-3000" width="600" height="600"></iframe> -->
            </form>
            <p><label>Mudah<input type="checkbox" name="searchFrom" value="Mudah" checked/></label>
            <label><font color="grey">Lazada</font><input type="checkbox" name="searchFrom" value="Lazada" disabled="disabled"/></label>
            <label><font color="grey">Lelong</font><input type="checkbox" name="searchFrom" value="Lelong" disabled="disabled"/></label>
            <label><font color="grey">Ebay</font><input type="checkbox" name="searchFrom" value="Ebay" disabled="disabled"/></label></p>
        </center></p>
    </br>
</body>

</html>

Due to browser security restrictions, most Ajax requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
I suggest you to give a glance here
to find the solution that better fit your needs

hope this helps you

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.