Registration form does nothing

Hello Wapplers!

Just got here and going through the Community Web tutorial.

Stuck at where the registration form does nothing when the Register button is clicked. I’ve gone over it twice over checking the logic and form, and everything is setup by the tutorial for Wappler 5.0 Quickstart series. There is no indication from Network readings that there is a problem, other than the devTools failed to load source map warning, which I read somewhere else on these forums can be safely ignored.

I need help getting unstuck!

Hi,
Welcome to Wappler!

Can you please check that the submit is of type “Submit”?

Thanks for the quick response! Yes, it is.

Could it be something with my environment?

Please check:

Thanks, @Teodor. Tried that…still no error. Just a silent death

Please post your form code here.

{

“meta”: {
“options”: {
“linkedFile”: “/views/register.ejs”,
“linkedForm”: “register1”
},
“$_POST”: [
{
“type”: “text”,
“fieldName”: “first_name”,
“options”: {
“rules”: {
“core:required”: {
“param”: “”,
“message”: “First name is required.”
}
}
},
“name”: “first_name”
},
{
“type”: “text”,
“fieldName”: “last_name”,
“options”: {
“rules”: {
“core:required”: {
“param”: “”,
“message”: “Last name is required.”
}
}
},
“name”: “last_name”
},
{
“type”: “text”,
“fieldName”: “email”,
“options”: {
“rules”: {
“core:required”: {
“param”: “”,
“message”: “Email is required.”
},
“core:email”: {
“param”: “”
}
}
},
“name”: “email”
},
{
“type”: “text”,
“fieldName”: “password”,
“options”: {
“rules”: {
“core:required”: {
“param”: “”
},
“core:minlength”: {
“param”: “8”
},
“core:nowhitespace”: {
“param”: “”
}
}
},
“name”: “password”
}
]
},
“exec”: {
“steps”: [
{
“name”: “validate”,
“module”: “validator”,
“action”: “validate”,
“options”: {
“data”: [
{
“name”: “validateEmail”,
“value”: “{{$_POST.email}}”,
“rules”: {
“db:notexists”: {
“param”: {
“connection”: “db”,
“table”: “users”,
“column”: “email”
},
“message”: “Email already exists in the database.”
}
},
“fieldName”: “email”
}
]
}
},
{
“name”: “createUser”,
“module”: “dbupdater”,
“action”: “insert”,
“options”: {
“connection”: “db”,
“sql”: {
“type”: “insert”,
“values”: [
{
“table”: “users”,
“column”: “first_name”,
“type”: “text”,
“value”: “{{$_POST.first_name}}”
},
{
“table”: “users”,
“column”: “last_name”,
“type”: “text”,
“value”: “{{$_POST.last_name}}”
},
{
“table”: “users”,
“column”: “email”,
“type”: “text”,
“value”: “{{$_POST.email}}”
},
{
“table”: “users”,
“column”: “password”,
“type”: “text”,
“value”: “{{$_POST.password}}”
}
],
“table”: “users”,
“returning”: “user_id”,
“query”: “INSERT INTO users\n(first_name, last_name, email, password) VALUES (:P1 /* {{$_POST.first_name}} /, :P2 / {{$_POST.last_name}} /, :P3 / {{$_POST.email}} /, :P4 / {{$_POST.password}} /)",
“params”: [
{
“name”: “:P1”,
“type”: “expression”,
“value”: “{{$_POST.first_name}}”,
“test”: “”
},
{
“name”: “:P2”,
“type”: “expression”,
“value”: “{{$_POST.last_name}}”,
“test”: “”
},
{
“name”: “:P3”,
“type”: “expression”,
“value”: “{{$_POST.email}}”,
“test”: “”
},
{
“name”: “:P4”,
“type”: “expression”,
“value”: “{{$_POST.password}}”,
“test”: “”
}
]
}
},
“meta”: [
{
“name”: “identity”,
“type”: “text”
},
{
“name”: “affected”,
“type”: “number”
}
]
},
{
“name”: “assignRole”,
“module”: “dbupdater”,
“action”: “insert”,
“options”: {
“connection”: “db”,
“sql”: {
“type”: “insert”,
“values”: [
{
“table”: “role”,
“column”: “user_id”,
“type”: “text”,
“value”: “{{insert.identity}}”
},
{
“table”: “role”,
“column”: “role”,
“type”: “text”,
“value”: “M”
}
],
“table”: “role”,
“returning”: “role_id”,
“query”: "INSERT INTO role\n(user_id, role) VALUES (:P1 /
{{insert.identity}} */, ‘M’)”,
“params”: [
{
“name”: “:P1”,
“type”: “expression”,
“value”: “{{insert.identity}}”,
“test”: “”
}
]
}
},
“meta”: [
{
“name”: “identity”,
“type”: “text”
},
{
“name”: “affected”,
“type”: “number”
}
]
},
{
“name”: “saltcode”,
“module”: “core”,
“action”: “setvalue”,
“options”: {
“value”: “0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9”
},
“meta”: ,
“outputType”: “text”
},
{
“name”: “codearray”,
“module”: “core”,
“action”: “setvalue”,
“options”: {
“value”: “{{saltcode.split(’,’)}}”
},
“meta”: ,
“outputType”: “text”
},
{
“name”: “randomarray”,
“module”: “core”,
“action”: “setvalue”,
“options”: {
“key”: “g_randomarray”,
“value”: “{{codearray.randomize()}}”
},
“meta”: ,
“outputType”: “text”
},
{
“name”: “mycode”,
“module”: “core”,
“action”: “setvalue”,
“options”: {
“key”: “g_mycode”
},
“meta”: ,
“outputType”: “text”,
“output”: true
},
{
“name”: “repeat”,
“module”: “core”,
“action”: “repeat”,
“options”: {
“repeat”: 6,
“outputFields”: ,
“exec”: {
“steps”: {
“name”: “mycode”,
“module”: “core”,
“action”: “setvalue”,
“options”: {
“value”: “{{g_mycode+randomarray[$index]}}”,
“key”: “g_mycode”
},
“meta”: ,
“outputType”: “text”
}
}
},
“output”: true,
“meta”: [
{
“name”: “$index”,
“type”: “number”
},
{
“name”: “$number”,
“type”: “number”
},
{
“name”: “$name”,
“type”: “text”
},
{
“name”: “$value”,
“type”: “object”
}
],
“outputType”: “array”
}
]
}
}

