Problems with getElementById with jquery load

Question

I have a page, showlist.php, which loads a set of results from a recordset. There is a search field which returns results using jquery load. This works fine for one word, but not if there is more than one word in the search query. Can anybody show how to get this to work for any search query? Must be some basic error but googling around has not helped.

Key elements of showlist.php:-

<div id="contentarea">

<script type="text/javascript"> 
   function contentloader(url){
      $("#contentarea").load(url);
 }
</script>

<input name="search" type="text" id="inputsearch"/>

<a onclick="contentloader('showlist.php?search='+document.getElementById('inputsearch').value+'')">Search</a>

</div>

Have you tried `$('#inputsearch').val()` instead of `document.getElementById('inputsearch').value` ? The difference between an obj and a jQuery obj might be a concern. — zer00ne, May 07 '16 at 18:18
Can you edit your question to include the code with the search query? — Jeff Puckett, May 07 '16 at 18:19
Thanks. @zer00ne, yes tried but gave same result (works for one word only). — Paul, May 07 '16 at 18:51
As @Kelvin Ye suggests, seems to be a whitespace problem, with the indicated solution below making it work. — Paul, May 07 '16 at 18:52

score 1 · Accepted Answer · edited May 23 '17 at 10:28

1

You need to HTML encode the result of document.getElementById('inputsearch').value so that all the works are passes to the server.

See:

HTML-encoding lost when attribute read from input field

Encode URL in JavaScript?

and links therein.

edited May 23 '17 at 10:28

Community

1
1

answered May 07 '16 at 18:24

VRPF

3,118
1
14
15

Great, the second link provided the solution: I put this instead in the search button: search='+encodeURIComponent(document.getElementById('inputsearch').value)+'') and it now handles several words. Thanks! – Paul May 07 '16 at 18:45

score 1 · Answer 2 · edited May 23 '17 at 12:31

1

You need to call encodeURIComponent with the value to correctly format the query/search term:

<a onclick="contentloader('showlist.php?search='+encodeURIComponent(document.getElementById('inputsearch').value)+'')">Search</a>

See Stack Overflow question Best practice: escape, or encodeURI / encodeURIComponent for further discussion.

edited May 23 '17 at 12:31

Community

1
1

answered May 07 '16 at 18:35

nullable

2,513
1
29
32

Yes, that's exactly what worked as I commented after reading VRPF's input above. Thanks, and sorry I had to mark his comment correct first. – Paul May 07 '16 at 18:56

score 0 · Answer 3 · answered May 07 '16 at 18:29

0

type abc%20xyz in the box. if that works, maybe you need to urlencode the value.

answered May 07 '16 at 18:29

user6304752

11

TRiNE · Answer 4 · 2016-05-07T18:46:43.583

You can use onClick listener, since you are already using jQuery. I think it is a better than using onClick attribute.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<div id="contentarea">

<input name="search" type="text" id="inputsearch"/>
<a id="search">Search</a>

<script type="text/javascript"> 
   $( document ).ready(function (){     // when document ready
      $("#search").click(function(){    // add a click listner
            $("#contentarea").load(
                  encodeURI($('#inputsearch').val())   // encode input string
             );
        }
      );
    })
</script>
</div>

Problems with getElementById with jquery load

4 Answers4