Announcement

Collapse
No announcement yet.

Customize the keyword search box

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Customize the keyword search box

    For the search box that located in frame.html that searches by keyword I want to be able to do is have that value cleared as soon as someone clicks in the box to enter their search.

    Is this possible? Right now when some clicks in the box they have to erase text that is there search by keyword..

    If anyone knows how to change the code to clear the data upon clicking.

    I have already contacted 3Dcart support and they don't know.

    I still what the text to show the first time so the customer knows that they can search by keyword in the box.

    If that can't be done can some test go right under box to indicate what it is for. It would need to be right under and not too far away from the box to indicate what it is for.

    If anyone has this on there site your help would be appreciated.

    I am not looking to have someone custom design the page. I just want the box cleared upon clicking.

  • #2
    add these attributes to the input field

    HTML Code:
    <input type="text"...  
    value="your placeholder text here"
    onfocus="this.value='' " 
    onblur="if(this.value ==''){this.value= 'your placeholder text here'})
    .. >
    onfocus should check to see if this.value is blank (those are two single quotes, not a double quote. )

    onblur essentially checks to see if the value remains blank when the person moves their cursor away - it puts the placeholder text back. if not, it retains the value that is entered until the form is submitted.

    this can be done completely javascript side, but if you dont mind a little messy markup (3dcart in general does not.. lol) then this is easy to slap in your template file. Don't delete any of the other attributes, just add or modify the value, onfocus and onblur.

    edit:
    sorry i only halfway answered this question. when the form submits if the placeholder text is still there it will act as if thats what you are searching for.

    at the bottom of your page preferably, but within any already existing script tags, please enter this code (you can copy and paste if you need to)

    HTML Code:
    $(function(){
        $('form[name='searchForm']').on('submit', function(){
            if($('#searchLight').val() == 'your placeholder text here'){
                $('#searchLight').val(''); 
            }
         }
    })
    this function will add an event listener to the form after the dom has loaded that will intercept the submission and make sure the value is emptied out if it matches your placeholder text.

    Its been a while since ive done browser based javascript as im usually programming oop in node now. if this prevents the form from actually submitting, use this block instead, it just has another line added.

    HTML Code:
    $(function(){
        $('form[name='searchForm']').on('submit', function(){
            if($('#searchLight').val() == 'your placeholder text here'){
                $('#searchLight').val('');
                $('form[name='searchForm']').submit();
            }
         }
    })
    anywhere you see 'your placeholder text here' should obviously be replaced with your real placeholder text.

    hope i wasnt too confusing.. I apologize if i was.
    Last edited by jleclair; 05-30-2013, 08:53 PM.

    Comment


    • #3
      Re: clearing text from keyword searchbox

      Thank you for the code information. I am still a little confused because it appears that code text has to be removed to match the code you provided.

      Here is the Frame.html code for the search as it is now. If you could please let me know what I needs to look like after the changes.

      <td><!--START: FRAME_SEARCH-->
      <form method="get" name="searchForm" action="search.asp" style="margin: 0px; padding: 0px;">
      <table cellspacing="0" cellpadding="0" border="0" >
      <tr>
      <td align="center"><input type="text" size="80" name="keyword" id="searchlight" class="txtBoxStyle" onFocus="javascript:if (document.searchForm.keyword.value=='search by keyword') {document.searchForm.keyword.value='';};" onblur="if(this.value.length == 0) this.value = 'search by keyword'" value="search record database by keyword" /></td>
      <td><input type="image" src="assets/templates/[template]/images/search.png" name="search" value="Search" hspace="5" /></td>
      </tr>
      </table>
      </form>
      <!--END: FRAME_SEARCH--></td>

      Also where on the page do I put the other code you provided?

      Comment


      • #4
        Change this:

        Code:
        <input type="text" size="80" name="keyword" id="searchlight" class="txtBoxStyle" onFocus="javascript:if (document.searchForm.keyword.value=='search by keyword') {document.searchForm.keyword.value='';};" onblur="if(this.value.length == 0) this.value = 'search by keyword'" value="search record database by keyword" />
        to this:

        Code:
        <input type="text" size="80" name="keyword" id="searchlight" class="txtBoxStyle" value="search record database by keyword" onfocus="if(this.value == 'search record database by keyword') { this.value = ''; }">

        That should be the ONLY change you have to make. Sorry jleclair but I think you overcomplicated your solution

        Comment


        • #5
          Cbsteven my solution may be more complicated but it provides a different experience than yours. Once the user clicks on the search bar with your solution it remains empty until refresh or entry. Mine will show the placeholder text again if focus is lost and the user decides not to enter a value. Its just a different approach. Your code covers the minimum of what she was asking for without going any further, mine covers all the bases.

          however, somewhere in that happy medium we find ourselves. the answer is pretty simple. your value doesn't match what your focus/blur are checking for.

          the if statements are checking to see if the text matches 'search by keyword' but your default text says 'search record database by keyword' so of course they dont match and nothing happens.

          change everything to match, whatever the phrasing, and it should behave the way you wish.

          Comment


          • #6
            My 2 pennies

            HTML Code:
            <input type="text"  name="keyword" id="searchlight" class="txtBoxStyle" onfocus="javascript:if (document.searchForm.keyword.value=='search record database by keyword') {document.searchForm.keyword.value='';};"  onblur="if(this.value.length == 0) this.value = 'search record database by keyword'" value="search record database by keyword" />
            I left out the size property because I use css to size the boxes and fields, but you can put it back in there if you like.

            Fully tested and peachy. After you change it, clear your cache and run a search on the front end (even if you have to highlight and replace it the first time)... After that it should all show and all work.
            TheCartDesigner.com
            Not 3dcart Owned or Operated
            100% Independent 3dcart Expert


            Follow Us on Twitter

            Comment


            • #7
              Custom search box now working

              Thank you all for your help. The code:

              <input type="text" size="80" name="keyword" id="searchlight" class="txtBoxStyle" value="search record database by keyword" onfocus="if(this.value == 'search record database by keyword') { this.value = ''; }">

              The code works now. Upon clicking the box it clears the data and completes the search. After completion it puts back the original text to search by keyword so the customer will know that box is for.
              Last edited by thursdaysrecords; 06-01-2013, 11:18 AM. Reason: spelling

              Comment

              Working...
              X