How to clear Selectize value on Submit? [Cannot read proprety 'clear' of undefined]

Question

I have to clear selectize input after submit, but it gives me this error message:

Cannot read property 'clear' of undefined

This is what I have so far:

GET $_POST value, nothing is wrong with this.

   <?php
       $autoclear = "0";
       if (isset($_POST['autoClear']))$autoclear = $_POST['autoClear'];
   ?>

My HTML Form, also nothing wrong with this.

<form method="post" action="">
<input type="checkbox" id="autoClear" name="autoClear" value="1" <?php if ($autoclear == '1') echo 'checked'; ?>>
  <select id="client" name="client" class="client selectize" >
    <option>
      ...
      ...
    </option>
  </select>
<!-- OTHER INPUTS, IRRELEVANT -->
<input type="submit" name="submitBtn" id="submitBtn" class="submitBtn btn-info" value="Submit">

</form>

This is the problem. It seems like the HTML <select id="client" .... </select> must load first before able to call selectize .clear() function. However, since PHP runs in server side so it will print it out, and maybe that caused the problem?

<script>
   function clearSelectize(){

      // Clear Selectize [ERROR]
      $('#client')[0].selectize.clear();
   }

</script>

<?php 
      if ($autoclear == '1'){
         echo "<script>clearSelectize(); </script>";
      }
?>

What I initially did: simply reload the page.

<script>window.location.href = 'page.php'; </script>

But this will clear ALL the inputs, so I have to find a way to clear ONLY selectize input.

Update: Solution#1

<script type="text/javascript">
     $(document).ready(function () {
         <?php
             if ($autoclear == '1'){
                 echo "$('.car.selectize')[0].selectize.clear();";
             }
         ?>
     }
</script>

This works for me, thanks. If anyone has a better way/solution, please let me know.

Any advice/suggestion is very much appreciated! Thanks!

score 0 · Accepted Answer · answered Jul 15 '21 at 17:31

Since you have to make sure that selectize() has been initialized, using $('document').ready(function(){}); will do the job.

Inside it, you can put your PHP conditions, works after submit:

<script type="text/javascript">
     $(document).ready(function () {
         <?php
             if ($autoclear == '1'){
                 echo "$('.car.selectize')[0].selectize.clear();";
             }
         ?>
     }
</script>

score -1 · Answer 2 · answered Jun 24 '21 at 21:04

-1

There is no such selector in jquery

$(".classname.classname") // is wrong
// use space multi class 
$(".classname .classname") // is correct 
// your code is wrong 
 $('.client.selectize')[0].selectize.clear();

answered Jun 24 '21 at 21:04

Gultekin Ahmed

78
2

This line of code isn't the problem. I actually have a clear button and I use this function to clear the selectize, and it works fine. The problem here is: clear selectize after submit, so I have to check $_POST['autoClear], if the value is "1", then clear Selectize. – NcXNaV Jun 25 '21 at 03:55
[@crazzyguti](https://stackoverflow.com/users/11246391/crazzyguti) My JQuery selector is correct, I was selecting an element which contains BOTH "client" and "selectize" class . Check this out: https://stackoverflow.com/questions/1041344/how-can-i-select-an-element-with-multiple-classes-in-jquery – NcXNaV Jun 25 '21 at 03:58

How to clear Selectize value on Submit? [Cannot read proprety 'clear' of undefined]

2 Answers2