Can I use onchange attribute for a cell of HTML table? - javascript

I have a table for which I pull the data from database. In each cell there in an edit image so when user clicks on it, there will be a pop up message and he can edit the data in the cell.( By using prompt() method). So I want to update the database whenever the data in a cell is changed, can I use onchange event attribute for a cell of a table? something like:
<td onchange="myFunction()">
if not, what kind of event attributes should I use?

No. onchange (or rather the change event) is only used for input fields.
The proper way to do this is to let your JavaScript that prompts for input (using prompt is ugly btw, why not show a text field in the cell?) update both the cell's content and send the AJAX request to store the new value on the server.

Related

how to filter table based on multiple columns automatically upon refresh without losing text in input boxes?

i'm currently using multifilter (a jquery plugin at https://tommyp.github.io/multifilter/) in my code. if you take a look at that link it shows you how it filters the table in realtime. my problem is that whatever text i enter into the input boxes are lost when i refresh the page. i figured out that if i set the input to autocomplete=on, like so:
<input autocomplete='on' class='filter' name='name' placeholder='name' data-col='name'/>
it will retain the values in the input boxes. however, it does not trigger the multifilter.js upon refresh requiring me to still type something into the input boxes.
how would i trigger the plugin upon refresh so that the table will automatically filter results based on whatever text was in the input boxes?
You won't be able to use autocomplete for this, since autocomplete is a feature that is used for something different (w3schools autocomplete):
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
A good solution to solving your problem is localStorage.
The following code is what you're looking for:
$(document).ready(function() {
var name = localStorage.getItem('name') || '';
$("#name").val(name);
$('.filter').multifilter(); // for filtering values in the table
$('#name').keyup(function(e) {
var name = $(this).val();
localStorage.setItem('name', name);
});
});
The above code uses the localStorage API to get a value that has already been set with a call to localStorage.setItem() and sets the value of the input equal to the value retrieved from the getItem() call. The code then checks everytime the user types something into the input and saves the value for later retrieval using localStorage.setItem().
This way, the value is persistent and each time the user refreshes the page, because the value is stored using localStorage, it loads the value into the input using localStorage (note that you do need to have 3rd party cookies enabled to use lcoalStorage).

How to make a dynamic HTML table repopulate after form is reopened based on saved value

I have created a form which uses a dropdown, based on the selection in this dropdown a few tables dynamically populate with dynamically created inputs. This all works properly.
The problem is that I have to place this form inside of another HTML/JS/JQuery based 3rd party system and the form will need to be closed and reopened multiple times on different computers of an intranet. From what I can tell, this system has a background script (probably using serialization?) that saves the user inputs for any fields that is an input/select/check which allows it to store forms with entered user input.
Given that this system is storing the data for my dropdown selection, I should be able to call my function again to "reset" the table I would think.
I have tried checking if the dropdown is not at the "default" and running the function for setting dropdowns and it did not work.
How can I have my table populate when the form is reloaded?
if (document.getElementById('cmblstPartNumber') != "Select Product"){
setDropdowns(document.getElementById('cmblstPartNumber'),document.getElementById('cmblstLine'));
}
This is the function declaration for my functional code to set the dropdowns.
function setDropdowns(cmblstPartNumber,cmblstLine) {
//Massive Switch statement
}
You can store the selected values in local storage and repopulate it when the form element is reloaded.
Clear the local storage when you are done
I was able to address my particular problem by creating hidden inputs that mirrored the possible created inputs. Then bound a function to an event that would assign the hidden input to the dynamic input.
//Create hidden mirror input to store the input
<input type="hidden" id="hVisual1" name="hVisual1">
//Check if field exists, then assign the hidden field the user input
<script>
if(document.getElementById('Visual1')){
document.getElementById('hVisual1').value = document.getElementById('Visual1').value;
}
</script>

Onselectedindexchanged does get fired sometime

Aspx page :
fileupload
dropdownlist subject
Textarea
User can write anything in textarea.There is no sequence, that user can first write text or upload file.Dropdownlist has onchange and selected indexchanged event.Onchange event calling javascript function which convert '<',to it's html encode character if textarea contain.On selectedindex change appropriate script of that subject code get added into textarea replacing previous one.It is not necessary that user should select subject for script,can write it's own.Every thing is working properly over here.When I selecting file other than text I want hide dropdownlist subject and want to make index at zero.
Suppose I uploaded text file,selected subject which inserted script into textarea,now I want to select img rather than text file,if I do, dropdownlist get disable and show first value document.getElementById('ddlSubject').selectedIndex = 0.Textarea is empty.Every thing is working properly here .But when I again select textfile,textarea and dropdownlist get enable.If I choose one subject which was selected previously,serverside event of dropdownlist did not get fired.If I choose other subject it call server side function.How to handle this
Please make sure you have the property of the control set as AutoPostBack = true. Furthermore, it'll be easier if you could share a code snippet.

Get element ID on click and send them to form

A client needs a system in which their customers will be able to check the photos (displayed on a grid) and send an e-mail (via a form placed below the photo grid) with the photos' IDs.
The first alternative that came in mind was apply the onclick to get the photos' ID, but I have no idea how to send them to the form.
Quite easily, just run the onclick event to get the id which you store in variable and then replace the form input tag value with this value:
var id; // contains image id
$("input").val(id);
or if you have more input tags then add id attribute to them and change corespondingly the selector. And then you can fire the submit button to post the form data.
Or more advanced yet in this case more appropriate way is to send data with ajax without the need of any form.

filling a form with parameter already selected using ajax

My goal untill now is to fill a form with values from a table (html table).
it is a kind of refreshing the form.
so the user who wants to modify the html table through the form must prefill the form with values wich he already selected.
I used the DOM to acces to each row and cell in the table and i used ajax to pass parameter to other jsp.
but Iam confused what shall be the next step to fill the form.
Just get the input element from DOM and set its value attribute.
document.getElementById('inputId').value = 'newValue';

Categories

Resources