I have a table created in a html form.
The first column displays data pulled from a web server and the second column allows for changing the value and then submitting the new value to the web server.
I also have another table that is pulling live data from the web server that needs to be refreshed every 20 seconds.
At the moment I have the entire page refreshing every 20 seconds.
The problem is when the page refreshes if you have started to type a value into the table cell the value is lost after the refresh.
I have tried some JavaScript to retain the values in cookies and this has worked so far. But I wondered if there was a way to simply stop the refresh from happening if the cursor has been selected in the input box in the table cell.
<form id=form1 name=f1 method=post action=/scripts/write-tags autocomplete=on>
<input type=hidden name=tag1 value=9>
<input type=hidden name=tag2 value=61>
<input type=hidden name=tag3 value=44>
<input type=hidden name=tag4 value=25>
<input type=hidden name=back value=/savetest.htm>
<input type=hidden name=page value=1>
<table id=data border="1" cellpadding="10" width="700" style="font-family:Arial; font-size:15px";>
<th>Operation</th><th>Value</th><th>New Value</th>
<tr>
<td width="400">Enter the Value of the desired motor RPM</td>
<td width="100">[[130]]</td>
<td width="100"><input type=text size=3 name=data1 value="[[9]]"></td>
</tr>
<tr>
<td width="400">Enter the Value of the Target FOP in feet (TVD)</td>
<td width="100">[[61]]</td>
<td width="100"><input type=text size=3 name=data2 value="[[61]]"></td>
</tr>
<tr>
<td width="400">Enter the Value of the Shutdown Delay in minutes</td>
<td width="100">[[256]]</td>
<td width="100"><input type=text size=3 name=data3 value="[[44]]"></td>
</tr>
<tr>
<td width="400">Enter the Value of the Flow Rate Delay in seconds</td>
<td width="100">[[24]]</td>
<td width="100"><input type=text size=3 name=data4 value="[[25]]"></td>
</tr>
<tr>
<td width="700"><input style="font-family:Arial; font-size:15px;"type=submit name=submit value= OK ></td>
</tr>
</table>
</form>
I have updated some example code. The web server is built into a PLC. The tag and data name refers to a value in the PLC. The value inside the [[]] is the value that needs to be refreshed and the input value is for changing the value. Apologies if this is too vague. I appreciate the help but cant post too much code for confidential reasons.
Instead of refreshing the whole page, you could download your data using AJAX in 20s intervals, then you won't need to refresh the whole page, so your input won't be lost :)
Try to reset the timer to 20 every time after user type.
If you add your code maybe I could help more...
is your refresh called by a setInterval ?
If it's true, simply do something like that :
var interval;
interval = setInterval(refreshPage(), 20000);
$("input").keypress(function(){
clearInterval(interval);
});
then restart interval when value is changed
Related
I have this HTML code in my JSP
<table>
<tr>
<td width="50%" > type your article :
</td>
<td width="50%">
<input type="text" name="article" size="50"/>
</td>
</tr>
</table>
I have in MYSQL database a table 'article' in which i have a column 'designation' , I want to propose a choice of 'designation' to the user according to what is being written.
note: i can not use a dropdownlist because i have more than 1000 designations
Thanks in Advance.
I think you can solve the problem using JQuery Lookup.
I'm building a robot using an AI platform to help people access government information (in the public domain). Is there a way of populating a html form of an external website using the information the user has provided and submitting and retrieving the information using javascript.
E.g. say the search form is on https://www.governmentportal.com/court-location , take the user's information obtained previously, autofilling the form, using a program to press search and returning the results? An example of such a form is:
<table width="100%" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="FormLabel">Rental postcode</td>
<td align="left">
<input name="txtPostCode" type="text" maxlength="8" id="txtPostCode"class="txt">
</td>
</tr>
<tr>
<td class="FormLabel">Tenant's Surname</td>
<td align="left">
<input name="txtSurname" type="text" maxlength="50" id="txtSurname" class="txt">
</td>
</tr>
<tr>
<td class="FormLabel">Month Deposit Paid</td>
<td align="left">
<select name="ddlDepositDateMonth" id="ddlDepositDateMonth" class="ddl"> <option value="mm">mm</option>
</select><select name="ddlDepositDateYear" id="ddlDepositDateYear" class="ddl">
<option value="yyyy">yyyy</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td align="left">
<a id="lnkSearch" class="SearchButton" href="javascript:__doPostBack('lnkSearch','')">Search ></a>
</td>
</tr>
</tbody></table>
Thank you.
It depends what goal you have and what possibilities those pages give you.
If those websites offer an API, you can easily use jQuery.ajax or axios for data fetching, passing the user input on.
If they don't offer an API you could send POST requests with curl (I think PHP supports that out of the box?) or if those sites need Javascript support you can use something like PhantomJS.
What you can't do is to kind of automatically fill out forms in front of the users eye. This needs to happen on the server side (unless we are not talking about viewing your page in a browser).
I making a context menu and it almost done, just left this problem for me, but i have no idea to do this:
This is the JS Fiddle
Get different value from input hidden to a single link, because I want to pass it into a controller action
<table>
<tr>
<td class="element">im here
<input type="hidden" id="theid" name="theid" value="1"/>
</td>
</tr>
<tr>
<td class="element">im there
<input type="hidden" id="theid" name="theid" value="2"/>
</td>
</tr>
<tr>
<td class="element">im where
<input type="hidden" id="theid" name="theid" value="3"/>
</td>
</tr>
</table>
<div type="context" class="menu"> // link
<label class="menuitem">Cancel this app</label>
</div>
I want to pass the value to theid , for example when right click im here the link should get the hidden value = 1 and so on, any suggestion to do that ? Thanks
The mouse event object contains the target you were clicking on. So you can access that, pass it to jQuery and do whatever you want with it, eg. accessing the ID of the input.
$(e.target).find('input').attr('id');
And as the other commentators, I'm hoping that your IDs are different ;)
Edit: I re-read your question, you just want the value. So you don't need the ID theid in your markup overall (for this usecase). Getting the value from the clicked element:
$(e.target).find('input').val();
And working, see the alert(): See this jsfiddle
I have a jsp form like this.
<form name="search" method="post" action="a.jsp" target="menu_page"
onSubmit="return(setSearchParameters);">
<tr>
<td class="srchtext"> Search No. :</td>
</tr>
<tr>
<td >
<input type="text" name="h_trans_code" class="password" onFocus="this.select();" size="18"></td>
</tr>
</form>
After inputting the search no and click the search button it will call a.jsp page. But Now I want to check the length of Search No & if the Search No length is equal to 14 digit, it should call the new jsp page "b.jsp" else should call "a.jsp" using javascript.
I am facing a problem. I have created a form where a user has to input the details about a candidate and also upload his/her image. The problem is that in the form there is a button that says "Click To Add More Candidate", so when this button is clicked the same form should reappear under a division called "moreCandidates". Now to achieve this how should I go about it? Things that are coming in my mind is as follows:
To create a function in javascript that exactly creates the form contents (ie. all the input fields,etc) and onclick of the button "Click To Add More Candidate", call the function under the mentioned division. I can do this as in the past I have done something very similar to this. However, this time I don't think it would be good idea to create the whole form again as I have written a PHP function in between to read a directory.
Or the second thought that I have is to have the form code written in a file called candidate.php and call that file with AJAX. The problem here could be that I might be calling the whole form again (whereas I just want to call the contents of the form like the candidate name, and other stuff)
I very confused at the moment, and help from you all would be greatly appreciated. Thanks in advance.
My html code:
<div id="candidateForm">
<table border="0">
<form method="post" action="formDetails.php" enctype="multipart/form-date">
<tr>
<td>Candidate Name:</td>
<td><input class="candidateForm" type="textbox" name="candidateName" placeholder="Candidate's Name"/></td>
</tr>
<tr>
<td>Enroll No:</td>
<td><input class="candidateForm" type="textbox" name="enrollNumber" placeholder="Enroll No"/></td>
</tr>
<tr>
<td>Candidate Image:</td>
<td><input class="candidateForm" type="file" name="candidateImage" placeholder="Select a Image"/></td>
</tr>
<tr>
<td>Cadidate Post:</td>
<?php
//This is the target folder that is going to be read.
$target="uploads/";
//I an using a directory function in PHP scandir() which scans tha contains of the give directory
$dir=scandir($target);
?>
<td>
<select name="candidatePost">
<option value="candidatePost" select="selected">---------Select---------</option>
<?php
foreach($dir as $folders)
{
//When we loop throung the target folder/directory we get this annoying two folder that is "." and ".." so just to rule then out i m using an IF condition
if($folders!="."&& $folders!="..")
//echo $folders;
echo "<option class='candidateForm' value=$folders>$folders</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td>About The Candidate:</td>
<td><textarea name="aboutCandidate" cols="40" rows="5"></textarea></td>
</tr>
<div id="moreCandidates"> </div>
<tr>
<td></td>
<td><input type="button" value="Click To Add More Candidate"></input> </td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="candidateFormSubmit" value="Press Here To Submit The Details" onclick=""/></td>
</tr>
</form>
</table>
</div>