JQuery получить все значения с меткой и объединить с разделителем в виде одной строки

<!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>

Вывод, который я получаю: для 1-го предупреждения:

Postal Code
City

и 2-е значение предупреждения пусто.

Мой ожидаемый результат:

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

Я пытался найти что-то, что может получить как метку, так и значение поля формы, но не смог найти. Если я использую .html(); Я получаю сценарий.

Как я могу получить значение с его метками, если поле установлено или выбрано, в полях формы в jquery и объединить с разделителями?

Источник

2 ответа

Решение

Примерно так получилось бы получить метки и значения

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

Но если вы собираетесь просто отправить его на сервер, $('form').serialize() кажется намного проще

Обратите внимание, что форма будет отправлена ​​и страница перезагрузится, когда вы нажмете кнопку, если только вы не предотвратите поведение по умолчанию, и что в большинстве случаев прослушивание события отправки форм лучше, чем событие нажатия кнопок отправки.

Источник

Изменить свой 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);
    });
});

и добавьте название к своим ярлыкам вот так

    <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>
Источник
Другие вопросы по тегам