onclick function not responding

Question

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="button" value="Add">
    <div id="selectedStuff"></div>
    </div>

        $('#addButton').on('click', function( event ) {
            var searchedValue = $('#search_term').val(); 
            var divHolder = $('#selectedStuff'); 
            divHolder.append(searchedValue + '<br>'); 
            });         
        });

At least you're escaping the variable. But you should none the less use `mysqli_` or PDO with prepared statements and bound variables, as the `mysql_` API that you're currently using is deprecated since PHP 5.5 (and **removed entirely** in PHP 7) and you should [stop using them](http://stackoverflow.com/q/12859942) if you can. -- As for your actual issue though, shouldn't that JavaScript be put inside ` — Qirel, Mar 12 '16 at 00:12
Take your `#addButton` click function out of your `.searchFunction` keyup function. — DiddleDot, Mar 12 '16 at 00:13
@DiddleDot As far as I can tell, it isn't inside that function, it's just poor indenting. — Qirel, Mar 12 '16 at 00:15
@Qirel ah yes i know its bad practice but for now just working this way, and in my proper code its inside the tags — Nevershow2016, Mar 12 '16 at 00:16
@DiddleDot it isen't inside the function, i am not sure , i am really stuck on this problem — Nevershow2016, Mar 12 '16 at 00:17
@Qirel You're right. It's not inside of it. It's been a long day. — DiddleDot, Mar 12 '16 at 00:18
@DiddleDot it does, when i search , everything appears fine, its just when i click the add button, no box appears with that result — Nevershow2016, Mar 12 '16 at 00:19
@Nevershow2016 You use the ID `#addButton` in your JS, but your HTML has no such ID. Perhaps you ment to add the attribute `id="addButton"` to your button? — Qirel, Mar 12 '16 at 00:24
@DiddleDot Almost fooled me too, that indenting could've fooled anyone after a long day ;-) — Qirel, Mar 12 '16 at 00:30

score 1 · Accepted Answer · answered Mar 12 '16 at 00:24

1

You're missing the #addButton ID on this button

<input id="addButton" type="button" value="Add">

answered Mar 12 '16 at 00:24

DiddleDot

745
5
16

what a fail by me, however i was wondering, not sure if i should ask this in anther question, would you know how to add like an X button to the right of it so that they can remove it from the list? – Nevershow2016 Mar 12 '16 at 00:35
How about a big green checkmark? :) As per your question, it would be better if you asked a different question. – DiddleDot Mar 12 '16 at 01:02

ProsperOA · Answer 2 · 2016-03-12T01:18:36.333

0

Whenever you pass an html element through a js function, you need to specify which element through it's id. In the js function, you passed the id #addButton, but it won't grab anything because it doesn't match any html tag with the #addButton id.

Assign the addButton id to the input tag:

<input id="addButton" type="button" value="Add">

edited Mar 12 '16 at 01:18

answered Mar 12 '16 at 01:09

ProsperOA

67
7

score 0 · Answer 3 · answered Mar 12 '16 at 05:06

use this function instead of yours:

<input id="addButton" type="button" value="Add">


$(document).on("click","#addButton",function(){
       var searchedValue = $('#search_term').val(); 
       var divHolder = $('#selectedStuff'); 
       divHolder.append(searchedValue + '<br>'); 
});

onclick function not responding

3 Answers3