Question

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/json;charset=UTF-8">
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(document).ready(function(){

    jQuery('input[name="add_custom_search"]').click(function(){
        var searchquery_string  =  jQuery( ".searchdetails").text();
            var searchquery_val  =  jQuery( ".searchdetails").val();
        alert(searchquery_string);
            alert(searchquery_val);
    });

});
</script>

</head>
<body>
    <form action="" method="POST">
        <div class="searchdetails">
            <label for="Postal_Code">Postal Code</label>
            <input type="text" name="Postal_Code" value=""/>

            <label for="City">City</label>
            <input type="text" name="City" value=""/>       

            <input type="submit" name="add_custom_search">
        </div>
    </form>
</body>
</html>

The output that I am getting: for 1st alert:

Postal Code
City

and 2nd alert value empty.

My expected output:

Postal Code: 'value of Postal Code' City: 'value of City'

I tried to find out something which can get both the label and value of a form fileds but couldn't find one. If I use .html(); am getting the script.

How I can get the value with it's labels if the field is set or selected, in a form fields in jquery and concatenate with separators?

Was it helpful?

Solution 2

Something like this would get the labels and values

jQuery(document).ready(function($){
    $('input[name="add_custom_search"]').click(function(){
        var obj = {};
        $( ".searchdetails label").each(function(i, el) {
            obj[$(el).text()] = $(el).next().val();
        });
        $.ajax({
            url  : '/path/to/myurl.php',
            data : obj
        }).done(function(data) {
            console.log(data);
        }).fail(function(a,b,c) {
            console.log(a,b,c)
        });
    });
});

FIDDLE

But if you're going to just send it to the serverside, $('form').serialize() seems a lot easier.

Note that the form will submit and the page reload when you click the button unless you prevent the default behaviour, and that most times listening for the forms submit event is better than the submit buttons click event.

OTHER TIPS

change your jquery

 $(document).ready(function(){

    $('input[name^="add_custom_search"]').click(function(){
        $('[name="ElementNameHere"]').doStuff();
             var p1 = $('[name^="lblPostalCode"]').html();
             var p1det = $('[name^="Postal_Code"]').text();

             var c1 = $('[name^="lblCity"]').html();
             var c1det = $('[name^="City"]').text();

            alert(p1 + ':' + p1det);
            alert(c1 + ':' + c1det);
    });
});

and add name to your labels like this

    <div class="searchdetails">
        <label for="Postal_Code" name="lblPostalCode">Postal Code</label>
        <input type="text" name="Postal_Code" value=""/>

        <label for="City" name="lblCity">City</label>
        <input type="text" name="City" value=""/>       

        <input type="submit" name="add_custom_search">
    </div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top