this my sound like a duplicate question asked 9 years ago but.. i need to set/assign a value to my check box. Simple stuff gender :
<div>
<label for="gender"><b>Gender:</b></label>
<input type="radio" name="gender" id="male" value="Male" required> Male
<input type="radio" name="gender" id="female" value="Female"> Female
</div>
<!-- #3 -->
<div>
<label for="category"><b>Category</b></label>
<input type="text" name="category" id="category" required>
</div>
I manage to get data out (thanks guys), so its stored on localstorage; the json file is =
data = [ 'Miss', 'Female', 'Oversea'
, '2001-06-10', 'sasha@gmail.com'
, '39393939']
name = "Sasha"
now i need to retrieve the file to the above input form, edit and save. I need help to assign the value from the Json file to the html input. I dont have a problem with the other fields; only the checkbox. I resorted doing a if else statement;
function onEdit(td)
{
//obtain row index
selectedRow = td.parentElement.parentElement;
// Obtain name value (key)
var name = selectedRow.cells[1].innerHTML;
// goto local storage and get the data
let data = JSON.parse(localStorage.getItem(name));
document.getElementById("salutation").value = data[0];
document.getElementById("name").value = name;
// // why why does this does not work
//document.getElementById("gender").value = data[1];
// document.querySelector('input[name="gender"]:checked').value = test;
var test = data[1];
if ((test) == "Male" )
{
document.getElementById('male').value = True;
document.getElementById('female').value = False;
}
else
{
document.getElementById('male').value = False;
document.getElementById('female').value = True;
};
document.getElementById("category").value = data[2];
document.getElementById("leaddob").value = data[3];
document.getElementById("leademail").value = data[4];
document.getElementById("leadtel").value = data[5];
}
but the check boxes do check but when i save the data it becomes blank.
Help!
don't use checked !
const
myForm = document.querySelector('#my-form')
, data = { gender : 'Male' }
;
// init
myForm.gender.value = data.gender // set Male checked, set Female unchecked
// get value
myForm.onsubmit = e =>
{
e.preventDefault() // disable submit for testing
console.clear()
console.log( 'myForm.gender =', myForm.gender.value )
}<form id="my-form">
<fieldset>
<legend>Gender</legend>
<label> <input type="radio" name="gender" value="Male" > Male </label> <!--label tag is around the imput -->
<label> <input type="radio" name="gender" value="Female"> Female</label> <!-- any click on text part set box cheked -->
</fieldset>
<button type="submit"> submit </button>
</form>
Input element have their own mecanism within Form