onsubmit event not working for asynchronous form submit

Question

I have created a form using struts tags. I have submitted the form asynchronously using struts jQuery's submit tag. Now before I submit my form i want to call a JavaScript function checkUser(), that checks if there is some client side error And prevents the form from submitting. The form with the JavaScript function is as follows:

<script type="text/javascript">
    function loadXMLDoc() {
        
        var xmlhttp;
        var k = document.getElementById("register_userDetails_username").value;
        
        var urls = "pass.jsp?ver=" + k;

        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4) {
                document.getElementById("err1").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET", urls, true);
        xmlhttp.send();
    }
</script>
<script type="text/javascript">
      function checkuser() {
          alert("hi");  
            var i = document.getElementById('err1').innerHTML.search("Unavailable");
            alert(i);
            var j= document.getElementById('err1').innerHTML.search("Min length:8");
            alert(j);
            if (i!= -1 || j!=-1) {
                alert("hello");
                return false;
            } 
            alert("false");
            return false;
      } 
     
</script>


    
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<jsp:include page="menubar.jsp"></jsp:include>
<s:form action="register" method="post" theme="css_xhtml" cssClass="form1" style="margin:8px 211px" onsubmit="return checkuser()">
    <div class="searchHeader">Sign Up</div>  
    <div id="passwordMatchError">
        <s:property value="error"/>
    </div>
    <s:textfield label="Name" name="userDetails.name" maxlength="30"/>
    <s:textfield label="Username"  name="userDetails.username" onkeyup="loadXMLDoc()" maxlength="30">
        <div id="err1"></div>
    </s:textfield> 
    <s:password label="Password" name="userDetails.password" maxlength="45"/>
    <s:hidden name="userDetails.role" value='U' />
    <s:password name="confirmPassword" label="Confirm Password" maxlength="45"/>
    <s:radio label="Sex" name="userDetails.sex" list="#{'M':'Male','F':'Female'}" />
    <s:textfield label="Phone No" name="userDetails.phoneno" maxlength="10"/>
    <s:textfield label="E-mail" name="userDetails.email" maxlength="45"/>
    <div id="submitdivid"> 
        <sj:submit value="SUBMIT" cssClass="orangebuttonsmall" targets="mainContent" id="sas" />
    </div>
</s:form>

Now when I enter some value in username field that already exist in db, then it shows string Unavailable in div having id as err.

On onsubmit event of form , I have called checkuser method. But with sj:submit, onsubmit event is not working. Can anyone help me with how to call make this onsubmit work My aim is to prevent form from submitting, if there exists the String Unavailable or Min Length:8 in div err. Any alternative solutions are also accepted.

@RomanC I have called checkuser() method when this event is fired. There i have checked certain conditions which when found true,i want to prevent form from submittting. But with sj:submit tag, this event is not working.. — Gaurav Kumar, Nov 14 '13 at 05:10
Do you have an evidence of that event is fired? And I don't understand what is not working: preventing a form from submitting or `sj:submit` tag. — Roman C, Nov 14 '13 at 09:11
@RomanC The problem is when i use sj:submit tag, onsubmit event is not fired. — Gaurav Kumar, Nov 18 '13 at 09:14
@RomanC The complete scene is like this. I have created a form using . I have called a function on onsubmit event of this form using . Now if i use to submit this form, then that event is not fired i.e. control doesn't go to that someFunction(). And if i use to submit the form the event gets fired. Now i dont understand the reason for this.... — Gaurav Kumar, Nov 20 '13 at 04:52
The reason is they reproduce different behavior between normal request and Ajax request. If `sj:submit` have `s:submit` like behavior then there should be switch between request. — Roman C, Nov 20 '13 at 09:15
@RomanC My purpose is to call a function when i submit this form and if certain conditions checks becomes true in it, then the form should not be submitted. How can i accomplish this using sj:submit? — Gaurav Kumar, Nov 20 '13 at 09:29
You can use `s:if` tag to make a choice between two submits. — Roman C, Nov 20 '13 at 09:34

Andrea Ligios · Answer 1 · 2013-11-13T12:52:48.450

3

In Head:

<script type="text/javascript">
    $.subscribe('beforeSubmit', function(event,data) {
        event.originalEvent.options.submit = checkuser();          
    });
</script>

In your tag:

<sj:submit value = "SUBMIT" 
        cssClass = "orangebuttonsmall" 
         targets = "mainContent" 
              id = "sas" 
  onBeforeTopics = "beforeSubmit"
/>

edited Nov 13 '13 at 12:52

answered Nov 13 '13 at 09:33

Andrea Ligios

49,480
26
114
243

Onclick event works fine with the tag but this doesn't prevent form from submitting.. – Gaurav Kumar Nov 13 '13 at 10:44
if you return false, it should. At least, it works with , not sure with – Andrea Ligios Nov 13 '13 at 11:27
yaa i agree. It works with s:submit. Problem lies with sj:submit. It doesn't work with it... – Gaurav Kumar Nov 13 '13 at 11:34
I've rewrited the answer consistently; totally untested solution, though, just try and let me know. To avoid confusion, always return a value from your function. – Andrea Ligios Nov 13 '13 at 12:53
@AndreaLigios: It is not working and the form is submiting! I am using struts jquery last version ( 3.7.0 ). as far as I reviewed at http://code.google.com/p/struts2-jquery/issues/detail?id=1039 this option was a suggestion and not implemented – Alireza Fattahi Feb 26 '14 at 12:32
Ok, [it was a bug](https://code.google.com/p/struts2-jquery/issues/detail?id=617), but it should have been fixed in 3.2.1 :| – Andrea Ligios Feb 26 '14 at 12:51
I'm using 3.7.0 too and I just checked, [the fix](http://code.google.com/p/struts2-jquery/source/detail?r=1559) is there, line 1130 :| Are you sure it is not working ? – Andrea Ligios Feb 26 '14 at 13:04
Sorry for being too late! I found this will not prevent ajax validation if the form has validateFunction and has validate=true! – Alireza Fattahi Mar 19 '14 at 12:25

onsubmit event not working for asynchronous form submit

1 Answers1

Linked