php - put selected values from textbox and dropdown to a basket like amazon -
i have php survey form in there question "which favourite movies?". question, set dropdown enable users select movies title or actor. if user select "by title", textbox (auto-complete) shown can insert film name. if user select "by actor", new window opened containing textbox user should insert actor name, dynamic dropdown populated showing list of movies actor.
question:how can selected movies (from textbox , dropdown in new window) , set them in basket amazon shopping cart? searched lot, not find solution.. can set selected values in new dropdown, professor asked me utilize same method amazon , set them in basket!!
update:here have tried:
<html> <head> <link type="text/css" href="res/jquery-ui.css" rel="stylesheet" /> <script type="text/javascript" src="res/jquery.min.js"></script> <script type="text/javascript" src="res/jquery-ui.min.js"></script> </head> <body> <div class="movienames"> <select id="selecttype" name="source" style="size=5px; width:100px; height:30px;"> <option value="">moviesby</option> <option value="bytitle">bytitle</option> <option value="byactor">byactor</option> <option value="bydirector">bydirector</option> </select> <div id="m_scents"> <p> <label style="margin-bottom:10px;" for="m_scnts"></label> <input class="autofill4" type="textbox" name= "q27[]" id="q" style="display:none;" placeholder="enter film titles here" /> <!--<a href="#" id="addscnt4">add more movies</a>--> <input type="button" value=">> add together selected list >>" id="btnmove" style="display:none;"/> <input name="s" value="all" type="hidden"/> <label style="margin-bottom:10px;" for="m_scnts"></label> </p> </div> <select id="selecteditems" name="selecteditems[]" multiple="multiple" style="width:200px; size:10px;"> </select> <script type="text/javascript"> $(document).ready(function () { $("#selecttype").change(function () { if ($(this).val() == "bytitle") { $("#q").show(); $("#btnmove").show(); $("#q").focus(); $("#q").autocomplete({ minlength: 0, delay:5, source: "mona.php", focus: function( event, ui ){ event.preventdefault(); //this prevent inserted text changed while moving in suggest list homecoming false; }, select: function( event, ui ) { $(this).val( ui.item.moviename ); homecoming false; } }).data("uiautocomplete")._renderitem = function( ul, item ) { homecoming $("<li></li>") .data( "item.autocomplete", item ) .append( "<a>" + (item.posterlink?"<img class='imdbimage' src='imdbimage.php?url=" + item.posterlink + "' />":"") + "<span class='imdbtitle'>" + item.moviename + "</span>" + "<div class='clear'></div></a>" ) .appendto( ul ); }; } else if ($(this).val() == "byactor"){ window.open("target.html","_blank","height=400,width=400, status=yes,toolbar=no,menubar=no,location=no"); } }); }); $('#btnmove').on('click', function (d) { var selected = $("#q").val(); if (selected.length == 0) { alert("nothing move."); d.preventdefault(); } $('#selecteditems').append(new option(selected)); var title = new option(selected); $("#q").val(""); d.preventdefault(); }); </script> </body> </html> and target.html:
<html> <head> <link type="text/css" href="res/jquery-ui.css" rel="stylesheet" /> <script type="text/javascript" src="res/jquery.min.js"></script> <script type="text/javascript" src="res/jquery-ui.min.js"></script> <script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js"type="text/javascript"type="text/javascript"></script> </head> <body> <form> <p> <input type="textbox" name= "tag" id="tags" placeholder="enter actor/actress name here" /> </p> <p> <select id="moviename" name="moviename[]" multiple="multiple" width="200px" size="10px" style="display:none;"> </select> </p> <script type="text/javascript"> $(document).ready(function () { $("#tags").autocomplete({ source: "actorsauto.php", minlength: 2, focus: function( event, ui ){ event.preventdefault(); //this prevent inserted text changed while moving in suggest list homecoming false; }, select: function (event, ui){ var selectedval = ui.item.value; $.post("actions.php", {q: selectedval}, function (response){ console.log(response); $("#moviename").html(response).show(); }); } }); }); </script> </form> </body> </html> could kindly inform me if there tutorial or sample can utilize purpose?
all ideas highly appreciated,
thanks
ok first part following:
html:
<html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <style> #basket{ padding: 10px; border:1px solid #ccc; } #basket h3{ padding: 0; margin: 0; } </style> </head> <body> <div class="movienames"> <select id="selecttype" name="source" style="font-size:15px; width:100px; height:30px;"> <option value="">moviesby</option> <option value="bytitle">bytitle</option> <option value="byactor">byactor</option> <option value="bydirector">bydirector</option> </select> <div id="m_scents"> <p> <label style="margin-bottom:10px;" for="m_scnts"></label> <input class="autofill4" type="textbox" name= "q27[]" id="q" style="display:none;" placeholder="enter film titles here" /> <!--<a href="#" id="addscnt4">add more movies</a>--> <input type="button" value=">> add together selected list >>" id="btnmove" style="display:none;"/> <input name="s" value="all" type="hidden"/> <label style="margin-bottom:10px;" for="m_scnts"></label> </p> </div> <div id="basket"> <h3>basket</h3> <div id="basket_content"> </div> </div> js:
var master_basket = new array(); $(document).ready(function() { $("#selecttype").change(function() { if ($(this).val() == "bytitle") { $("#q").show(); $("#btnmove").show(); $("#q").focus(); $("#q").autocomplete({ minlength: 0, delay: 5, source: "mona.php", focus: function(event, ui) { event.preventdefault(); //this prevent inserted text changed while moving in suggest list homecoming false; }, select: function(event, ui) { $(this).val(ui.item.moviename); homecoming false; } }).data("uiautocomplete")._renderitem = function(ul, item) { homecoming $("<li></li>") .data("item.autocomplete", item) .append("<a>" + (item.posterlink ? "<img class='imdbimage' src='imdbimage.php?url=" + item.posterlink + "' />" : "") + "<span class='imdbtitle'>" + item.moviename + "</span>" + "<div class='clear'></div></a>") .appendto(ul); }; } else if ($(this).val() == "byactor") { window.open("target.html", "_blank", "height=400,width=400, status=yes,toolbar=no,menubar=no,location=no"); } }); }); $('#btnmove').on('click', function(d) { d.preventdefault(); var selected = $("#q").val(); if (selected.length == 0) { alert("nothing move."); d.preventdefault(); } else { addtobasket(selected); } $("#q").val(""); }); function addtobasket(item) { master_basket.push(item); showbasketobjects(); } function showbasketobjects() { $("#basket_content").empty(); $.each(master_basket, function(k, v) { $("#basket_content").append("<div>" + v + "</div>"); }); } php jquery amazon cart
No comments:
Post a Comment