Jquery revert textboxes back to their original values - javascript

I have a popup form with 4 textboxes, all of which have default values when the page loads.
Here's the scenario... The user has filled in the form with their details but decides not to submit the form and closes the popup. I want the values of the textboxes to revert to their default values when the user close the popup.
Here's my code so far.
$(".close").click( function() {
$(".popup").find("input").val("Default value of textbox");
});
Rather than inserting "Default value of textbox" as the value, I want it to be the actual default value.

You could put the default values in a 'data attribute' on the elements themselves...I'll create a fiddle to show this... As seen in this jsFiddle
I should also note that you can put the data attribute on the elements from the server...I'm just showing how you could do it all from the client...

// First store all the default values
var def_vals = [];
jQuery('#popup input[type="text"]').each(
function () {
def_vals[jQuery(this).attr('name')] = jQuery(this).val();
}
);
alert(def_vals['test']);
// Restore defaults on close
jQuery('#popup .closeButton').click( function () {
jQuery('#popup input[type=text]').each(
function() {
jQuery(this).val(def_vals[jQuery(this).attr('name')]);
}
);
});

By way of closure
// add to the place that opens the popup
$(".popup input").one(function(){
var value = $(this).val();
var that = this;
$(".close").one(function(){
$(that).val(value);
});
});

Related

Show/hide a select field on Edit page, based on database value

In one of "Add product" page, I've select field that shows/hides based on what we select on another select field. This is the code:
$(function() {
$('#warranty_periods').show();
$('#warranty_type').change(function(){
if($('#warranty_type').val() == '1') {
$('#warranty_periods').show();
} else {
$('#warranty_periods').hide();
}
});
});
My problem is how to hide it on the edit page if "warranty_type" was other than '1' while adding the product.
Thanks
If you want the same logic to be invoked when the page loads, then do exactly that. For example, you can define a function that you would use for the event you currently have as well as be immediately invoked. Something like this:
$(function() {
var toggleWarrantyPeriod = function(){
if($('#warranty_type').val() == '1') {
$('#warranty_periods').show();
} else {
$('#warranty_periods').hide();
}
};
toggleWarrantyPeriod();
$('#warranty_type').change(toggleWarrantyPeriod);
});
Try to logout the value of warranty_type using
console.log($('#warranty_type').val());
Check if you are getting the desired value

How can I include the value of a button in a form object?

I have a form with several buttons and upon submitting the form, I want the server side script to be able to read the values of the buttons that were clicked.
// someButton is created and appended inside an HTML form element
someButton.name = "foo";
someButton.onclick = function() {
this.value = "bar";
}
// more code
document.querySelector("button[class='submit']").onclick = function() {
google.script.run.processForm(document.querySelector("form"));
}
In the code above, the element referenced by someButton is nested inside a form. Also, it should be pretty clear but someButton is an arbitrary button that is different from the button in .querySelector().
When I go ahead and dismantle the form object from the server side using a code like this:
function processForm(form) {
for (var thing in form)
Logger.log(var + ": " + form[var]);
}
None of the buttons are anywhere to be found. Why?
The button value is not submitted with the form. You can pass it as a second parameter to your processForm method:
document.querySelector("button[class='submit']").onclick = function() {
google.script.run.processForm(document.querySelector("form"), document.getElementById("someButton").value);
}
function processForm(form, buttonvalue) {
Logger.log(buttonvalue);
}

jQuery load a function after a form has been submitted once only

