Search code examples
javascriptjqueryradio-buttonchecked

jQuery get TEXT not value of checked radio option not working


I have a JavaScript/ jQuery exercise where you selected a radio option which holds a real estate company. Once selected the listed properties return in a table. This part of the code is working fine. However, I want to state the name of the company the user selected in the header, which means I need the text of the radio option. With the code I have now it's returning the name of all the companies not just the one the user selected. I don't know why because the .text() code I used is from online sources. Can someone please help me without changing any of my other code.

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

Solution

  • Your html is invalid, you don't have closing label tags in html. Update your 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>
    

    To get selected radio button text use

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