有人可以帮我在Jquery中写这个/其他吗[关闭]

Question

   <!-- Search input -->
   <form method="post" action="query.php" id="searchform" name="search" class="search">
    <input id="inpBusiness" type="text" placeholder="Find a Business by Name" name="Business"/>
    <input id="inpLocation" type="text" placeholder="Or by a Massachusetts City/Town" name="City"/>
    <input id="btnSearch" type="submit" value="Search VetsDirectory" name="btnSearch"/><br/>
   </form>
   <hr />

   </td>
  </tr>
  <tr>
   <td>
    <!-- This is where the featured listings and search Query will load -->
    <h3 align="left">FEATURED BUSINESS LISTINGS:</h3>
    <div id="inputhere">
    <?PHP
    include 'php.php';
    ?>
    </div>

This is my form, upon submit, I need to check if a user used the inpBusiness or inpLocation to search. If they used location to search, I need the action to be query.php, if they used business to search I need action to be query2.php, if both or neither are used populate an error to basically say "pick one"

After this check. I need query.php or query2.php to populate where php.php is included inside the #inputhere div, I need it to clear php.php from that div, then append either query or query 2 based upon input.

UPDATE:

<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
$(document).ready(function () {
    var $article = null;
    $('#searchform').submit(function () {
        if ($article == null) {
            $("#inputhere").load("query.php").appendTo('.inputhere');
        }
    });
});
</script>

Without changing anything in my form, I am attempting to now just load the form into the div, but it is still redirecting me immediately to a new page displaying query.php, which I can see it loading it into the div right before the redirect. Any ideas?

Last one:

<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
$(document).ready(function () {
    var $article = null;
    $('#searchform').submit(function (e) {
        e.preventDefault();
        if ($article == null) {
            $("#inputhere")).html('Loading...').load('query.php');
        }
    });
});
</script>

Its still loading the query on a separate page. As can be seen on my server @ www.masswarveterans.com

Answer 1

Something like this is what you want:

$('#searchform').submit(e) {
    e.preventDefault();
    var business = $('#inpBusiness').val().trim();
    var location = $('#inpLocation').val().trim();

    if(
        (business == '' && location == '') // both empty
        ||
        (business != '' && location != '') // both not empty
    ) {
        alert('Pick one');
        return false;
    }

    var searchTerm = 'business';
    var action = 'query2.php';
    // The above definitions correspond to the implicit opposite of the statement
    // below. Overriding where necessary.
    if(location != '' && business == '') {
        action = 'query.php';
        searchTerm = location;
    }

    // Perform AJAX request to populate your div
    $('#inputhere').html('Loading...').load(action, {
        searchTerm: searchTerm,
    }, function(ret) {
        // If you need a callback on complete, use this.
    });
});

Then your PHP code, use $_POST['searchTerm'] to help you decide what to display.

---

Looking forward...

Once you've worked out how to do this, you should start again and design it better. It'd be a whole lot better for your application if you only had one search script, and one place to input a search term. As mentioned in the comments, use a radio choice or a dropdown box to define which search type it should be.

If you do that, later on when you decide to add ten more types of searches you'll be able to do it easily without having to add conditions for every new type to your jQuery.

You'll just end up performing an AJAX request like this (for example):

$('#searchform').submit(e) {
    e.preventDefault();
    if($('#search_term').val().trim() == '') {
        alert('Enter something man...');
        return false;
    }
    $('#inputhere').html('Loading...').load('search_file.php', {
        search_term: $('#search_term').val().trim(),
        search_type: $('#search_type :selected').val();
    });
});