After I submit my form data, I want the page to not redirect anywhere, just stay on the form (this is a single-page app). It keeps redirecting to my api page ‘insert.aspx’. How do I stop this?
Thank you
The form shouldn’t be redirecting you anywhere if you haven’t set this up.
Please share your form code.
I can see the problem now, but how did it get there? Where would I find this property and remove it?<form id="form1" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/insert.aspx" dmx-on:success="notifies1.success('Success!')" dmx-on:error="notifies1.warning('Failed!')">
I see no redirect in your form code. Only a notification for success and error events. And it should not go anywhere with the code you posted.
Your form code looks just fine.
Perhaps you have a redirect on your form button? Can you paste your button code here?
huh. Ok. Guess It’s back to an option somewhere. Where to start?
So what exactly happens? Where are you redirected to?
Are there any errors in the browser console when you load the page?
Paste the whole for page here please.
It opens the insert.aspx page, no errors.
The insert query does run successfully.
Please paste your whole form code here.
<!doctype html>
<html>
<head>
<script src="dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title>SSA Form</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="dmxAppConnect/dmxValidator/dmxValidator.css" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" integrity="sha256-CutOzxCRucUsn6C6TcEYsauvvYilEniTXldPa6/wu0k=" crossorigin="anonymous"></script>
<script src="dmxAppConnect/dmxValidator/dmxValidator.js" defer></script>
<script src="dmxAppConnect/dmxTyped/dmxTyped.js" defer></script>
<script src="dmxAppConnect/dmxTyped/typed.min.js" defer></script>
<link rel="stylesheet" href="dmxAppConnect/dmxAnimateCSS/animate.min.css" />
<script src="dmxAppConnect/dmxAnimateCSS/dmxAnimateCSS.js" defer></script>
<script src="dmxAppConnect/dmxBootstrap5Popovers/dmxBootstrap5Popovers.js" defer></script>
<link rel="stylesheet" href="dmxAppConnect/dmxDatePicker/daterangepicker.min.css" />
<script src="dmxAppConnect/dmxDatePicker/daterangepicker.min.js" defer></script>
<link rel="stylesheet" href="dmxAppConnect/dmxDatePicker/dmxDatePicker.css" />
<script src="dmxAppConnect/dmxDatePicker/dmxDatePicker.js" defer></script>
<link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
<script src="dmxAppConnect/dmxFormatter/dmxFormatter.js" defer></script>
<script src="dmxAppConnect/dmxBootstrap5Alert/dmxBootstrap5Alert.js" defer></script>
<link rel="stylesheet" href="dmxAppConnect/dmxNotifications/dmxNotifications.css" />
<script src="dmxAppConnect/dmxNotifications/dmxNotifications.js" defer></script>
</head>
<body id="index" is="dmx-app">
<dmx-notifications id="notifies1" closable="true"></dmx-notifications>
<main class="container-fluid">
<div class="d-flex justify-content-center"><img src="assets/images/3AWC-logo-4c-revised.jpg" width="350" class="img-fluid"></div>
<h1 class="text-center text-primary mt-4 mb-3">Self-Service Application</h1>
<section>
<div class="container">
<h3 class="text-danger">Your Information</h3>
<form id="form1" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/insert.aspx" dmx-on:success="notifies1.success('Success!')" dmx-on:error="notifies1.warning('Failed!')">
<div class="d-flex flex-column">
<div class="form-group md-3"> <label for="FirstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="FirstName" name="FirstName" aria-describedby="input1_help" required=""><label for="input2" class="form-label">Middle Name</label><input type="text" class="form-control" id="input2" name="MiddleName" aria-describedby="input2_help"><label for="input3" class="form-label">Last Name</label><input class="form-control" id="input3" name="LastName" aria-describedby="input2_help" required="">
</div>
</div>
<div class="d-flex flex-row">
<div class="form-group md-3 col-8"> <label for="input4" class="form-label">Address</label>
<input type="text" class="form-control" id="input4" name="Address1" aria-describedby="input4_help" placeholder="Number and Street">
<small id="input4_help" class="form-text text-muted">House Number & Street Name</small>
</div>
</div>
<div class="d-flex flex-row">
<div class="form-group md-3 col-8">
<input type="text" class="form-control" id="input5" name="Address2" aria-describedby="input4_help" placeholder="Apt, Unit, etc.">
</div>
</div>
<div class="d-flex flex-row">
<div class="form-group md-3"> <label for="input6" class="form-label">City</label>
<input type="text" class="form-control" id="input6" name="City" aria-describedby="input1_help">
</div>
<div class="form-group mb-3">
<label for="select1" class="form-label">State</label>
<select id="select1" class="form-select" name="State">
<option value="1">CA</option>
<option value="2">NV</option>
<option value="3">AZ</option>
</select>
</div>
</div>
<div class="d-flex flex-row">
<div class="form-group md-3"> <label for="input7" class="form-label">Phone Number</label>
<input class="form-control" id="input7" name="Phone" aria-describedby="input7_help" placeholder="(000) 000-0000" data-rule-number="">
<small id="input7_help" class="form-text text-muted">Please enter a valid phone Number</small>
</div>
</div>
<div class="d-flex flex-row">
<div class="form-group md-3"> <label for="input8" class="form-label">Email</label>
<input class="form-control" id="input8" name="Email" aria-describedby="input7_help" data-rule-number="" type="email" data-rule-email="true">
<small id="input7_help1" class="form-text text-muted">example@example.com</small>
</div>
</div>
<div class="d-flex flex-row">
<div class="form-group md-3"> <label for="input9" class="form-label">Birth Date</label>
<input class="form-control mb-5" id="input9" name="BirthDate" aria-describedby="input7_help" data-rule-number="" type="date">
</div>
</div>
<button id="btnSubmit" class="btn btn-primary" dmx-on:click="form1.submit()" type="submit" dmx-bind:disabled="state.processing">
<span class="spinner-border spinner-border-sm visually-hidden" role="status" dmx-show=""></span>
Submit
</button>
</form>
</div>
</section>
</main>
<script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Take off the on click attribute on your button. It’s not suppose to be there.
As brad already suggested, the onclick>submit should not be used with your submit button.
so remove this:
dmx-on:click="form1.submit()"
The submit button doesn’t need anything to submit the form, its job as a submit button is to submit the form it’s placed into.
I stripped the button of all code and it still redirects to insert.aspx.
Anywhere else I can look?
Can you check if this folder with the file on this path exists on your server, in your site root? Looking at the path it should be in the same directory as your form page.
Yes I do see it there:
Hang on I think I know what’s going on–IIS handler mappings–checking now
You really need to leave your IIS server to its default settings or at least get someone who knows how to configure it, or just use a hosting service, where they configured it for you.
I just made a test yesterday on a brand new Win 11 installation - installed and enabled IIS/.NET and everything runs smoothly without any issues with the default configuration…
Hi,
If only it was that simple…
From what I know, the default IIS install differs in various versions of Windows. Trying a reset would probably break my main .NET application so I don’t dare attempt that.
Meanwhile some IIS settings are apparently not enabled by default. My .NET app somehow gets around this probably because I have extensive configurations in its web.config file.
.NET also lets one reconfigure the web.config file (there are debug and release versions of the file) when publishing to my web host so I can alter some settings as needed there. Such as changing connection strings, redirecting traffic to the https port… basically anything I need to do.
What I have discovered with Wappler is that IIS did not have certain settings which Wappler requires and these need to be checked. It makes sense if you step back and look at it: I code with C#. I have never written Javascript code and really don’t want to. (This is why I purchased Wappler the “Low code/No-code solution”!) But some of the issues I’ve run into here have to do with IIS and its Javascript support. It has to be configured for Javascript, at least on my PC, which is a standard setup done by IT staff here (I work for a very large city). I cannot control how this machine is imaged, but I have admin rights to change things as necessary.
TLDR;
If anyone using IIS finds this post I have taken the time to show below what settings you may need to set when things don’t seem to be working right in Wappler. If you have already been developing in Javascript your IIS is probably already working fine.
#1 Enable the ‘Static Content’ setting:
Control Panel–> Pregrams and Features–>Turn Windows features on or off–>Internet Information Services–>World Wide Web Services–>Common HTTP Features–> Static Content–> ENABLED
#2 Enable any missing ‘Handler Mappings’:
In my case, there were NO mappings for these Static Content types: JS, CSS, JPG, PNG.
See the screen shot below for how to add a mapping for each file type you may be missing. It’s easy:
In my case Type:‘System.Web.StaticFileHandler’ does not appear in the drop-down so I had to type it in myself.
Please note that due to inheritance, adding a Mapping to ‘Default Web Site’ will affect any virtual applications under it. You may want to think about adding a mapping ONLY to each app that needs it instead of the Default Web Site.
Alternatively, you could add a Mapping to the web.config file for an individual app.
#3 ApplicationHost.config changes
In order to get my Wappler app working correctly, I added this section:
Also note that this is where the handler Mappings go that you set in step #2, above:
#4 Folder Permissions
After creating an Application in IIS, you will probably need to set permissions on the actual folder where the Wappler files are located. Depending on which application pool you have assigned to the app in IIS (by default it is probably the DefaultAppPool), that app pool must be given permissions for the actual folder:
I left the permissions set to the default as shown.
ALWAYS restart the IIS Server after making a change.
As always, back up your config files before editing them.
Hope this helps anyone possibly facing the issues involved with using Wappler on your local IIS Server.