I was asking about your form code, not the server action code. Make sure to format your code as explained here:

Oops…here it is :slight_smile:

<form id="register1" is="dmx-serverconnect-form" method="post" action="/api/registration/register" dmx-on:error="registrationNotifications.danger('Oops! An error occurred!')" dmx-on:unauthorized="registrationNotifications.warning('Unauthorized. Scram!')" dmx-on:success="register1.reset();browser1.goto('/',true,'Home Page')">
            <div class="row justify-content-center">
                <div class="col-12 col-md-8 col-lg-8 col-xl-6">
                    <div class="row">
                        <div class="col text-center">
                            <h1>Register</h1>
                            <p class="text-h3">Enter your registration details below.</p>
                        </div>
                    </div>
                    <div class="row align-items-center">
                        <div class="col mt-4">
                            <input type="text" id="inp_first_name" name="first_name" class="form-control" placeholder="First Name" required="" data-msg-required="First name is required.">
                        </div>
                    </div>
                    <div class="row align-items-center">
                        <div class="col mt-4">
                            <input type="text" id="inp_last_name" name="last_name" class="form-control" placeholder="Last Name" required="" data-msg-required="Last name is required.">
                        </div>
                    </div>
                    <div class="row align-items-center mt-4">
                        <div class="col">
                            <input type="email" id="inp_email" name="email" class="form-control" placeholder="Email" required="" data-msg-required="Email is required." data-rule-email="">
                        </div>
                    </div>
                    <div class="row align-items-center mt-4">
                        <div class="col">
                            <input type="password" id="inp_password" name="password" class="form-control" placeholder="Password" required="" minlength="8" data-rule-nowhitespace="" data-msg-nowhitespace="No space please.">
                        </div>
                        <div class="col">
                            <input type="password" id="inp_password_confirm" name="password_confirm" class="form-control" placeholder="Confirm Password" required="" minlength="8" data-rule-nowhitespace="" data-rule-equalto="password" data-msg-equalto="Password doesn't match." data-msg-nowhitespace="No space please.">
                        </div>
                    </div>
                    <div class="row justify-content-start mt-4">
                        <div class="col">
                            <div class="form-check">
                                <label class="form-check-label">
                                    <input type="checkbox" class="form-check-input" required="" data-msg-required="You must agree to our Terms and Conditions to register.">
                                    I Read and Accept <a href="/termsandconditions" internal target="_blank">Terms and Conditions</a>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-start mt-4">
                        <div class="col">
                            <button id="register_submit" class="btn mt-4 btn-primary btn-lg" type="submit" data-bs-toggle="button"><i class="fas fa-file-signature"></i>
                                Register</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>

What is that toggle suppose to do?

I probably changed it through the troubleshooting process thinking that is something that’s explicitly declare the button property. It was ‘none’ before that, and the problem still persisted.

Why dod you have the toggle in there at all? That is usually used to collapse elements. What are you collapsing?

It was already available under the button object, but originally the selection was ‘none’. I changed it sometime through the troubleshooting process.

Here…let me start this thing over. I know the troubleshooting itself would’ve been an interesting endeavor, but I am looking forward to finding out the other things about this tool. Let’s consider this issue closed.