Overview:
I have an HTML form that contains 10 radio buttons and 3 text areas with the following 3 buttons:
Enable Editing: The form input fields are disabled in this case (form fields are enabled/disabled depending on status). This button will enable input fields and will allow changes to be made to the form.
Save: save data to DB.
Cancel: This should "Discard changes" made to the form and restores the original values.
Note: The form gets populated from the DB. On "cancel" click I would like to restore the old data if any changes were made.
Issue: How can I implement an onclick method that will store data temporarily when "enable editing" button is clicked and another method that would restore the old form data(discard changes) when the "Cancel" button is clicked ?
What I have tried so far after looking at a similar question:
$(document).ready(function() {
$('#evaluationFormEdit').click(function() {
$('#evaluationForm').find(':input').each(function(i, elem) {
var input = $(elem);
input.data('initialState', input.val());
});
});
function restore() {
$('#evaluationForm').find(':input').each(function(i, elem) {
var input = $(elem);
input.val(input.data('initialState'));
});
}
$('#evaluationFormEditCancel').click(function() {
restore();
});
});
I replaced two line of code with
$(this).data("previous-value", $(this).val());
I guss this will work for you. here is my demo http://jsfiddle.net/0qL8bky6/
$(document).ready(function() {
$('#evaluationFormEdit').click(function() {
$('#evaluationForm').find(':input').each(function(i, elem) {
$(this).data("previous-value", $(this).val());
});
});
function restore() {
$('#evaluationForm').find(':input').each(function(i, elem) {
$(this).val($(this).data("previous-value"));
});
}
$('#evaluationFormEditCancel').click(function() {
restore();
});
});
In my opinion, save your old data by json variable and restore form when click "Cancel" button.
What you can do that is you can create an array A and when you click on the enable editing button you can store all the value of the field on that array(A) and keys would be the ids of the fields and the value would the fields value, so when you want to put the old values in the fields you can run the each function and put the old values in to the corresponding fields with their respected ids.
Like-
if you have three input fields which have id input1, input2, input3
and when you click on the enable editing button you can do.
var a = [];
$('input[type=text]').each(function(){
a.push({'input1':$('#input1').val(),'input2':$('#input2').val(),'input3':$('#input3').val()});
});
This will have all you old values and when you want to put the old values back to input fields you do like this.
$.each(a,function(key,data){
$('#'+key).val(data);
});
You can use
$('#evaluationFormEditCancel').click(function() {
$('#evaluationForm').find(':input').each(function(i, elem) {
// uncheck all checkbox here to make it default.
$(elem).val("");
});
});
Related
I have a hidden input field like this in jade:
input(name='saintForm[quotes][]', type='hidden')
I want to use jquery to add to this array from a dynamic unordered list, but not sure how. Here's my failing attempt:
$('#form').on('submit', function(e){
e.preventDefault();
$('.quote').each(function (i){
var item = $(this).text().replace(' (x)','');
$("input[name='saintForm[quotes][]']").push(item);
});
this.submit();
});
If you're just adding a value to the default form functionality you could create an input with a value.
// grab your form and wrap it in jQuery
var myForm = $('#form');
// list teo the submit event
myForm.on('submit', function(e) {
e.preventDefault();
$('li.quote').each(function() {
$('<input />', {
type: 'text', // input type
name: 'saintForm[quotes][]', // the name of the form input
value: $(this).text() // the text from the current list-item
}).appendTo(myForm); // append each input to the form
});
myForm.submit(); // submit the form
});
You can of course send all sorts of arbitrary data to the server easily with AJAX but if you are just using the normal form submit I guess this is a good way to do it.
I have a Form where there are three field and two buttons. FIDDLE
Clicking on Add optional Email Address button adds a new Email field which is fine. My issue is with Save Button. I am wanting the save button will remain disable until user click on the field or add any value in the input field.
So,
if a user click on any of the input field Save button will become
active
if a user put a value it will remain active.
if user clicks on the input but didn't give any value it will Change
to disable again.
Same for the New added input by Add optional Email Address
On my code it's not going back to disable state if no value given on the input after clicking and not working for newly added input. I am not sure the reason. Any help will save my day.
JS
$("body").on('focus', '.user-input input', function() {
$(".update-change").removeAttr('disabled');
}).blur(function() {
if ($("").val() == '') {
$(".update-change").attr('disabled', 'disabled');
}
});
$('.update-list-confirm').click(function(){
$(".update-change").attr('disabled', 'disabled');
});
// Add email
$("body").on('click', '.add-new-email', function() {
var newemail = '<div class="form-group"><em class="pull-right">Optional</em><input type="email" name="userEmail" class="form-control" id="" placeholder="mymail#mail.com"></div>';
$(newemail).insertBefore(this);
});
Try this to handle blur on the same input element
$("body").on('focus', '.user-input input', function() {
$(".update-change").removeAttr('disabled');
}).on ('blur', '.user-input input', function() {
if ($(this).val() === '') {
$(".update-change").attr('disabled', 'disabled');
}
});
Is this a typo? Change it with correct values:
if ($("").val() == '') {
I guess it should be:
if ($('[name="userEmail"]').val() == '') {
To disable the SAVE button if ANY of the text fields are blank, you should use this snippet of code:
$(':text').focusout(function () {
$(':text').each(function (i) {
if (this.value === '') {
$('.update-change').attr('disabled', 'disabled');
}
});
});
This way, when the SAVE button is clicked (and the :text fields are no longer in focus), each :text field is checked for a value.
I have the following code:
$(":input").bind("keyup change", function(e) {
var comboVal = $('.emailrequerido1').val()+$('.emailrequerido2').val()+$('.emailrequerido3').val()+$('.emailrequerido4').val()+$('.emailrequerido5').val();
if(comboVal == 'nullnull' || comboVal == ""){
$("#enviarForm").attr('disabled', true);
}else{
$("#enviarForm").removeAttr('disabled');
}
});
What I am trying to accomplish is that when you select a memorized value from the input box by double clicking in the box a history of inputs shows (these values are saved by the browser (I believe)) and if you choose one of these and the field has that text you selected the button should enable.
Here is a JSFiddle example: JSFiddle example
In the example I added a value to the first field since these dont memorize as I expalined before to show a demonstration of what I mean.
I have cleaned up the code a bit: http://jsfiddle.net/kam5B/1/
I've swapped the classes and ids so that the ids are unique, and the classes are common.
Here is a checkEmails function that runs the validation and enables/disables the checkbox.
checkEmails is run every time an input changes, and when the page loads the first time:
$(document).ready(function () {
function checkEmails() {
var nonempty = $('form .email_contactopadrino').filter(function() {
return $(this).val() != '';
});
if (nonempty.length) {
$('#enviarForm').removeAttr('disabled');
}
else {
$('#enviarForm').attr('disabled', true);
}
};
$('form').on('keyup change', '.email_contactopadrino', checkEmails);
checkEmails();
});
I have the scripts below one which checks all checkboxes in a group which works great, and another to pass the checkbox values over the pagination and all works fine the only problem is that when I click the check all box it checks all the pages on page 1 but when I click page 2 only the check all box is checked although the query is working fine. If I click all the checkboxes individually then they pass through the pagination fine, so I don't know why the check all button doesn't. I would like it so that when you click check all, all the boxes stay checked through the pagination as well.
here is my script that checks all checkboxes
<script type="text/javascript">
window.addEvent('domready', function() {
$$('li.head input[type=checkbox]').addEvent('click', function() {
this.getParent('ul').getElements('input[type=checkbox]').setProperty('checked', this.checked);
});
});
</script>
here is the script that remembers the checkboxes
var aa_checkbox;
function init_checkbox(){
//setup blank cb cookie
if(!Cookie.read('cb')){
Cookie.write('cb', JSON.encode({}));
}
//setup "associative array" to match what is currently in the cookie
aa_checkbox = JSON.decode(Cookie.read('cb'));
//set up each checkbox with class="remember_cb"
$$('input.remember_cb').each(function(el){
//mark checked if it is in the cookie
if(aa_checkbox[el.name]){
el.checked = 'checked'
}
//setup onclick event to put checkbox status in the
el.addEvent('click', function(){
if(el.checked){
aa_checkbox[el.name] = 1;
}else{
delete(aa_checkbox[el.name]);
}
})
})
//save aa_checkbox back into cookie upon leaving a page
window.onbeforeunload = function(){Cookie.write('cb', JSON.encode(aa_checkbox));};
setup_form();
return true;
}
function setup_form(){
//set up form so that it adds the inputs upon submit.
$$('form.remember_cb_form').each(function(form){
form.addEvent('submit', function(ev){
//clean up previously inserted inputs
var aa_hidden_insert = $$('input.hidden_insert');
$each(aa_hidden_insert, function(el){
el.parentNode.removeChild(el);
})
var el_form = this;
//insert hidden elements representing the values stored in aa_checkbox
$each(aa_checkbox, function(i_value, s_name){
if(i_value){
var el_input = document.createElement('input');
el_input.type = 'hidden';
el_input.value = i_value;
el_input.name = s_name;
el_input.setAttribute('class', 'hidden_insert');
el_form.appendChild(el_input);
}
});
});
});
}
window.addEvent('domready', init_checkbox);
If anyone can help me I would be very greatful, Thanks
It has to do with how your code works. I recommend that the check/un-check should affect the in-memory copy of the backing data. EG if you have an array representing the check boxes, set the check/uncheck in the array then render the array to check/uncheck the corresponding check box. That way, when you check all, all the array cells are set to checked! When you change from page to page, simply read the status of the corresponding array cell.
In my VB.NET project, I have a UI with some text input fields and a save/submit button. I want the save button to be in a disabled state on page load, and remain that way until a change is made to one of the inputs. And the save button should get disabled again if the values entered by the user are the same as they were at page load. So basically, the save button should be enabled only when there is an actual change.
How can I do this using jquery?
$(':input').change(
function(){
$("#submitButtonId").prop("disabled",false);
}
);
since you said it is dynamic, use on.
$(document).on("change", ":input",
function(){
$("#submitButtonId").prop("disabled",false);
}
);
You can handle that in the change event
$('input[type="text"]').on('change', function() {
// Change event fired..
$('input[type="submit"]').prop('disabled', false);
});
//This will bind all existing and dynamically added selects onChange to the handler
$(document).on('change', function(e) {
onChangeHandler();
}
// handle the event
function onChangeHandler() {
if (checkValues()) {
$('#yourButtonId').prop("disabled", false);
}
else {
$('#yourButtonId').prop("disabled", true);
}
}
// check all values against originals - data-* attributes are a good way to store data on
// an element. So have you can have:
<select id="id1" data-originalvalue="myValue"></select>
// compare the current value to the original value - if any one of them differ, return
// true
function checkValues() {
$.each($('select[data-originalvalue]'), function() {
if ($(this).val() !== $(this).attr(data-originalvalue){
return true;
}
return false;
});
}