Trying to get the "location" to be required if the "name" field is not null. I don't completely understand java or jQuery so the examples I've been looking at don't make sense. Sorry for being a noob but I've been googling for and just not seeing the solution.
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" name="name" required>
<label for="location">Choose a location:</label>
<select name="location" id="location">
<option value="ON">Ontario</option>
<option value="BC">B.C.</option>
<option value="AB">Alberta</option>
<option value="MI">Michigan</option>
</select>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
try using the following. It makes it so whenever the "name" input is updated it will check to see if it has a value. If it does, it will update the "location" input to require.
function updateRequirements() {
var name = document.getElementById('name').value;
if (name != null) {
document.getElementById('location').required = true;
} else {
document.getElementById('location').required = false;
}
} <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Name: <input type="text" id="name" name="name" onchange="updateRequirements();">
<label for="location">Choose a location:</label>
<select name="location" id="location">
<option value="ON">Ontario</option>
<option value="BC">B.C.</option>`
<option value="AB">Alberta</option>
<option value="MI">Michigan</option>
</select>
<br><br>
<input type="submit" name="submit" value="Submit">
</form>See if this helps for what you're trying to do.
You can add the disbaled attribute using Javascript to the HTML for each entry you wish to be required. Then check the validation of each required entry with an event listener.
You want the name to be required, so disable both the select and submit buttons. Check the name input field using a blur event, which means the element has lost focus. Once the event fires if the name.value is empty, then disable the next field, which is your select. Once the name is properly filled out, we set the disabled attribute property to false and then we check the selects element using a change event. When it has changed, provided it is not set to the default setting which has a value of nothing "" then we set the submit buttons disabled attribute from true to false.
Note: I have added Ids to each of your form fields to query each element using that ID.
// query each relavent selector and assign a variable
let loc = document.querySelector('#location');
let submit = document.querySelector('#submit');
let name = document.querySelector('#name');
// disable the next required fields so the user can not move on until
// they fill out the prior field properly
submit.disabled = true;
loc.disabled = true;
// blur event handler to check the focus out fo the input field
// for example when the user clicks out or hits tab
name.addEventListener('blur', e => {
// ternary conditional statement to check the value of the name field
name.value !== '' ? loc.disabled = false : submit.disabled = true
})
// change event handler to check the selects value on change
loc.addEventListener('change', e => {
// if conditional statement to check the value of the location select
// makes sure the value is not set to "" which is the default value for
// "Select A Location" also double check our name in case user removes after
// selecting a location
loc.value !== '' && name.value !== '' ?
submit.disabled = false :
submit.disabled = true
})<form method="post" action="<?php echo htmlspecialchars($_SERVER[" PHP_SELF "]);?>">
Name: <input type="text" id="name" name="name" required>
<label for="location">Choose a location:</label>
<select name="location" id="location">
<option value="">Select a Location</option>
<option value="ON">Ontario</option>
<option value="BC">B.C.</option>
<option value="AB">Alberta</option>
<option value="MI">Michigan</option>
</select>
<br><span id="error"></span><br>
<input id="submit" class="unselectable" type="submit" name="submit" value="Submit">
</form>You have two fields in your form. The name field is required. the location not. means that you cant send the form if location is "null". And if the location has a value then you can set a required parameter to name selection to avoid that the form is sending without this two fields.
<select name="location" id="location" required>