CODEWITHSUNDEEP
javascriptphplaravellaravel-blade
JKLM
JKLM

Reputation: 1520

Not able to reset input field in laravel

I need to reset the input field when user clicks on the rest button, I have other content on the page which is getting cleared except input field, I'm not sure if this is happening because I'm using old values after post request. 

 <input type="text" name="app_number" class="form-control" onreset="this.value=''" value="{!! Request::input('app_number') !!}" id="app_number" placeholder="Application Number" required>

JS for reset button:

document.getElementById("appForm").onreset = function() {
   document.getElementById("app_number").value = "";
  };

Reset Button:

<button class="btn btn-primary" id="reset-button" type="reset">Reset</button>

Upvotes: 0

Views: 3927

Answers (6)

Natvarsinh Parmar - bapu
Natvarsinh Parmar - bapu

Reputation: 1138

Your reset button :

<button class="btn btn-primary" id="reset-button" onclick="myFunction()">Reset</button>

In js:

function myFunction(){
   document.getElementById("app_number").value = "";
}

Upvotes: 0

JKLM
JKLM

Reputation: 1520

So answering my own question, any feedback would be appreciated but this is working.

It turns out that no matter what value="{!! Request::input('app_number') !!}" will always have value as this code gets executed on the server side and unless you make another post request you can not change the value and by using only vanilla JS and without post request this cannot be done.

So, instead of getting values from Request why not just takes the values from user input and save it to local storage and then just grab it and inject into the input field.

I added onkeyup event ion to the input field

<input type="text" name="app_number" class="form-control" onkeyup='saveValue(this);' id="app_number" placeholder="Application Number" required>

and JS to store and retrieve input

document.getElementById("app_number").value = getSavedValue("app_number"); // set the value to this input

function saveValue(e) {
  var id = e.id; // get the sender's id to save it .
  var val = e.value; // get the value.
  localStorage.setItem(id, val); // Every time user writing something, the localStorage's value will override .
}

//get the saved value function - return the value of "v" from localStorage.
function getSavedValue(v) {
  if (!localStorage.getItem(v)) {
      return ""; // You can change this to your defualt value.
  }
  return localStorage.getItem(v);
}

and then reset the form as usual 

document.getElementById("appForm").onreset = function() {
document.getElementById("app_number").value = '';
};

Upvotes: 0

PHP Geek
PHP Geek

Reputation: 4033

Please try to use in js like:

$(document).on('click', '#YourOnclickButtonID', function(){
    var $alertas = $('#YourFormID');
    $alertas.validate().resetForm();
});

Upvotes: 0

Rafael Ribeiro
Rafael Ribeiro

Reputation: 36

In this case you must use JQuery Lib. Basic you need to set ID for this element. And in jquery you listen click on this Element.

$('#app_number').on('change', function () {
   // enter code here
});

Upvotes: 0

abdalgader sirag
abdalgader sirag

Reputation: 46

try using reset(): document.getElementById("app_number").reset();

Upvotes: 0

Adam Rodriguez
Adam Rodriguez

Reputation: 1856

Use type="reset" for your button:

<button type="reset">Cancel</button>

Upvotes: 1

Related Questions