JQuery получить текст не значение проверенного радио опция не работает - PullRequest
Новая
       39

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

0 голосов
/ 19 сентября 2018

У меня есть упражнение JavaScript / jQuery, в котором вы выбрали радио-опцию, в которой участвует риэлторская компания.После выбора перечисленные свойства возвращаются в таблицу.Эта часть кода работает нормально.Тем не менее, я хочу указать название компании, которую пользователь выбрал в заголовке, что означает, что мне нужен текст опции радио.С кодом, который у меня есть, он возвращает название всех компаний, а не только той, которую выбрал пользователь.Я не знаю почему, потому что код .text (), который я использовал, взят из сетевых источников.Может кто-нибудь, пожалуйста, помогите мне без изменения любого другого моего кода.

 <script>
    var realEstateFirms = {
    clark: {
    PropertyOne: "123 Pine Road Chester, PA 19013", 
    PropertyTwo: "407 Sunnyside Lane Philaelphia, PA 19013",
    PropertyThree: "400 Rothwell Terrace Chester, PA 19013",
    PropertyFour: "724 Tilghman Street Chester, PA 19013"
    },

    pinkChic: {
    PropertyOne: "201 Crestview Road Camden, NJ 08030",
    PropertyTwo: "1774 Layes Street Camden, NJ 08030",
    PropertyThree: "841 Crystal Lane Cherry Hill, NJ 08003",
    PropertyFour: "537 Foxhill Street Camden, NJ 08105"
    },

    jay: {
    PropertyOne: "2478 Brown Street Baltimore, MD 21210",
    PropertyTwo: "905 Price Boulevard Mitchellville, MD 20720",
    PropertyThree: "817 Cherry Lane Mitchellville, MD 20720",
    PropertyFour: "427 Central Avenue Baltimore, MD 21224"
    },

    ocean: {
    PropertyOne: "1402 Peachtree Road Atlanta, GA 30308",
    PropertyTwo: "267 Rigel Road Atlanta, GA 30332",
    PropertyThree: "311 Appletree Hill Road Atlanta, GA 30305",
    PropertyFour: "4822 Cascade Street Atlanta, GA 30331"
    },

    blackwell: {
    PropertyOne: "1601 Indiana Avenue Chicago, IL 60614",
    PropertyTwo: "775 Washington Boulevard Chicago, IL 60612",
    PropertyThree: "431 Dearborn Street Chicago, IL 60405",
    PropertyFour: "8822 Keeler Avenue Chicago, IL 60620"
    },
    }; // line closes array object realEstateFirms

    function selectRealEstate() {
    var selectedRadioOption = $("input[type='radio']:checked").val();
    console.log(selectedRadioOption);
    var firmSelectedName = $('label[for="realEstate-' + 
    selectedRadioOption + '"]').text();
    console.log(firmSelectedName);
    event.preventDefault();
    displayRealEstateInfo(realEstateFirms[selectedRadioOption], 
    firmSelectedName);
    console.log(realEstateFirms[selectedRadioOption]);
    }

    function displayRealEstateInfo(realEstateInfoList, firmTitle) {
    var tbl = "";
    tbl += '<table class="table table-hover">';
    tbl += '<tbody>';
    tbl += '<th>Real Estate Company:' + firmTitle + '</th>';
    tbl += '<tr>';
    tbl += '<th>Properties Listed</th>';
    tbl += '</tr>';
    tbl += '<tr>';
    tbl += '<td><div class="row_data" edit_type="click" 
    col_name="fname">' + realEstateInfoList["PropertyOne"] + '</div> 
    </td>'; 
    tbl += '</tr>';
    tbl += '<tr>';
    tbl += '<td><div class="row_data" edit_type="click" 
    col_name="fname">' + realEstateInfoList["PropertyTwo"] + '</div> 
    </td>';
    tbl += '</tr>';
    tbl += '<tr>';
    tbl += '<td><div class="row_data" edit_type="click" 
    col_name="fname">' + realEstateInfoList["PropertyThree"] + 
    '</div></td>';
    tbl += '</tr>';
    tbl += '<tr>';
    tbl += '<td><div class="row_data" edit_type="click" 
    col_name="fname">' + realEstateInfoList["PropertyFour"] + '</div> 
    </td>';
    tbl += '</tr>';
    tbl += '</tr>';
    tbl += '</tbody>';
    tbl += '</table>';
    $(document).find("#resultsTable").html(tbl);
    }
</script>

<p class="reList">Select One:</p>

<form action="javascript-exercise-13.html" method="post">
    <label for="realEstate-clark">
    <input type="radio" name="realEstateName" value="clark"> Clark Real Estate</label>
    <br/>
    <label for="realEstate-pinkChic">
    <input type="radio" name="realEstateName" value="pinkChic"> Pink Chic Realty<label> 
    <br/>
    <label for="realEstate-jay">
    <input type="radio" name="realEstateName" value="jay"> Jay and Sons Realty<label>
    <br/>
    <label for="realEstate-ocean">
    <input type="radio" name="realEstateName" value="ocean"> Ocean Real Estate Firm<label> 
    <br/>
    <label for="realEstate-blackwell">
    <input type="radio" name="realEstateName" value="blackwell"> Blackwell Realty<label> 
    <br/>
    <br/>
    <button class="realEstate" onclick="selectRealEstate()">Submit</button>
</form>
<div id="resultsTable"></div>

1 Ответ

0 голосов
/ 19 сентября 2018

Ваш html недействителен, у вас нет закрывающих тегов меток в html.Обновите html 

<p class="reList">Select One:</p>
<form action="javascript-exercise-13.html" method="post">
    <label for="realEstate-clark">
        <input type="radio"
               name="realEstateName" value="clark"> Clark Real Estate
    </label><br>
    <label for="realEstate-pinkChic">
        <input type="radio"
               name="realEstateName" value="pinkChic"> Pink Chic Realty<label>
            <br>
            <label for="realEstate-jay">
                <input type="radio"
                       name="realEstateName" value="jay"> Jay and Sons Realty
            </label>
            <br>
            <label for="realEstate-ocean">
                <input type="radio"
                       name="realEstateName" value="ocean"> Ocean Real Estate Firm
            </label>
            <br>
            <label for="realEstate-blackwell">
                <input type="radio"
                       name="realEstateName" value="blackwell"> Blackwell Realty
            </label>
            <br>
            <br />
            <button class="realEstate"
                    onclick="selectRealEstate()">
                Submit
            </button>
</form>
<div id="resultsTable"></div>

. Чтобы получить выбранный текст переключателя, используйте 

   var selText=$("input[type='radio']:checked").closest("label").text().trim();
.
...