B4J Question [WebApp] How to handle Button Type="Submit"

[Chris Guanzon]

Good day, everyone!

I have a form validation with submit button. After adding an Id in the button, the tooltip for fields that don't have value is not popping out but if removed the Id, it works fine. And I also want not to trigger the button_click unless all fields are filled out. How can I handle the button with submit type?

<form class="row g-3">
    <div class="row">
        <div class="col-lg-6">
            <div class="mb-3">
                <label for="firstnameInput" class="form-label">First
                    Name</label>
                <input type="text" class="form-control" id="firstnameInput" placeholder="Enter your firstname" required>
            </div>
            <div class="mb-3">
                <button id="btntest" type="submit">Test Button</button>
            </div>   
        </div>
    </div>
</form>

 

[drgottjr]

your form is missing an "action".
try this as an example:

<form class="row g-3" action="https://www.b4x.com">
    <div class="row">
        <div class="col-lg-6">
            <div class="mb-3">
                <label for="firstnameInput" class="form-label">First
                    Name</label>
                <input type="text" class="form-control" id="firstnameInput" placeholder="Enter your firstname" required>
            </div>
            <div class="mb-3">
                <button id="btntest" type="submit">Test Button</button>
            </div>  
        </div>
    </div>
</form>

note: this is one of many ways to handle the submit button. i simply went with what you had coded. i added an "action" and loaded the code into a browser. the results were as expected: 1) refusal to submit if first name was blank and 2) load b4x.com if the first name was populated.

 

[Chris Guanzon]

your form is missing an "action".
try this as an example:

<form class="row g-3" action="https://www.b4x.com">
    <div class="row">
        <div class="col-lg-6">
            <div class="mb-3">
                <label for="firstnameInput" class="form-label">First
                    Name</label>
                <input type="text" class="form-control" id="firstnameInput" placeholder="Enter your firstname" required>
            </div>
            <div class="mb-3">
                <button id="btntest" type="submit">Test Button</button>
            </div> 
        </div>
    </div>
</form>

note: this is one of many ways to handle the submit button. i simply went with what you had coded. i added an "action" and loaded the code into a browser. the results were as expected: 1) refusal to submit if first name was blank and 2) load b4x.com if the first name was populated.

hello, @drgottjr

What code do I need to add in B4J? Is it click also?

 

[drgottjr]

look at the source for the "fileupload" example here: web apps
that's where erel keeps his web app examples. the fileupload example shows a form with a submit button and an "action". that's what a form wants. but, as i said, there are many other ways to handle this. you chose a form, so that's what i'm going with. i'm assuming you are comfortable coding javascript. it's quite separate from b4j