Dialog not opening with blank input values

Hi all,
I have the following dialog which gets opene when a user clicks a button(not shown below) and the problem I am facing is the following:

Question 1: At first, I put some input in name and description, clicks OK button that does everything in terms of ajax call as shown below. However, when I click the dialog second time, it’s remembering the previous inputs. Why it is doing like this?

Question 2:
Also when I click OK button, I want to refresh/reload the page, so is location.reload() good option to use as mentioned in the success function in the code below

 <div id="add_dialog" title="Add New Data" style="display:none;">
          <form>
            <p>
              Name:
              <input id="dataName" type="text" name="name" />
            </p>
            <p>Description:
               <input id = "dataDescription" type="text" name="description" />
            </p>
          </form>
        </div>
 $("#add_dialog").dialog({
         autoOpen: false,
         closeText:false,
           buttons: [
	                 {
	                   text: "Ok",
	                   icon: "ui-icon-heart",
	                   click: function() {
			                	 console.log("OK button clicked");  
			                	 let jsonData = {some json data  }
			                	$.ajax({
									      type: "Post",
									      url: "url",
									      data: JSON.stringify(jsonData),
									      contentType: 'application/json',
									      async: true,
									      cache: false,
									      success: function(data) {
									        									        	
											        									        											        	
										        	   $.ajax({
															  url:'url1',
															  type:"POST",
															  data:'url2',
															  contentType:"text/uri-list",
															  dataType:"json",
															  success: function(){
															      //location.reload();
															  }
															})
									      }
									    });
                               $( this ).dialog( "close" );
	                   }
	                 
	                   
	                 },
	                 {
	                     text: "Cancel",
	                     click: function() {
	                         $(this).dialog("close");
	                     }
	                 }
          ]
	 
     });
  $("#myBtn").click(function(){
         
         console.log("Button Clicked");
         $("#add_dialog").dialog('open');
      
    });

It remembers them because your web browser is trying to be helpful.

You can disable autocomplete if that becomes a bother.

Thanks Paul. So the following code will change like this(with autocomplete="off" in the form tag), right?

<div id="add_dialog" title="Add New Data" style="display:none;">
          <form autocomplete="off">
            <p>
              Name:
              <input id="dataName" type="text" name="name" />
            </p>
            <p>Description:
               <input id = "dataDescription" type="text" name="description" />
            </p>
          </form>
        </div>
1 Like

Hey Jack I think what you are talking about is not actually auto complete. I think what you are saying is that when you open the modal again the from is already filled out. If that is the case (as I suspect it might be) then you need to clear the input fields before you close the dialog by setting them back to an empty value.

You really should not turn autocomplete off as it makes it a real pain for anyone trying to fill out the form.

Hope this helps.

Cheers.

2 Likes

Hey @mrlagmer,

Appreciate your valuable inputs. That’s exactly what I was looking for. It worked after I made the changes.

Thanks