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>
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();