对一个表单输入多次使用一个jQuery函数

Question

I got a question in which I hope someone can help me

I have this script:

File test.php :

<script>
  $(document).ready(function() {
        var min_chars = 1;
        var characters_error = 'Write at least '+ min_chars +' character';
        var checking_html = 'Getting information...';

        $('#get_information').click(function(){
            if($('#idprice').val().length < min_chars){
                $('#results_gotten').html(characters_error);
            }else{          
                $('#results_gotten').html(checking_html);
                check_availability();
            }
        });
  });

function check_availability(){
        var idprice = $('#idprice').val();
        $.get("check_idprice.php?id="+$("#idprice").val(), function(data){
                $("#results_gotten").html(data);
                $("#results_gotten").show();
            });
}
</script>

<input name="idprice" type="text" id="idprice" />
<input type="button" id="get_information" value="Checar"><br>
<div id="results_gotten"></div>

And a second file check_idprice.php

if (isset($_GET['id'])) { $id = $_GET['id']; } else { die ('No information'); }
$result = mysql_query("SELECT * FROM `sm_prices` WHERE `productid` = '". $id ."'");
$noresults = mysql_num_rows($result);
if($noresults > 0){
    echo $noresults." found";
}else{
    echo "No results found";
}

And it works perfectly, you can see it in action here:

http://www.enteratenorte.org/starmexico/test.php (You can search of 15-1 to get a result)

or here: http://jsfiddle.net/EnterateNorte/hpT66/ (wont get you any result since it need a DB)

How ever, I would like to have multiple filds in the same test.php file, something like this:

<input name="idprice1" type="text" id="idprice1" />
<input type="button" id="get_information1" value="Check"><br>
<div id="results_gotten1"></div>

<input name="idprice2" type="text" id="idprice2" />
<input type="button" id="get_information2" value="Check"><br>
<div id="results_gotten2"></div>

<input name="idprice3" type="text" id="idprice3" />
<input type="button" id="get_information3" value="Check"><br>
<div id="results_gotten3"></div>

It could be 3 or more fields

How can this be achived using one single code?

Answer 1

You could wrap each block in a parent DIV:

<div class="retrieveInfo">
    <input name="idprice1" type="text" id="idprice1" class="retrieveInfoText" />
    <input type="button" id="get_information1" class="retrieveInfoSubmit" value="Check"><br>
    <div id="results_gotten1" class="retrieveInfoResults"></div>
</div>

Then your JS might look something like this:

<script>

$(document).ready(function() {
    var min_chars = 1
    , characters_error = 'Write at least '+ min_chars +' character'
    , checking_html = 'Getting information...'
    , infoContainer = $('.retrieveInfo'); // this selects all the containers with this css class

    /// now you can loop through each of the containers found...
    infoContainer.each(function(){
        var self = $(this) // $(this) refers to the current "container"
        , infoSubmit = self.find('.retrieveInfoSubmit') // find button
        , infoText = self.find('.retrieveInfoText') // find text box
        , infoResults = self.find('.retrieveInfoResults'); // find result div

        // since this is a loop, this click handler will be attached to all buttons found
        infoSubmit.click(function(e){
            // stop the browser from submitting the form (default action)
            e.preventDefault();                

            // check if the info validates
            if( infoText.val().length < min_chars){
                infoResults.html(characters_error);
                // returning here will stop execution of the function, no need for else
                return false;
            }

            infoResults.html(checking_html);
            // modified the funciton to accept some arguments
            check_availability(infoText.val(), infoResults);
        });
    });

});

/**
 * checkVal is the user input
 * resultDiv is the jQuery object that points to the results for this container
 */
function check_availability(checkVal, resultDiv){
    $.get("check_idprice.php?id=" + checkVal, function(data){
            resultDiv.html(data).show();
    });
}

</script>

Answer 2

Try something similar to the following

for(var i=0;i<3;i++) {
      $('#get_information'+i).click(function(){
        if($('#idprice'+i).val().length < min_chars){
            $('#results_gotten'+i).html(characters_error);
        }else{          
            $('#results_gotten'+i).html(checking_html);
            check_availability(i);
        }
    });
}

function check_availability(i){
    var idprice = $('#idprice'+i).val();
    $.get("check_idprice.php?id="+$("#idprice"+i).val(), function(data){
            $("#results_gotten"+i).html(data);
            $("#results_gotten"+i).show();
        });
 }