John Davidson

Message:

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');

    }

---

My Answer:
To disable the button until the AJAX function has completed successfully, you can modify your script as follows:

javascript
$(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);

$("#submit").prop("disabled", true); // Disable the button

$.ajax({
success: function(result){
$("#submit").prop("disabled", false); // Enable the button once the AJAX call is successful
}
});
});
});


By using `$("#submit").prop("disabled", true);`, you can disable the button before making the AJAX call and then enable it again using `$("#submit").prop("disabled", false);` inside the `success` callback function of the AJAX call. This way, the button will only be enabled after the AJAX call has completed successfully.