Cannot disable button until AJAX function has succeeded

Question

I have 2 input fields, 1 is shown to the user with a dropdown of all the values. The other input field is hidden. What my AJAX function does is search for the id that corresponds to the option that the user has selected in the first input field and place that id in the second hidden input field. And the search query takes the id from the hidden field for filtering the data.

Now for some reason I cannot get the filter by id since it takes time for the id to look up the corresponding value and my submit button already moves the user to a new page by that time. So basically I need a way to disable my button till the query has finished looking up the corresponding id for the search query.

Current View class:

<?php if ($redirects): ?>
  <form name="redirectform" action="admin/redirects" method="post">
      <div>    
                <input list="search-from-list" id="search-from" name="search-from" style="width:100%;"/>
                <datalist id="search-from-list">
                    <?php foreach ($allredirects as $allredirect){ ?>
                      <option value="<?php echo $allredirect->from; ?>" id="<?php echo $allredirect->id; ?>" />
                    <?php } ?>
                </datalist>
            </div>

            <input type="hidden" name="linkid" id="linkid" />
            <input type="hidden" name="linkidto" id="linkidto" />

            <input type="hidden" name="<?php echo $this->security->get_csrf_token_name();?>" value="<?php echo $this->security->get_csrf_hash();?>">
      </div>
      
          <input list="search-to-list" id="search-to" name="search-to" style="width:100%;" />
          <datalist id="search-to-list">
              <?php foreach ($allredirects as $allredirect){ ?>
                <option value="<?php echo $allredirect->to; ?>" id="<?php echo $allredirect->id; ?>" />
              <?php } ?>
          </datalist>
      </div>
  </form>
    <table>
        <?php foreach ($redirects as $redirect): ?>
        <tr>
          <td><?php echo $from=str_replace('%', '*', $redirect->from);?></td>
          <td><?php echo $redirect->to;?></td>
        </tr>
        <?php endforeach ?>
    </table>
    <?php echo form_close() ?> </div>
<?php else: ?>
    <div class="no_data">No Data</div>
<?php endif ?>

//AJAX call

<script type="text/javascript">
  $("#search-from").select(function(e){
    var g = $('#search-from').val();
    var id = $('#search-from-list').find("option[value='"+g+"']").attr('id');
    $('#linkid').val(id);
  });
  $("#search-to").select(function(e){
    var g = $('#search-to').val();
    var id = $('#search-to-list').find("option[value='"+g+"']").attr('id');
    $('#linkidto').val(id);
  });
</script>

I've tried disabling the button and removing disabled once the value has been entered into the 2nd hidden field but this didn't work:

$(document).ready(function(){
  $("#search-from").select(function(e){    
    var g = $('#search-from').val();
    var id = $('#search-from-list').find("option[value='"+g+"']").attr('id');
    $('#linkid').val(id);
    $.ajax({success: function(result){
      $("#submit").removeAttr("disabled");
  }});
  });
});

Controller Class:

public function index()
    {
        
        if(isset($_POST["search-from"]) && !empty($_POST["search-from"])){      
            if(isset($_POST["linkid"]) && !empty($_POST["linkid"])){
                $from_id = $_POST["linkid"];
                $this->template->redirects = $this->redirect_m->order_by('`from`')->get_by_id($from_id);
            }
        }else if(isset($_POST["search-to"]) && !empty($_POST["search-to"])){        
            if(isset($_POST["linkidto"]) && !empty($_POST["linkidto"])){
                $to_id = $_POST["linkidto"];
                $this->template->redirects = $this->redirect_m->order_by('`to`')->get_by_id($to_id);
            }
        }else{
            $this->template->redirects = $this->redirect_m->order_by('`from`')->limit($this->template->pagination['limit'], $this->template->pagination['offset'])->get_all();
        }
        $this->template->allredirects = $this->redirect_m->order_by('`from`')->get_all();
        $this->template->build('admin/index');
    }

Dharman · Accepted Answer · 2021-11-03 13:36:48Z

0

When you use AJAX can you disable before send request disable it then when request complete can you enable it.

$.ajax({
 beforeSend: function() {
                   
                    $("#mybutton").prop('disabled', true);
                },
                statusCode: {},
                success: function(res) {
                   //to Do
                },
                complete: function() {
                    $("#mybutton").prop('disabled', false);
                }
}

edited Nov 3, 2021 at 13:36

Dharman♦

34k27 gold badges106 silver badges157 bronze badges

answered Oct 26, 2021 at 11:21

aKe

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot disable button until AJAX function has succeeded

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related