2

Hi guys so i have just started learning php and was able to figure out how to do a search function from my database to get information. The only bit which does not work so far is that fact when i get that information, and the user clicks on Add it does not seem to work. So what i want to happen is like a shopping list. The user searchs through my database and finds the thing he wants. Then clicks Add. Below the search box anther box will appear with that word. So he knows it has been added. Then after this i can add a cross and they can click it and get rid of the item if they want. However i have tried solutions to this problem but cant seem to get anywhere. Any help in getting this problem to work would be great.

Code so far:

   <input type="text" name='search_term' id="search_term" class="searchFunction">
    <input type="submit" value="Add">
    <div class="dropdown">
        <ul class="result"></ul>
    </div>

I have tried the onscreen click function , but i just hit a dead post doing this, so any help would be great. Something to get me started so i can start playing around with code and seeing what i can do etc.

Basically yes, once the user clicks add from the returned result, below that i want a box to appear with that name , so example : Example You see how when u search for an ingredient on there site and then click add , it appears below it? This is what i want

P.S i know about the sql injection :) but one step at a time for now x

6
  • so what you want to do is on click of the dropdown to put the item's value in input field ? Commented Mar 4, 2016 at 23:39
  • @VasilShaddix So basically the search functions works fine etc. Once they press the add button, i just want a box to appear with what they chose Commented Mar 4, 2016 at 23:40
  • "and the user clicks on Add it does not seem to work." because you don't have an onclick listener for your Add button. Commented Mar 4, 2016 at 23:40
  • @PatrickEvans yes unfortunately i have no clue how 2 do it . just hoping someone can show me the way Commented Mar 4, 2016 at 23:44
  • Well you have already set an onclick listener once, $('.result').on('click', 'li'..., how did you do that if you don't know how to do it? Commented Mar 4, 2016 at 23:51

1 Answer 1

1

First we need to change the input type to button so you don't submit anything and the page wont refresh. Also you will need to put an id to it. For example addButton. And we will need a div to place our selected stuff

<div id="selectedStuff"></div>

One problem is with the listener of the ul. I think it wont work because you add the suggestions after the listener. You need to destroy the listener and add it again after the ajax function loads so it will effect the results.

$.post( document.location.href, { search_term:search_term }, function( data ) {
    $('.result').html( data );    
    $('.result').off('click').on('click', 'li', function( event ) {
        var result_value = $(this).text();
        $('#search_term').val(result_value);
        $('.result').html('');
    });
});

Now lets add the button listener you will need to put the selected item in the div.

$('#addButton').on('click', function( event ) {
    var searchedValue = $('#search_term').val(); 
    var divHolder = $('#selectedStuff'); // the element we want to append our data to.
    divHolder.append(searchedValue + '<br>'); //adding the new stuff to it
});

Feel free to play around with it.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.