post & clear filter -Razor page

Question

I need to clear filter after search Here is my index.cshtml

<form method="post" id="form">
    <div class="row">
        <div class="col-md-2">
            <div class="form-group">
                <input type="search" name="searchNom" value="@ViewData["sNom"]?.ToString()" class="form-control" id="nom" />
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <input type="search" name="searchPrenom" value="@ViewData["sPrenom"]?.ToString()" id="prenom" />
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <input type="search" name="searchEmail" value="@ViewData["sEmail"]?.ToString()" id="email" />
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <input type="search" name="searchTelephone" value="@ViewData["sTelephone"]?.ToString()" id="telephone" />
            </div>
        </div>
        <div class="col-md-2">
            <p>
                <input type="submit" value="Search" class="btn btn-primary" />
                <button class="btn" type="reset" id="reset" onclick="Reset()"><i class="fa fa-trash"></i></button>
            </p>
        </div>
    </div>
</form>

and then the action Index:

   public string searchNom { get; set; }
        public string searchPrenom { get; set; }
        public string searchEmail { get; set; }
        public string searchTelephone { get; set; }
        public async Task<IActionResult> Index(string searchNom, string searchPrenom, string searchEmail, string searchTelephone, int? pageNumber, string currentFilter)
        {
            
            if (searchNom != null || searchPrenom != null || searchEmail != null || searchTelephone != null)
            {
                pageNumber = 1;

            }
            

            var personnels = from s in _context.personnels
                             select s;
            if (!String.IsNullOrEmpty(searchNom) || !String.IsNullOrEmpty(searchPrenom) || !String.IsNullOrEmpty(searchEmail) || !String.IsNullOrEmpty(searchTelephone))
            {
                personnels = personnels.Where(s => s.Nom.Equals(searchNom) || s.Prenom.Equals(searchPrenom) || s.Email.Equals(searchEmail) || s.Telephone.Equals(searchTelephone));
                ViewData["sNom"] = searchNom ;
                ViewData["sPrenom"] = searchPrenom;
                ViewData["sEmail"] = searchEmail;
                ViewData["sTelephone"] =searchTelephone ;
                
            }

            else
            {
                ViewData["sNom"] = "";
                ViewData["sPrenom"] = "";
                ViewData["sEmail"] = "";
                ViewData["sTelephone"] = "";
            }
          
            
                int pageSize = 20;
            return View(await Pagination<PersonnelModel>.CreateAsync(personnels.AsNoTracking(), pageNumber ?? 1, pageSize));


        }

js code:

<script>
    function Reset() {
        document.getElementById("nom").value = "";
        document.getElementById("prenom").value = "";
        document.getElementById("email").value = "";
        document.getElementById("telephone").value = "";


    }</script>

Now the problem ,the button reset dosen't work ther is an exception Uncaught TypeError: Cannot set property 'selectedIndex' of null at Reset ((index):357) at HTMLButtonElement.onclick ((index):107)

Is there any way how to make "reset" button working on form data values in same time please?

Thank you very much in advance for any kind of help.

Duck Ling Duck Ling · Accepted Answer · 2020-07-16T20:01:05

Welcome to SO.

The code above can't be executed as we don't have the _context variable, nor the PersonelModel class.

The way you use ViewData to initially populate the form seems a little shady - I'd make sure I pass the view model instead. I appreciate that this is not the issue here.

Answering the actual question, I'd start with wrapping the script functions with

document.addEventListener("DOMContentLoaded", function(){
  // Handler when the DOM is fully loaded
});

or have a look here

Instead of depending on onclick attribute, have a look at .click() function from jQuery library, have a look here

Using the above, your code will look something like:

$("#submit-button").click(function() {
    document.getElementById("nom").value = "";
    document.getElementById("prenom").value = "";
    document.getElementById("email").value = "";
    document.getElementById("telephone").value = "";
});

given you added submit-button id to your button.

post & clear filter -Razor page

2 Answers