JSFiddle - React, Tailwind, and code Playground

by djquery

HTML

<form action="" method="get" id="budgetform">
                    <label for="family_type">Family Type:</label><br/>
                    <select name="family_type" id="family_type">
                        <option value="1P1C">One Parent, One Child</option>
                        <option value="1P2C">One Parent, Two Children</option>
                    </select>
<br>
                            <label for="state">State:</label><br/>
                            <select name="state" id="state">
                                <option>AK</option>
                                <option>AL</option>
                                <option>AR</option>
                                <option>AZ</option>
                            </select>
<br>
                            <label for="area_name">Area Name:</label><br/>
                            <select name="area_name" id="area_name">
                                <option class="AK">Area 1</option>
                                <option class="AK">Area 2</option>
                        </select>
                        <button type="submit" id="budgetbutton">Calculate budget</button>
                    </form>
                    
                    <hr />
<div id="result">Your result will load here.</div>

CSS

/* This is the php I want the form to send data to:

$family_type = $_GET['family_type'];
$state = $_GET['state'];
$area_name = $_GET['area_name'];

//do some functions and then

echo $family_type;
echo $area_name;
echo $state;

*/

JavaScript

$(document).ready(function() {       

        $('#budgetbutton').click(function(e){
            $('#budgetform').hide(500);
            $('#result2').load('budget.php',{
                    area_name : $('#area_name').val(),
                    state : $('#state').val(),
                    family_type : $('#family_type').val()
            }, function(){ i fire on complete});
            
            });

            e.preventDefault();

        });
        
    });