I have created a button

<button type="submit" class="btn btn-info" name="enroll" onClick="return clicknow()">

in JS I have written clicknow function as follow :

<script>
function clicknow()
{
    jQuery('#sheduling_wait').show();
    var roll_number = jQuery('#roll_number').val();
    var class_n = jQuery('#class_n').val();
    //alert(class_n);
    var FirstData = "roll_number=" + roll_number+"&class_n="+class_n;
    var currenturl = jQuery(location).attr('href');
    var url = currenturl;
        jQuery.ajax({
            dataType : 'html',
            type: 'GET',
            url : url,
            data : FirstData,
            plete : function() { },
            success: function(data) 
                {

                    data1=jQuery(data).find('div#stfflistdiv');
                    //jQuery('#staff').show();
                    jQuery('#staff').html(data1);
                    var data2 = jQuery('#staff #stfflistdiv').html();
                    console.log(data2);
                    if(data2 == '2')
                    {
                        jQuery('#staff').show();
                        jQuery('#staff').html("This roll No is already Saved, Please add another roll no");
                        jQuery('#sheduling_wait').hide();
                        return false;
                    }
                    else
                    {
                        jQuery('#sheduling_wait').hide();
                        return true;
                    }

                }
        });
}
</script>

I have problem that when the value of data2 is equal to 2 then the page directs instead of staying on same page due to return false,

How can I stay on same page if data2 == 2 and submit when the value of data2 == 1

I have created a button

<button type="submit" class="btn btn-info" name="enroll" onClick="return clicknow()">

in JS I have written clicknow function as follow :

<script>
function clicknow()
{
    jQuery('#sheduling_wait').show();
    var roll_number = jQuery('#roll_number').val();
    var class_n = jQuery('#class_n').val();
    //alert(class_n);
    var FirstData = "roll_number=" + roll_number+"&class_n="+class_n;
    var currenturl = jQuery(location).attr('href');
    var url = currenturl;
        jQuery.ajax({
            dataType : 'html',
            type: 'GET',
            url : url,
            data : FirstData,
            plete : function() { },
            success: function(data) 
                {

                    data1=jQuery(data).find('div#stfflistdiv');
                    //jQuery('#staff').show();
                    jQuery('#staff').html(data1);
                    var data2 = jQuery('#staff #stfflistdiv').html();
                    console.log(data2);
                    if(data2 == '2')
                    {
                        jQuery('#staff').show();
                        jQuery('#staff').html("This roll No is already Saved, Please add another roll no");
                        jQuery('#sheduling_wait').hide();
                        return false;
                    }
                    else
                    {
                        jQuery('#sheduling_wait').hide();
                        return true;
                    }

                }
        });
}
</script>

I have problem that when the value of data2 is equal to 2 then the page directs instead of staying on same page due to return false,

How can I stay on same page if data2 == 2 and submit when the value of data2 == 1

• javascript
• php
• jquery

3 Answers 3

you have to do it like this

<button type="submit" class="btn btn-info" name="enroll"> <!-- remove onclick-->

and then

$(document).ready(function() {
  $("#myform").submit(function(event){

    if(data ==2)
    {
      event.preventDefault(); //prevent the default submit action
      //...your code
    }else{
      //other code
    }

  });
});

The value you return from the success callback is not returned by the outer function. In fact, the success callback is not called until the ajax call returns, which is after the outer function has already returned.

Instead of adding an onclick attribute to the submit button, you can register a submit-event handler on the form. Inside the submit-event handler, you can call e.preventDefault() to stop the normal form submission. Then when the ajax call returns and you want the form to submit, you can call the form element's submit() method. (Do not call submit() on a jQuery object that represents the form, that would cause the submit-event handler to get called again, which would result in an infinite loop. You call submit() on the actual form element.)

<script>
jQuery(function($) {
    $('#myForm').submit(function(e) { // <-- Use your form's id
        e.preventDefault();
        var form = this;
        $('#sheduling_wait').show();
        $.ajax({
            type: 'GET',
            url: $(location).attr('href'),
            data: {
                roll_number: $('#roll_number').val(),
                class_n: $('#class_n').val()
            },
            dataType: 'html',
            success: function(html) {
                var $stfflistdiv = $(html).find('#stfflistdiv');
                if ($stfflistdiv.html() == '2') {
                    $('#staff').html("This roll No is already Saved, Please add another roll no").show();
                } else {
                    $('#staff').html($stfflistdiv).show();
                    form.submit();
                }
            },
            plete: function() {
                $('#sheduling_wait').hide();
            }
        });
    });
});
</script>

Note:

1. Register the event handler in a document-ready handler. That is the jQuery(function($) { part of the code above. The jQuery object is passed as the first parameter, so if you name it $, you can then safely use $ to represent jQuery inside the function even if you have called jQuery.noConflict().
2. Use an object for the ajax data setting, rather than concatenating your own query string. It's cleaner, plus the values get properly encoded.
3. Use the plete callback to hide the #sheduling_wait element since plete executes even when there is an error.

the return statement return data for succes function. not for clicknow()

options: set variable in clicknow initial in false. var ret=false; and set ajax async:false (not remended) into success function set your variable for true or false;

if(data2 == '2') { ret=false; } else { ret=true; }

and into end function clicknow return ret;

sorry my english.

regards.