Javascript Function problem

[selenin]

Hello, it's me again still trying to modify this script with a new problem, this is my javascript code:

 

//begin ajax grabber

 

function validateGrabber(b_on_submit){

 

    if(document.grabber.keywords.value == '' || document.grabber.keywords.value == 'search'){

 

        alert('You did not enter a search term. Please try again.');

 

        if(b_on_submit == 'true')

 

            return false;

 

    }

 

    else{

 

        document.grabber.btn.submit();

 

    }

 

}

 

function grabber(inputGrabber) {

 

if(inputGrabber.length == 0) {

 

// Hide the suggestion box.

 

$('#suggestions').hide();

 

} else if(inputGrabber.length > 2) {

 

$.post(MELODYURL2+'/ajax_grabber.php', {queryString: ""+inputGrabber+""}, function(data){

 

if(data.length >0) {

 

$('#suggestions').show();

 

$('#autoSuggestionsList').html(data);

 

}

 

});

 

}

 

} // end ajax grabber

 

and this is my template code:

 

				<form action="{$smarty.const._URL}/search.php" method="get" id="search" name="grabber" onsubmit="return validateGrabber('true');">
			<input name="keywords" type="text" value="" class="search_keywords" id="inputGrabber" {if $smarty.const._SEARCHSUGGEST == 1}onkeyup="grabber(this.value);" onblur="fill();" autocomplete="off"{/if}  />  
			<input name="btn" value="{$lang.submit_search}" type="submit" class="search_bttn" />
			<div class="suggestionsBox" id="suggestions" style="display: none;">
				<div class="suggestionList" id="autoSuggestionsList">
				</div>
			</div>
			</form>	

 

The first function doesn't work properly with this if, doesn't show alert and second doesn't work at all...

[selenin]

Nobody  :-\ I am really bad in javascript

[selenin]

The first function works now fine, but I have problems with the second

 

function grabber(inputGrabber) {

   if(inputGrabber.length == 0) {

      // Hide the suggestion box.

      $('#suggestions').hide();

   } else if(inputGrabber.length > 2) {

      $.post(MELODYURL2+'/ajax_grabber.php', {queryString: ""+inputGrabber+""}, function(data){

         if(data.length >0) {

            $('#suggestions').show();

            $('#autoSuggestionsList').html(data);

         }

      });

   }

}

 

it doesn't recognize #suggestions and #autoSuggestionsList

[Psycho]

EDIT: You already posted that you fixed the first issue, but I'm posting this anyway since it addresses some other issues in the code:

 

Show the rendered HTML - not the server-side template code.

 

However, your function seems a little illogical.

 

1. I don't see a need to pass 'true' to the function.

2. On the last line you are submitting the button? You submit the "form" not the button. but, in this case you don't need to do a submit in the javascript. The script should just return true/or false and the onsubmit trigger will behave accorddngly.

 

Change submit trigger to

onsubmit="return validateGrabber(this);"

 

Change function to this

function validateGrabber(formObj)
{
    //Trim leading/trailing spaces
    var keyword = formObj.elements['keywords'].value.replace(/^\s+|\s+$/g,'');
    if(keyword == '' || keyword == 'search')
    {
        alert('You did not enter a search term. Please try again.');
        return false;
    }
    return true;
}

[selenin]

Thanks mjdamato looks better yours, but the second function is still not working and I have no clue

[Psycho]

Thanks mjdamato looks better yours, but the second function is still not working and I have no clue

I don't use JQuery, so I can't help you on that one.