Why does AJAX stop working when I use <form>...</form>

JavaScript
1

'recently been playing with AJAX (without jQuery) and surprised that AJAX does not like <form> ... </form>

2

Sure it does, you just have to attach an onsubmit handler that prevents default behaviour.

2 Likes
3

I like to NOT use a submit button, in favor of a plain button and use Javascript to perform the actual submit via AJaX.

HTH,

^ _ ^

4

I use a submit button and make the form work when Javascript is disabled / borked for whatever reason too - graceful degradation.

2 Likes
5

We have to fail closed for security reasons. If Javascript is disabled (or otherwise borked), we protect the systems from potential malicious activities. We would rather prevent the information from being submitted than risk being compromised, in any fashion.

V/r,

^ _ ^

6

I must not understand. A form is a form. Whether it is submitted via AJAX or a plain old post shouldn’t matter anything, unless the Javascript is doing something very fancy that a regular form cannot?

7

I work for USG DoD - think paranoia multiplied by 1,000.

V/r,

^ _ ^

8

I still do not understand how to add form.

I have in the following example three AJAX form input calls and when form is added the AJAX stops working.

https://this-is-a-test-to-see-if-it-works.tk/ajax/index.php

9

I would do it a bit different.

          <input 
            type="submit" 
            value="simple" 
            onclick="ajax_post('simple');">
          <input 
            type="submit" 
            value="verbose" 
            onclick="ajax_post('verbose');">
          <input 
            name="notes" 
            type="submit" 
            value="notes" 
            class="flr" 
            onclick="ajax_notes();">

I would give the inputs name and id attributes, and instead of having onclick in the elements

  • get the input elements
  • add event listeners
  • prevent the default form submit
  • do the XHR
  • if XHR Fails trigger submit event
1 Like
10

Many thanks, I look forward to trying your suggestions when on the desktop.

11

All changes implemented apart from the last item which I will have to investigate later.

The following FireFox JavaScript Toggler was used for testing

The latest version has a JavaScript modal alert() box which pops up only when JavaScript is enabled. - Is it possible to detect when JavaScript is not enabled?

When JavaScript is disabled the form freezes until all the URL results have been retrieved :frowning: The “simple” test takes about 15 seconds to finally render about 20 URLs and 25 seconds for “verbose” to render!

Delighted to say that with JavaScript/Ajax enabled the rendering is progressive and the first result is virtually instant. The total rendering result is also faster because PHP Curl() is used and does not have to wait until the previous process is complete.

1 Like
12

Well there’s the <noscript> tag, but it rather depends on what you’re trying to do with that information.

The default structure design would be to code the HTML page as though it has no javascript, and then use javascript to overwrite the HTML with the javascript-enabled versions, because a javascript-enabled client… can actually process said scripts.

13

I unsuccessfully tried <noscript> when trying to display a message in ajaxOutput div:

 document.getElementById('ajaxOutput').innerHTML += return_data;
14

It would be more along the lines of:

<form id='myForm' action='noscript.php'>
....
....
</form>
<script>
function doTheAjax(e) { 
 e.preventDefault();
 ....
}

document.getElementById("myForm").addEventListener('submit',doTheAjax);
15

Many thanks, I hope to try it early tomorrow before going away for a week to get some sand between my toes :slight_smile:

1 Like
16

Unless I’m missing something, the <noscript> tag is used when Javascript is turned off, so any Javascript code within won’t work.

V/r,

^ _ ^

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.