...">
Clever Geek Handbook

JS onclick function returns true

I created a button

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

in JS I wrote a function clicknow

like this:

<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,
            complete : 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 a problem when the value data2

is 2 then the page is directed instead of staying on the same page due to return false

,

How can I stay on the same page if data2 == 2

and send when valuedata2 == 1

+3


source to share


3 answers


you need 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
    }

  });
});
+4


source


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

Parameters: Set the variable in the clicknow source to false. var ret = false; and set ajax async: false (not recommended) in the success function set the variable to true or false;

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



and into the final function clicknow return ret;

sorry my english.

Sincerely.

+2


source


The value returned from the callback success

is not returned by the external function. In fact, the callback is success

not called until the ajax call returns, which is after the return of the outer function.

Instead of adding an attribute onclick

to the submit button, you can register an event dispatch handler on the form. Inside your event dispatch handler, you can call e.preventDefault()

to stop the normal form submission. Then, when the ajax call returns and you want the form to be submitted, you can call the form submit()

. (Do not call submit()

on the jQuery object that represents the form, which will cause the event handler to be called again, which will result in an infinite loop. You are calling submit()

on the actual form element.)

<script>
jQuery(function($) {
    $('#myForm').submit(function(e) { // <-- Use your form 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();
                }
            },
            complete: function() {
                $('#sheduling_wait').hide();
            }
        });
    });
});
</script>

Note:

  • Register an event handler with a document handler. This is part of the jQuery(function($) {

    code above. The object jQuery

    is passed as the first parameter, so if you call it $

    , you can safely use it $

    to represent jQuery

    inside the function, even if you called jQuery.noConflict()

    .
  • Use an object for the ajax parameter data

    , instead of concatenating your own query string. It's cleaner, plus the values ​​are encoded correctly.
  • Use a callback complete

    to hide the element #sheduling_wait

    as it complete

    gets executed even when an error occurs.
0


source






More articles:


All Articles