I have 3 lists in HTML format in the same page. When ever an option is selected it is submitted and based on the selection in the first list, the second list is populated, then according to the selection of the second list the third list is populated.
Each time a choice is made the form is submitted. This is done using the following code which pertains to the HTML form:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" >
//Auto submit form
$(document).ready(function() {
$('#PrimaryCatForm, #SecondaryCatForm, #TertiaryCatForm').on('change', function() {
$(this).submit();
});
});
</script>
Everytime a selection is made I have another jquery to centralise the selection similar to this - http://jsfiddle.net/BA39h/1/
I use the followin jQuery
<script type="text/javascript" >
$(document).ready(function() {
$('#primary_cat_select, #secondary_cat_select, #tertiary_cat_select').on('change', function(){
var n = this.getAttribute('size'),
i = this.selectedIndex,
l = this.options.length;
this.selectedIndex = Math.min(l-1,i+n/2|0);
this.selectedIndex = Math.max(0,i+1-n/2|0);
this.selectedIndex = i;
})
});
</script>
When a selection is made, the selection is submitted. Unfortunately a few miliseconds after the selection is centred, the form is submitted and the selection looses it centralisation. I tried many methods to solve it but I didn't seem to manage.
The html options are populated using PHP and PDO.
You need to call the centre function on both element change and on page load:
$(document).ready(function () {
// put it into a reusable function
function centreSelected(el) {
var n = this.getAttribute('size'),
i = this.selectedIndex,
l = this.options.length;
this.selectedIndex = Math.min(l - 1, i + n / 2 | 0);
this.selectedIndex = Math.max(0, i + 1 - n / 2 | 0);
this.selectedIndex = i;
}
$('#primary_cat_select, #secondary_cat_select, #tertiary_cat_select')
// bind the change event
.on('change', centreSelected)
// apply it to the element now
.each(function () {
centreSelected.apply(this);
});
});
Updated fiddle
I see 2 routes for you to go:
either submit the form (reloads the page), set the selected attribute in HTML on the item and trigger the center script again (what you would need to do on page load anyways)
or use jQuery's $.post() with $().serialize() on submit, to just save the result (sending it to a php script) and leave the selection intact (no page reload)
I would prefer the second option for submitting and the first needed if you show the page .
$(document).ready(function() {
$('#PrimaryCatForm, #SecondaryCatForm, #TertiaryCatForm').on('change', function() {
$.post(document.location.href, $(this).serialize()).success(function() {
alert('saved');
});
});
});
This jQuery fiddle will show you how:
JS FIDDLE
Once document is ready it will select the first value of the list which is 1 in my example and automatically it will show the second list.
The 'getTheValueIntoPHPfile', use it to fetch data returned by your PHP file and you can use the .html() to populate the select html tags.
Once you re-select the first list it will hide the third list if it's visible and will automatically call the function 'getTheValueIntoPHPfile' to fetch the data and re-populate your second list.
$(document).ready(function(){
$('select.select').on('change', function(){
var self = $(this),
value = self.val(), // selected value
dataType = self.data('type'); // Select type (1st, 2nd and 3rd)
// Hide select third if change the first
if (dataType == 1 && !$('.second').hasClass('hide') && !$('.third').hasClass('hide'))
{
$('.third').addClass('hide');
// Show second select if hidden
} else if (dataType == 1 && $('.second').hasClass('hide')) {
$('.second').removeClass('hide');
// Show third select if hidden
} else if(dataType == 2 && $('.third').hasClass('hide')) {
$('.third').removeClass('hide');
}
// function to call to get the values from php
var valueText = getTheValueIntoPHPfile(value, dataType);
$('p.result').html(valueText);
})
// On page load automatic select the first option value of the first select
var f = $('select.first option:first-child');
f.val(f.val()).trigger('change');
});
function getTheValueIntoPHPfile(value, dataType)
{
return 'Value: ' + value +
'<br/>Select Type: ' + dataType;
// Put your jquery request to PHP here and return the values to the next select
}

Jquery not working when page is refreshed in Internet explorer

I am dealing with the following jQuery issue in IE.
For a form I need to replace the default placeholders fields, this is done by jquery, placeholder is hidden and the value of it is added to a position:absolute label on the input.
This all works as I want but, the problem I am facing; When I am filling down te form, the values are set (in a session). After submit I go to the second step. I can go back to the first stap by clicking a link.
This is the situation when I just fill down the form element OR I do a hard browser refresh
like F5.
When I just hit the link in the tempalte to go back one stap, this is the result
The custom placeholder (as a label in red) should be hidden but won't do this as I aspect I should have to. I am facing this issue only in IE (?)
Below some js code I am using;
$(function(e) {
//id itterator if the inputs don't have ids
if ($('input#firstname').val()) {
console.log( "ready!" );
$('.firstname-label').hide();
}
var phid=0;
$.fn.placeholder = function(){
return this.bind({
focus: function(){
$(this).parent().addClass('placeholder-focus');
},blur: function(){
$(this).parent().removeClass('placeholder-focus');
},'keyup input': function(){
$(this).parent().toggleClass('placeholder-changed', this.value!=='');
}
}).each(function(){
var $this = $(this);
//Adds an id to elements if absent
if(!this.id) this.id='ph_'+(phid++);
//Create input wrapper with label for placeholder. Also sets the for attribute to the id of the input if it exists.
$('<span class="placeholderWrap"><label class="'+this.id+'-label" for="'+this.id+'">'+$this.attr('placeholder')+'</label></span>')
.insertAfter($this)
.append($this);
//Disables default placeholder
//$this.attr('placeholder','').keyup();
});
};
console.log('set placeholders');
$('input').each(function() {
var input = $(this);
var id = $(this).attr('id');
if (!$(this).val() && $(this).attr('id') != 'photo') {
$('input#' + id).placeholder('');
console.log(id);
} else {
// do nothing
}
});
});
Thanks in advance!

Remove the selected item from a Kendo UI Multiselect Element

I got two Kendo ui multiselect elements on my page to select stores from a list. On the select event I have a function call where I check if the selected store is in another list.
If the selected item is already assigned to the other list i prompt a confirm. When the user click ok, then is ok, when clicks cancel i have to remove the selected item from the multiselect element.
Here is my function:
function checkStoreSelection(e) {
var selectedStore = this.dataSource.view()[e.item.index()];
var selectedStoreId = selectedStore.Id;
$.each(surveysData, function (index, surveyVal) {
// get each store
$.each(surveyVal.Stores, function (storesIndex, storesVal) {
// check if a store already assigned to another survey
if (selectedStoreId == storesVal.DBId) {
var answer = confirm('Some text here ... ');
if (answer) {
// nothing todo here
} else {
// have to remove the selected item
}
}
});
});
};
You can remove item from datasource dataSource.remove(item);
Check this example
http://jsfiddle.net/derickbailey/D4g8S/
Damn fool - Simple answer:
e.preventDefault();
Does what I need :-/
I´am sorry.

Categories