Refresh page after clearing all form fields (jquery) - javascript

Is it possible to refresh the page after clearing all the form fields? Is this a separate function or could it be added to my existing script.
function clear_form_elements(ele) {
$(ele).find(':input').each(function() {
switch(this.type) {
case 'password':
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
$(this).removeAttr("style");
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}

I do not know whether this will work really.But you can do this way as well in jquery :
$('#PageRefresh').click(function() {
location.reload();
});
this is rather easy and straight forward.

Related

I need this code with dynamicly

I have a header menu and i do not want to add for each menu link in switch case like this, how can i do it dynamic...
var sections = $(".href a");
var content = $("#load");
sections.click(function(){
switch(this.id){
case ('/p/settings/header-settings'):
$(content).load('/p/settings/header-settings #load');
window.history.pushState('user', 'user', '/p/settings/header-settings');
break;
case ('/p/settings/site-verifications'):
$(content).load('/p/settings/site-verifications #load');
window.history.pushState('user', 'user', '/p/settings/site-verifications');
break;
case ('/p/settings/analysis-settings'):
$(content).load('/p/settings/analysis-settings #load');
window.history.pushState('user', 'user', '/p/settings/header-settings');
break;
default:
$(content).load('/p #load' );
break;
}
});
Directly pass the id with respected place instead of switch .And do with on() for dynamically append element .Its will perform depend on your id
var sections = $(".href a");
var content = $("#load");
sections.on('click', function() {
var id = this.id;
if(condition) //add with some false condition as you wish for go to default statement s
{
$(content).load('/p #load' );
}else{
$(content).load(id + ' #load');
window.history.pushState('user', 'user', id);
}
});
Use this JS instead of your switch case. if you don't worry about default case
sections.click(function(){
$(content).load(this.id+' #load');
window.history.pushState('user', 'user', this.id);
});
If you want to take care of default condition too then you can use simplified switch case as shown below.
sections.click(function(){
switch(this.id){
case ('/p/settings/header-settings'):
case ('/p/settings/site-verifications'):
case ('/p/settings/analysis-settings'):
//For more case just add here the below code remain same
$(content).load(this.id+' #load');
window.history.pushState('user', 'user', this.id);
break;
default:
$(content).load('/p #load' );
break;
}
});

Two Drop Down options with a button

I am trying to get this work.
I have 2 dropdown lists. Once the user select the required value and click the button. The button will load specific URL based on the selected options in both the dropdowns.
https://jsfiddle.net/vs3q879c/
<script>
$(document).ready(function() {
OR = document.getElementById("orientation");
SZ = document.getElementById("size");
ORSZ = OR + SZ;
switch (ORSZ) {
case PA5:
window.location.href = "www.xxxx.wwww/one.html";
break;
case PA4:
window.location.href = "www.xxxx.wwww/two.html";
break;
case PA3:
window.location.href = "www.xxxx.wwww/three.html";
break;
case LA5:
window.location.href = "www.xxxx.wwww/four.html";
break;
case LA4:
window.location.href = "www.xxxx.wwww/five.html";
break;
case LA3:
window.location.href = "www.xxxx.wwww/six.html";
break;
default:
default none();
}
</script>
You have a few mistakes. Instead of using window.location.href, try using window.open("www.my-url.com").
Also, you have 2 default statements in your switch clause, try something like this:
switch (ORSZ) {
case PA5:
window.location.href = "www.xxxx.wwww/one.html";
break;
case PA4:
window.location.href = "www.xxxx.wwww/two.html";
break;
case PA3:
window.location.href = "www.xxxx.wwww/three.html";
break;
case LA5:
window.location.href = "www.xxxx.wwww/four.html";
break;
case LA4:
window.location.href = "www.xxxx.wwww/five.html";
break;
case LA3:
window.location.href = "www.xxxx.wwww/six.html";
break;
default: none();
}
Lastly, when you're getting the select elements by ID, you're grabbing the object instead of the selected value. To fix that, you need to use .value:
OR = document.getElementById("orientation").value;
SZ = document.getElementById("size").value;
ORSZ = OR + SZ;
DEMO: http://jsbin.com/tivocodeza/edit?html,js,output
Yeah, the above - grab the value of the input, not the element.
You are also using jQuery in your fiddle $(document).ready();
if you are doing that, you can use jQuery for everything. Not sure you want that but in case you do, here is a code suggestion:
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
var ORSZ = $('#orientation').val() + $('size').val();
switch (ORSZ) {
case PA5:
window.open("www.xxxx.wwww/one.html", '_blank');
break;
//e
//t
//c
});
});
I added the id="submit" to your button to make it easier to select.

Call to action are not working inside scrollable sections of fullpage.js

I've embedded fullpage.js in my page and on the sections which have scroll in it, Links, submit buttons and checkboxes doesn't seems to be working in it.
I tried putting an alert on click of a link for testing
$('.project-image').click(function(){
alert('hola')
})
even this simple thing is not working and there is no error on console.
it looks like something is preventing clicks.
Thanks guys I figured it out.
after removing switch case: a.preventDefault(); from handleEvent: function(a) from the file scrolloverflow.js all the links are working now.
I was freaking out before so for others I am attaching the sample code for reference.
handleEvent: function(a) {
switch (a.type) {
case "touchstart":
case "pointerdown":
case "MSPointerDown":
case "mousedown":
this._start(a);
break;
case "touchmove":
case "pointermove":
case "MSPointerMove":
case "mousemove":
this._move(a);
break;
case "touchend":
case "pointerup":
case "MSPointerUp":
case "mouseup":
case "touchcancel":
case "pointercancel":
case "MSPointerCancel":
case "mousecancel":
this._end(a);
break;
case "orientationchange":
case "resize":
this._resize();
break;
case "transitionend":
case "webkitTransitionEnd":
case "oTransitionEnd":
case "MSTransitionEnd":
this._transitionEnd(a);
break;
case "wheel":
case "DOMMouseScroll":
case "mousewheel":
this._wheel(a);
break;
case "keydown":
this._key(a);
break;
case "click":
this.enabled && !a._constructed && (a.preventDefault(), a.stopPropagation())
}
}
Just remove the last case "click"

Determining the :input type in jQuery

I'm running an .each() loop on all my form elements. I cannot find a way to determine the input type (whether it's a checkbox, text, select, textarea etc...).
Any ideas?
// When submitting
$("input[name='event_form_submit']").click(function() {
$("form[name='tepg_form_processor'] :input").each(function() {
console.log($(this).attr("type"));
// Determine whether this is a select, input etc?
});
return false;
});
$("form[name='test'] :input").each(function() {
if(this.tagName == "INPUT") {
console.log(this.tagName + ": " + this.type);
}
else
console.log(this.tagName);
});
Fiddle: http://jsfiddle.net/samliew/YSsvp/8/
Available Input Element Types
I'd suggest:
$("form[name='test'] :input").each(function() {
/* gets the type of the element ('checkbox','text','radio', etc
if there's no 'type' then it retrieves the tagName of the
element instead 'select','textarea', etc */
var inputType = this.type || this.tagName.toLowerCase();
console.log(inputType);
/* then does uses a switch to do something depending
on what you want to do */
switch (inputType) {
case 'text':
// do something with text-inputs
break;
case 'radio':
// do something with radio-inputs
break;
case 'select':
// do something with select-elements
break;
// ...etc...
default:
// do something with other elements, element-types
break;
}
});
JS Fiddle demo.
Try this (jsfiddle):
$("form[name='test'] :input").each(function() {
alert(this.type);
});

Button Switch case

I can't seem to get this to work in jquery. I am using this code as an alternative to having to define each button, however this does not work :/
http://jsfiddle.net/pufamuf/FV4jW/1/
Also, I was wondering if/how I can use more than one statement for each case. Thank you :)
You need to add a break after each case in your switch statement. Updated JSFiddle here.
From Wikipedia:
break; is optional; however, it is usually needed, since otherwise code execution will continue to the body of the next case block.
Add a break statement to the end of the last case as a precautionary measure, in case additional cases are added later.
Updated Javascript:
$("input[type='button']").click(function() {
switch(this.id) {
case 'buttonone': $("#content").html("Content changed"); break; //notice BREAK
case 'buttontwo': $("#content").html("Content changed again"); break;
}
});
$("input[type='button']").click(function() {
switch (this.id) {
case 'buttonone':
$("#content").html("Content changed");
break;
case 'buttontwo':
$("#content").html("Content changed again");
break;
}
});
$("input[type='button']").click(function() {
switch(this.id) {
case 'buttonone' :
$("#content").html("Content changed");
break;
case 'buttontwo' :
$("#content").html("Content changed again");
break;
}
});
$("input[type='button']").click(function() {
switch($(this).attr('id')) {
case 'buttonone' : $("#content").html("Content changed"); break;
case 'buttontwo' : $("#content").html("Content changed again"); break;
}
});
You forgot the break after each case, had an extra )} at the end and also you need to use $(this).attr('id') instead of this.id

Categories