how to send html form values without submit button?

Question

I have a form whose values i need to send to my servlet page(where to values will be procedded and added in DB). I dont have a submit button and action attribute in the form.(i dont want to redirect the page..)

<form id="msform"  method="post">
                            <label class="fieldlabels">Customer Id: *</label> <input type="text" name="cid" placeholder="Customer Id" />
                            <label class="fieldlabels">Customer Name: *</label> <input type="text" name="cname" placeholder="Customer Name" />
                            <label class="fieldlabels">Customer Email: *</label> <input type="email" name="email" placeholder="Customer Email" />
                            <label class="fieldlabels">Customer Number: *</label> <input type="text" name="cnumber" placeholder="Customer Number" />
                            <label class="fieldlabels">Customer Pet: *</label> <input type="text" name="cpet" placeholder="Customer Pet" />
                        </div> <input type="button" name="next" class="next action-button" value="Next" />
                    </fieldset>
                    <fieldset>
                        <div class="form-card">
                            <div class="row">
                                <div class="col-7">
                                    <h2 class="fs-title">Pet Information:</h2>
                                </div>
                                <div class="col-5">
                                    <h2 class="steps">Step 2 - 5</h2>
                                </div>
                            </div> <label class="fieldlabels">Pet Id: *</label> <input type="text" name="pid"
                                placeholder="Pet Id" />
                            <label class="fieldlabels">Pet Name: *</label> <input type="text" name="pname" placeholder="Pet Name" />
                            <label class="fieldlabels">Pet Type: *</label> <input type="text" name="pname" placeholder="Pet Type" />
                            <label class="fieldlabels">Pet Age: *</label> <input type="text" name="Pet name" placeholder="Pet Age" />
                            <label class="fieldlabels">Pet Allergy: *</label> <input type="text" name="palergy" placeholder="Pet Allergy." />
                        </div> 
                        <input type="button" name=" class="next action-button" value="Next"/> 
                        <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
                    </fieldset>
                </form>

So you need to submit when the user press next? Or as they type? — Gabriel, Oct 12 '21 at 13:30
You probably want to look up about AJAX form submits, eG: [jQuery AJAX submit form](https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form). Also note that JavaScript and Java are different programming languages. I don't think this question has anything to do with java — OH GOD SPIDERS, Oct 12 '21 at 13:30
i would like to submit the form after clicking the last next button. @Klistoffer suggested in his code, i used it on the last button but the data is not getting added in DB. im using request.getParameter to read the form values in my servlet page where the form is being sent. — Darshan Bachhav, Oct 12 '21 at 15:05

score 2 · Accepted Answer · answered Oct 12 '21 at 13:36

Submitting the form through Javascript is probably going to be your best approach here.

The following code will do exactly that:

let form = document.querySelector('#msform');
let formData = new FormData(form);
let response = await fetch('<Your servlet page url here>', {
    method: 'POST',
    body: formData
  });

You would then attach this to a button somewhere on the site, and it'll have the same effect as posting the form, while preventing a redirect of the page.

You could also combine this with a form-reset call to empty the form in preparation for new input.

hello sir, i used a onclick event on next button of pet info form , where a fucntion is called and your above code will run, to read the form values on my servlet page ive used request.getParameter() but no data is being added in the DB ` — Darshan Bachhav, Oct 12 '21 at 15:22

how to send html form values without submit button?

1 Answers1