Click here to Skip to main content
15,122,845 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I have a form. I want to query the data according to the date being selected. My problem is that when I selected the datepicker the page is reloading and datepicker and the other input values are disappearing because of refreshing the page. Except this problem my codes work very well. How can I solve this problem?

What I have tried:

function getNameValue(){

     var name = document.getElementById("datepicker").value;

              window.location = "?tarih="+name;

 }
Posted
Updated 22-Oct-21 7:39am

Note: after I wrote this up I understood better that you want to post data to an endpoint. You can use fetch() to do that too. You'll just use these instructions[^] to do that.

1. make sure your button is _not_ wrapped inside a <form> element.
HTML
<button onclick="getNameValue()">Get Name</button>


This button will fire your getNameValue() JavaScript method.

Now we need t use the fetch API[^] to get the data you want.
This will occur asynchronously so the page isn't refreshed but instead the data is just retrieved.

Now, I don't know what domain you are retrieveing data from but you have to retrieve data from the same URL where your page is running or you get a CORS (cross-origin request) error.
JavaScript
function getNameValue(){
     fetch('https://www.codeproject.com')
       .then(response => response.text())
        .then(data => console.log(data));

}


the sample can be run by opening your Browser console (F12 in most browsers) while you are reading this page -- then copy just the 3 fetch lines and paste them on the console and hit <ENTER>.

When you do that you'll see that it fetches the main codeproject page as text()
and then uses that as the data input to a console.log(data) call which will display all the data in the console for you.

Obviously, this fetch call would contain a URL to the domain and specific URL which will return your data.
If you do this properly and return JSON from your endpoint then you can use response.json() which will get your data as JSON (JavaScript Object Notation) that will allow you to easily get your value out.
   
v2
Comments
Member 12505620 25-Sep-21 8:55am
   
This code doesn't work.
If you are using asp.net webform, then use OnClinetClick as shown:

ASP.NET
<pre><pre><asp:Button id="DatePicker" Text="Click Here" runat="server" OnClientClick="getNameValue()" onClick="Button1_Click" />



So this OnCientClick will execute on client side before passed to server.
   
I am sorry that I didn't tell the type of asp. I am using classic asp. I don't use a button. When I select the datepicker input value it will send this value into the next selectbox with onchange event. My input is like that :<input type="text" name="tarih" id="datepicker" size="21" onchange="getNameValue()" autocomplete="off" readonly/>
This works very well except refresh the page. All I want is not reload the page.
   
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900