If "X" Checked "Y" has to be Completed

ghozey · January 29, 2020, 10:22pm

Not sure I even know how to ask this, so please bear with me. There is a group of radio buttons on the form to check for specific dollar amounts. The group also includes a button for “Other Amount.” Then there is a field for the Other Amount to be entered. The problem is how to make the Other Amount Field mandatory if Other Amount radio button is checked.

Here is the html

    	<div class="">
		<h4><strong>Donation Amount</strong></h4>
			<label class="radio-inline">
				<input class="radio" type="radio" name="amount" value="$20"> <span>$20</span>
			</label>
				&nbsp;
				<label class="radio-inline">
				<input class="radio" type="radio" name="amount" value="$25"> <span>$25</span>
			</label>
				&nbsp;
				<label class="radio-inline">
				<input class="radio" type="radio" name="amount" value="$50"> <span>$50</span>
			</label>
				&nbsp;
				<label class="radio-inline">
				<input class="radio" type="radio" name="amount" value="$75"> <span>$75</span>
			</label>
				&nbsp;
			<label class="radio-inline">
				<input class="radio" type="radio" name="amount" value="$100"> <span>$100</span>
			</label>
				&nbsp;&nbsp;
			<label class="radio-inline">
				<input class="radio" type="radio" name="amount" value="other"> <span>Other</span>
			</label>
				&nbsp;&nbsp;
		</div>
		<div class="form-inline mt-2">
			<label>
		<h4><strong>$&nbsp;</strong></h4>
		<input type="text" class="form-control" id="inputNumber" name="number" placeholder="Other Amount">
			</label>
		</div>

Here is the PHP Code that needs to be corrected or added to.

    /*** Amount of Donation ***/
$amount = $_POST['amount'];
if (!isset($amount)) {
    show_error("Please select a Donation Amount");
}

/*** Amount of Other Donation ***/
$number = check_input($_POST['number']);
setlocale(LC_MONETARY, 'en_US.UTF-8');
money_format('%.2n', $number);

I would really appreciate your help.

tbeckett1211 · January 29, 2020, 11:11pm

$amount = $_POST[‘amount’];
if (!isset($amount)) {
show_error(“Please select a Donation Amount”);
}

I would change that to :

if amount is not set OR ( [other amount] is selected and [manual money input] is blank )
then show error

This is not real code by the way.

Does that make sense? I cant write the code because I don’t know your html values. That should work though.

ghozey · January 30, 2020, 12:18am

Thanks. Being a newbie I don’t follow what you are saying. What about my html values do you need to write the code? Thank you.

astonecipher · January 30, 2020, 12:33am

something like this I would imagine

<script>
var other = document.getElementByName('amount')[0];
var req = document.getElementById("inputNumber"); 
if(other.value == "other"){
    req.setAttribute("required", "required");
} else {
    req.removeAttribute("required");
}
</script>

ghozey · January 30, 2020, 2:25pm

Thanks. Trying to figure out how to incorporate your suggestion into the existing script.

    <script>
    $(function () {
        $('.form').on('submit', function (e) {
            e.preventDefault();
document.getElementById("frmSubmit").innerHTML='PROCESSING';
	document.getElementById("frmSubmit").disabled = true;
            var formData = new FormData($(this)[0]);
            $.ajax({
                url: "donation-form-mailer.php",
                type: "POST",
                data: formData,
                contentType: false,
                cache: false,
                processData: false,
                success: function (response) {
                    if (response == 'success') {
                        window.location.replace('form-thankyou.html');
                    } else {
                        $('#formModal').modal('show');
                        $('.modal-body').html(response);
document.getElementById("frmSubmit").disabled = false;
	document.getElementById("frmSubmit").innerHTML='SUBMIT';
                    }
                }
            })

        })
    })
</script>