CODEWITHSUNDEEP
htmltwitter-bootstrap
tylerhill90
tylerhill90

Reputation: 3

Bootstrap form not submitting as POST

I have a Boostrap styled form of sliders for various ranges that isn't submitting as a POST on submit. Below is the HTML:

    <form id="infect-sim">
        <div class="input-group mb-3">
            <div class="row">
                <div class="col">
                    <div class="form-group">
                        <label for="population">Population Size</label>
                        <input type="range" class="custom-range" min="100" max="1000" value="1000" step="1"
                            name="population" id="population" oninput="this.nextElementSibling.value = this.value">
                        <output>1000</output>
                    </div>
                    <div class="form-group">
                        <label for="infected">Initially Infected</label>
                        <input type="range" class="custom-range" min="0" max="99" value=3 step="1" name="infected"
                            id="infected" oninput="this.nextElementSibling.value = this.value">
                        <output>3</output>
                    </div>
                    <div class="form-group">
                        <label for="interaction">Interaction Rate</label>
                        <input type="range" class="custom-range" min="0" max="10" value=3 step="1" name="interaction"
                            id="interaction" oninput="this.nextElementSibling.value = this.value">
                        <output>3</output>
                    </div>
                    <div class="form-group">
                        <label for="infection">Infection Rate</label>
                        <input type="range" class="custom-range" min="0" max="100" value=40 step="1" name="infection"
                            id="infection" oninput="this.nextElementSibling.value = this.value">
                        <output>40</output>
                    </div>
                    <div class="form-group">
                        <label for="mortality">Mortality Rate</label>
                        <input type="range" class="custom-range" min="0" max="100" value=4 step="1" name="mortality"
                            id="mortality" oninput="this.nextElementSibling.value = this.value">
                        <output>4</output>
                    </div>
                    <div class="form-group">
                        <label for="asymp">Asymptomatic Rate</label>
                        <input type="range" class="custom-range" min="0" max="100" value=25 step="1" name="asymp"
                            id="asymp" oninput="this.nextElementSibling.value = this.value">
                        <output>25</output>
                    </div>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">Run Simulation</button>
    </form>

When I click the "Run Simulation" button it only runs as GET.

Upvotes: 0

Views: 60

Answers (1)

Malith Fernando
Malith Fernando

Reputation: 66

You need to add Post method inside form, Check the Code below!

<form id="infect-sim" method="post">
    <div class="input-group mb-3">
        <div class="row">
            <div class="col">
                <div class="form-group">
                    <label for="population">Population Size</label>
                    <input type="range" class="custom-range" min="100" max="1000" value="1000" step="1"
                        name="population" id="population" oninput="this.nextElementSibling.value = this.value">
                    <output>1000</output>
                </div>
                <div class="form-group">
                    <label for="infected">Initially Infected</label>
                    <input type="range" class="custom-range" min="0" max="99" value=3 step="1" name="infected"
                        id="infected" oninput="this.nextElementSibling.value = this.value">
                    <output>3</output>
                </div>
                <div class="form-group">
                    <label for="interaction">Interaction Rate</label>
                    <input type="range" class="custom-range" min="0" max="10" value=3 step="1" name="interaction"
                        id="interaction" oninput="this.nextElementSibling.value = this.value">
                    <output>3</output>
                </div>
                <div class="form-group">
                    <label for="infection">Infection Rate</label>
                    <input type="range" class="custom-range" min="0" max="100" value=40 step="1" name="infection"
                        id="infection" oninput="this.nextElementSibling.value = this.value">
                    <output>40</output>
                </div>
                <div class="form-group">
                    <label for="mortality">Mortality Rate</label>
                    <input type="range" class="custom-range" min="0" max="100" value=4 step="1" name="mortality"
                        id="mortality" oninput="this.nextElementSibling.value = this.value">
                    <output>4</output>
                </div>
                <div class="form-group">
                    <label for="asymp">Asymptomatic Rate</label>
                    <input type="range" class="custom-range" min="0" max="100" value=25 step="1" name="asymp"
                        id="asymp" oninput="this.nextElementSibling.value = this.value">
                    <output>25</output>
                </div>
            </div>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Run Simulation</button>
</form>

Upvotes: 3

Related Questions