0
<script>
var xmlhttp;
        if(window.XMLHttpRequest)
            xmlhttp = new XMLHttpRequest();
        else
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");           
        
        xmlhttp.open("POST", "sign_up(1).php", true);
        xmlhttp.send(); // Send the request
            
        $('form').on('submit', function (e) {
            e.preventDefault(); // Block default commit behavior
                                // How to let the user submit the form if all the input in valid?

            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var data = JSON.parse(xmlhttp.responseText);
                    // Checking the error messages returned by PHP
                    if (data.error_msg_1 !== "" || data.error_msg_2 !== "" || data.error_msg_3   !== "" || data.error_msg_4 !== "") {
                        $('input[type="submit"]').prop('disabled', true); // Disable the SUBMIT button
                    }
                    else{
                        // Submit the form
                        document.getElementById("signup-form").submit();
                    }
                }
            };
        });
</script>

'Why is there no error message returned and the form is still not submitted? I want to return an error message if the user makes a typo, or vice versa, and have them submit the form. If I submit the form normally, it works fine, so the php/mysql part is not the problem. But after I added preventDefault(), I can't submit the form even without any error message. I don't know what the problem is. Is the submit() function not behaving properly? My purpose is that when the user submits the form, the system will first submit the form to the background for processing, then perform verification, and then send the information returned after verification to the foreground. If the information is an error message, the user will be prevented from submitting the form. Instead, let the user submit the form. (I want these actions to all be done without refreshing the page)'

Dawn
  • 1
  • 1
  • why is the onreadystatechange inside of the submit? makes no sense. – epascarello Mar 31 '23 at 14:35
  • 1
    What logic are you trying to implement here? You appear to be sending the AJAX request immediately when the page loads, rather than waiting until the form has been submitted. That doesn't sound like it would be a useful thing to do. – ADyson Mar 31 '23 at 14:51
  • 2
    P.S. As an aside, since you seem to be using jquery, why don't you also use jquery's $.ajax? Its syntax is a lot easier to understand and less verbose than XmlHttpRequest – ADyson Mar 31 '23 at 14:52
  • 2
    Or get into the 21st century and use `fetch()`. – Barmar Mar 31 '23 at 14:55
  • That's because when I used ajax, my database did not search for the account name, but PHP returned an error message saying that the account name was already used, but xmlhttprequest would not. I don't know if it's a problem with my typo, because I'm just new to ajax and XMLHttpRequest. – Dawn Mar 31 '23 at 15:31
  • Presumably you did something different / incorrect in the AJAX then. Better to fix than than go back to the old ways, IMO, but of course it's up to you. – ADyson Mar 31 '23 at 15:44
  • Anyway, back to your actual question...are you trying to send the AJAX request after the form is submitted? If so then obviously it would make sense to send the request inside the submit() event, don't you think? Or is that not the aim? The code does not make much sense - you make an ajax request when the page loads, but don't attempt to listen to its response until after the form's "submit" event occurs. You sort of explained a problem in your question, but didn't really make clear what you're aiming to achieve. You can [edit] your post to clarify it. Thanks. – ADyson Mar 31 '23 at 15:53
  • are you triggering submit on a form that you've told to preventDefault on submit? – Popnoodles Mar 31 '23 at 16:25
  • @Popnoodles that, in itself, isn't a problem. preventDefault() only seems to kick in when the submit is triggered by user action, not JS - demo: https://jsfiddle.net/rs9605x8/ . I think that's actually pretty logical. – ADyson Mar 31 '23 at 19:02
  • `My purpose is that when the user submits the form, the system will first submit the form to the background for processing, then perform verification, and then send the information returned after verification to the foreground`...this part makes total sense. `If the information is an error message, the user will be prevented from submitting the form. Instead, let the user submit the form`...ok but, as you said yourself in the previous sentence...they have already submitted it. You just rejected it, that's all. That's a single-request process. There's no point submitting the same thng twice. – ADyson Apr 01 '23 at 07:11
  • If the data is ok, you can save it as soon as you've verified it, within the same server code. If it's not, you can just reject it. – ADyson Apr 01 '23 at 07:12
  • `My purpose is that when the user submits the form, the system will first submit the form to the background for processing`...to do that using AJAX, you'd need to move `xmlhttp.open("POST", "sign_up(1).php", true); xmlhttp.send(); // Send the request` _inside_ the `$('form').on('submit', function (e) {`...otherwise it will try to send the request as soon as the page loads (see my very first comment)! You would also need to actually put the data from the form into the request body - see https://stackoverflow.com/a/18592868/5947043 for an example. – ADyson Apr 01 '23 at 07:14
  • But again, I strongly recommend using $.ajax for this - not least because you can take advantage of the `.serialize()` jquery function to automatically capture all the form data, without having to tediously write code to look for each one. – ADyson Apr 01 '23 at 07:22
  • @ADyson I have found a problem, when my username and email do exist, the system returns an error message and does not insert a new record in the database. However, when my username and email are correct, the system returns the same error message, but the database inserts a new record. I think the problem is with ajax, because when I don't use ajax, it takes me to the login page and inserts a new record in the database. – Dawn Apr 01 '23 at 13:49
  • @ ADyson I think the reason why ajax couldn't work before should also be because of this problem – Dawn Apr 01 '23 at 13:51
  • What error message is that, then? Remember we also cannot see your sign up code. Also, your ajax does not send any data to the server, as I already pointed out – ADyson Apr 01 '23 at 19:02

0 Answers0