$_Post data returns blank Ajax - php

I have a form. I would like to get the input information and send it to the database via 'update_user_meta', however $_POST['this-user'] is giving a blank entry in the database.
The '$user_id' and '$meta_key' are posting to the database but the '$meta_value' is blank.
When I console log $_POST through ajax I get a blank entry in console. When I run .val() in jQuery I also get a blank entry not undefined or NULL.
I have tried having the data section of the code be
data: {
'action': 'hide_this',
'this-user': this-user,
'hidebtn2': hidebtn2
},
However a dash can't be in function i.e 'function doAjaxRequest4(hidebtn2,this-user)' is not allowed.
Insight is appreciated.
PHP
add_action('wp_ajax_hide_this', 'hide_this_by_id');
add_action('wp_ajax_nopriv_hide_this', 'hide_this_by_id');
function hide_this_by_id()
{
global $wpdb;
$labelID4 = 0;
$postdVlaue2 = $_POST['hidebtn2'];
$this_user = $_POST['this-user'];
$alredyclick3 = 0;
$not_loggedin = 0;
$userlvlMeta2 = 0;
if (is_user_logged_in()) {
$member_id = SwpmMemberUtils::get_logged_in_members_id();
$query = "SELECT * FROM " . $wpdb->prefix . "swpm_members_tbl WHERE member_id = %d";
$userData = $wpdb->get_row($wpdb->prepare($query, $member_id));
$membership_levels = $userData->membership_level;
$labelID4 = $membership_levels;
} else {
$not_loggedin = 1;
}
if ($labelID4 == 10 ) {
$userlvlMeta2 = 1;
$alredyclick3 = get_user_meta($member_id, 'hidden-info', true);
if (empty($alredyclick3) && $postdVlaue2 == 1) {
update_user_meta($member_id, 'hidden-info', $postdVlaue2);
update_user_meta($member_id, 'this-user', $this_user);
$alredyclick3 = 1;
}
}
if ($alredyclick3 == 1) {
$this_hide2 = 1;
} else {
$this_hide2 = 0;
}
if ($userlvlMeta2 == 1) {
$this_Meta2 = 1;
} else {
$this_Meta2 = 0;
}
$return4 = array(
'hIdethis2' => $this_hide2,
'userlvlMeta2' => $this_Meta2,
'userlvlNolog' => $not_loggedin,
'levelid4' => $labelID4,
'test' =>$this_user
);
echo json_encode($return4);
die();
}
jQuery
function doAjaxRequest4(hidebtn2,getthisInfo) {
var getthisInfo = jQuery('.this-user > input').val();
console.log(getthisInfo);
jQuery.ajax({
url: ajax_sib_front_object.ajax_url,
data: {
'action': 'hide_this',
'this-user': getthisInfo,
'hidebtn2': hidebtn2
},
dataType: 'JSON',
type: "post",
success: function (data) {
console.log(data.test);
var input = jQuery('.this-user > input');
var input2 = jQuery('.this-number > input');
var is_name = input.length > 3;
var is_name2 = input2.length > 3;
if (!data.thisdisc2 == 1 && data.userlvlMeta2 == 1) {
jQuery("#this_col_1").addClass("enable_this");
} else if (data.thisdisc2 == 1 && is_name && is_name2 ) {
jQuery("#this_col_1").removeClass("enable_this");
jQuery("#this_col_2").addClass("enable_this");
}
}
});
}
Function Called by
if ($('body').is('.page-id-9999') || $('body').is('.page-id-1111')) {
var thisbtn = document.querySelector('#this_verf_form > div > .wpcf7');
thisbtn.addEventListener('wpcf7submit', function (event) {
var status = event.detail.status;
console.log(status);
if (status === 'mail_sent') {
jQuery('#this_submtID').val("Submitted");
}
setTimeout(function () {
doAjaxRequest4(1);
}, 3500);
}, false);
}
HTML
<div role="form" class="wpcf7" id="wpcf7-f9999-p9999-o1" lang="en-US" dir="ltr">
<div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div>
<form action="/mysite/#wpcf7-f9999-p9999-o1" method="post" class="wpcf7-form init" novalidate="novalidate" data-status="init">
<div class="vc_row" id="this_row">
<div class="vc_col-sm-5">
<span class="wpcf7-form-control-wrap this-user"><input type="text" name="this-user" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="placeholder"></span>
</div>
<input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="sub_id">
</div>

Related

the script (Tagging with multi-value select boxes) cant show when edit

I'm using this feature https://select2.org/tagging#tagging-with-multi-value-select-boxes
(Tagging with multi-value select boxes) in view
the index can be used properly as in the picture
but when i edit the feature it can't (Tagging with multi-value select boxes) in edit
please help me to solve this.
this my blade
#elseif($dataform['type']=='multiple_advance')
<div class="col-sm-{{$dataform['col'] ?? 12}}">
<label class="form-label"><b>{{$dataform['label']}}</b></label>
<div class="form-group">
<select name="{{$dataform['field']}}" id="{{$dataform['field']}}" multiple="multiple" class="form-control {{$dataform['field']}}">
<option value="">{{$dataform['default']}}</option>
#foreach($dataform['combodata'] as $key => $combodata)
<option value="{{$combodata['comboValue']}}">{{$combodata['comboLabel']}}</option>
#endforeach
</select>
<small class="form-text text-muted">{{$dataform['keterangan']}}</small>
<script>
$(".{{$dataform['field']}}").select2({
placeholder: "{{$dataform['default']}}",
tags: true
});
</script>
</div>
</div>
this is my javascript
function grid_edit(id, primaryKey) {
var data = document.getElementById('alldata').value;
var dataobj = JSON.parse(data).data;
for (var i = 0; i < dataobj.length; i++) {
var a = 'dataobj[i].' + primaryKey.id;
// console.log(a);
if (eval(a) == id) {
var field = document.getElementById('formAllField').value;
var fieldobj = JSON.parse(field);
//masukkan PK dulu
document.getElementById(primaryKey.id).value = id;
//masukkan field yang lain
for (var j = 0; j < fieldobj.length; j++) {
var b = 'dataobj[i].' + fieldobj[j].field;
if (fieldobj[j].type != 'password') {
if (fieldobj[j].type == 'combo') {
$("#" + fieldobj[j].field).val(eval(b)).find(':selected').trigger('change');
} else if (fieldobj[j].type == 'autocomplete') {
setAutocompleteVal(fieldobj[j].url, eval(b), fieldobj[j].text, fieldobj[j].field);
} else if (fieldobj[j].type == 'image') {
// document.getElementById(fieldobj[j].field).value = String(eval(b));
} else if (fieldobj[j].type == 'summernote_advance') {
$('#' + fieldobj[j].field).summernote("code", eval(b));
// console.log(eval(b));
} else if (fieldobj[j].type == 'multiple') {
//set value from multiple select
var multiple = eval(b).split(',');
$("#" + fieldobj[j].field).select2().val(multiple).trigger('change');
} else if (fieldobj[j].type == 'multiple_advance') {
//set value from multiple select
var multiple = eval(b).split(',');
console.log(multiple);
$("#" + fieldobj[j].field).select2().val(multiple).trigger('change');
} else {
document.getElementById(fieldobj[j].field).value = eval(b);
}
}
}
}
}
}

JQuery Ajax Post sometimes works

I have an issue with JQuery and Ajax. Sometimes my code works just fine, sometimes it just will not. Other times I need to press a down arrow once in order to make the up arrows work, which is strange enough...
In IE or in Firefox, the lack of response happens more rarely than it does in Chrome.
The website in question is here:
http://www.dungeoncrawler.com/kickstarter_2013/calculator/
If you need to login, try:
ID: webmaster#geoste.ca
Pass: 123456789
Here is an example of my code:
Javascript JQuery function : first either chnQuantUp or chnQuantDn is called, and then the data gets passed to doCrtUpd which does the actual JQuery call.
function doCrtUpd(crtID,itmAmt,itmStrID)
{
// Call AJAX to update cart quantities
if (crtID)
{
$.ajax({
type: 'POST',
url: 'inc-kspldgman.php',
data: {cartordrnum: crtID,itmamt: itmAmt,storeitmkey: itmStrID, doaction: "UPDITM"},
async: true,
success: function (d)
{
reLoadDivs();
},
error: function (d)
{
alert(d);
}
});
}
}
function chnQuantUp(frmEle,frmEleID,crtID,itmStrID)
{
tmpvar2 = frmEle + frmEleID;
tmpvar1 = eval("document.frmStrItms."+ tmpvar2 +".value");
if (isNaN(tmpvar1))
{
tmpvar1 = 1;
}
else
{
tmpvar1 = parseInt(tmpvar1);
tmpvar1++;
}
eval("document.frmStrItms."+ tmpvar2 +".value = " + tmpvar1);
doCrtUpd(crtID,tmpvar1,itmStrID);
}
function chnQuantDn(frmEle,frmEleID,crtID,itmStrID)
{
tmpvar2 = frmEle + frmEleID;
tmpvar1 = eval("document.frmStrItms."+ tmpvar2 +".value");
if (isNaN(tmpvar1))
{
tmpvar1 = 0;
}
else
{
tmpvar1 = parseInt(tmpvar1);
}
tmpvar1--;
if (tmpvar1 < 0)
{
tmpvar1 = 0;
}
eval("document.frmStrItms."+ tmpvar2 +".value = " + tmpvar1);
doCrtUpd(crtID,tmpvar1,itmStrID);
}
Example of my HTML, one of the store items:
<div name="frmEle14" id="frmEle14" class="item" style=" background-image: url(./gallery/calc_ID_84.png);">
<div class="item_name">GREENKNEE, PPM</div>
<div class="item_count_5">
<div align="center">
<img src="images/calc_arrow_up_lw.jpg" border="0" class="arrow_btn1" /><br />
<input type="text" name="frmeleamt14" id="frmeleamt14" class="count_box" value="0" size="3" maxlength="3" onkeyup="javascript:doManChng('0',document.frmStrItms.frmeleamt14.value,'38','frmeleamt14');" /><br />
<input type="hidden" name="frmelesku14" id="frmelesku14" value="GVN-DCM-0005-CHAMP-PPM" />
<input type="hidden" name="frmelesalecode14" id="frmelesalecode14" value="NONE" />
<input type="hidden" name="frmeleitmkey14" id="frmeleitmkey14" value="38" />
<input type="hidden" name="frmgvnlinekey14" id="frmgvnlinekey14" value="0" />
<img src="images/calc_arrow_down_lw.jpg" border="0" class="arrow_btn2" />
<input type="hidden" name="frmelepicnme14" id="frmelepicnme14" value="calc_ID_84.png" />
</div>
</div>
<div class="item_price">$3.00</div>
</div>
And the PHP code that handles the actual addition to the database:
if ($cartordrnum)
{
// Start UPDATE
if ($doaction == "UPDITM")
{
$rspns = "";
// Get store item's data that we need, such as price per unit
$sql = "SELECT item_unitprice,salecode FROM store_items WHERE itemkey = ".$storeitmkey.";";
$getitmdata1 = mysqli_query($conn,$sql);
$getitmdata = mysqli_fetch_array($getitmdata1);
$itemunitprice = $getitmdata['item_unitprice'];
settype($itemunitprice,"float");
$salecode = $getitmdata['salecode'];
settype($salecode,"string");
$getitmdata = null;
$getitmdata1 = null;
// Do new item total if it has not already been calculated via salecode
if ($itmttl == 0)
{
$itmttl = ($itmamt * $itemunitprice);
}
$gvnlinekey = 0;
$dbitmamt = 0;
$sql = "SELECT lineitmkey, linequant FROM gvn_lineitems WHERE storeitmkey = ".$storeitmkey." AND code_note IS NULL ORDER BY lineitmkey DESC LIMIT 0,1;";
$chklineitm1 = mysqli_query($conn,$sql);
if (mysqli_num_rows($chklineitm1))
{
$chklineitm = mysqli_fetch_array($chklineitm1);
$gvnlinekey = $chklineitm['lineitmkey'];
settype($gvnlinekey,"integer");
$dbitmamt = $chklineitm['linequant'];
settype($dbitmamt,"integer");
}
$chklineitm = null;
if ($gvnlinekey)
{
if ($itmamt)
{
// Check if amounts have changed.
if ($dbitmamt != $itmamt)
{
// We have a change, so do an update.
// Do DB update
$sql = "UPDATE gvn_lineitems SET linequant = ".$itmamt.", linesubttl = ".$itmttl.", linettl = ".$itmttl." WHERE lineitmkey = ".$gvnlinekey.";";
if (mysqli_query($conn,$sql))
{
$rspns = "UPDATED";
}
}
}
else
{
// Delete the lineitem because it has a zero or negative amount
$sql = "DELETE FROM gvn_lineitems WHERE lineitmkey = ".$gvnlinekey." AND code_note IS NULL;";
if (!mysqli_query($conn,$sql))
{
$rspns = "DELETED1";
}
}
}
else
{
// Insert new line item
if ($itmamt > 0)
{
$sql = "INSERT INTO gvn_lineitems (ordrnumkey,storeitmkey,linequant,linesubttl,linettl) VALUES (".$cartordrnum.",".$storeitmkey.",".$itmamt.",".$itmttl.",".$itmttl.");";
if (mysqli_query($conn,$sql))
{
$rspns = "ADDED";
}
}
else
{
// Delete the lineitem because it has a zero or negative amount
$sql = "DELETE FROM gvn_lineitems WHERE storeitmkey = ".$storeitmkey." AND code_note IS NULL;";
if(mysqli_query($conn,$sql))
{
$rspns = "DELETED2";
}
}
}
$chklineitm1 = null;
//echo $rspns;
}

Ajax call isn't update my rows

I want to update my database with the ids of characters, but when I drop them into the slot, it doesn't update the rows I want it to update. My question is can you point me in the right direction of how I can code this properly or fix my errors?
function updateTeam(){
var team = '', slot = [];
if($('input[name=s0]').val()!=""){
slot.push($('input[name=s0]').val());
}
if($('input[name=s1]').val()!=""){
slot.push($('input[name=s1]').val());
}
if($('input[name=s2]').val()!=""){
slot.push($('input[name=s2]').val());
}
$.each(slot, function(i,e){
if(i == 0) team = e;
else team = team + ',' + e;
});
$.ajax({
url : _path + "/core/ajax.php",
type : 'POST',
data : { f: 'setTeam', i: team},
dataType : 'json',
success : function(data) {
if(data.error){
errorMessage('Error: ' + data.error, data.error, data.error);
}
}
});
}
Php
function clean($content) {
$content = mysql_real_escape_string(htmlspecialchars($content));
return $content;
}
//Update the user team.
if (isset($_POST['f']) && $_POST['f'] == 'updateTeam') {
if (isset($_POST['s0'])) {
$cid1 = $secure->clean($_POST['s0']);
} else {
$cid1 = '1';
}
if (isset($_POST['s1'])) {
$cid2 = $secure->clean($_POST['s1']);
} else {
$cid2 = '2';
}
if (isset($_POST['s2'])) {
$cid1 = $secure->clean($_POST['s2']);
} else {
$cid1 = '3';
}
$updateTeam = $db->query("UPDATE accounts SET cid1 = '$cid1', cid2 = '$cid2', cid3 = '$cid3' WHERE id = '$id'");
}
When i inspect the element with Google Chrome it says i:1,5,2. Show how would I update my rows so that the 1 in "i"= $cid1, the 5=$cid2, and the 2= cid3, is my php code wrong?
Html:
<div id="droppable_slots" class="current_team">
<div class="slot 1">1</div>
<input type="hidden" name="s0" value="10">
<div class="slot 2">2</div>
<input type="hidden" name="s1" value="7">
<div class="slot 3">3</div>
<input type="hidden" name="s2" value="3">
</div>
Since you are sending a csv with a the key of i, you need to get your values from $_POST['i'] by exploding on the ,. So your code could be updated to something like-
//Update the user team.
if (isset($_POST['f']) && $_POST['f'] == 'updateTeam') {
//Explode the i post
if (isset($_POST['i'])) {
$vals = explode("," , $_POST['i'] );
}
if (isset($vals[0])) {
$cid1 = $secure->clean($vals[0]);
} else {
$cid1 = '1';
}
if (isset($vals[1])) {
$cid2 = $secure->clean($vals[1]);
} else {
$cid2 = '2';
}
if (isset($vals[2])) {
$cid1 = $secure->clean($vals[2]);
} else {
$cid1 = '3';
}
$updateTeam = $db->query("UPDATE accounts SET cid1 = '$cid1', cid2 = '$cid2', cid3 = '$cid3' WHERE id = '$id'");
}

How to submit an iframe sub-form within main form using jQuery/AJAX?

I am using a jQuery plugin called Stepy, which is based of the FormToWizard plugin, to allow users to complete a 10-step form.
Using the next/back attributes, I've added a function to post data between steps so the user can save their work and come back at a later day if they'd like.
One of my steps allows the user to add items to a form within an iframe (to post data to a separate table). I'd like it to function so that when the user moves between steps, the items in the iframe post to their separate table as well. Is there a way to submit the form within the iframe between steps (i.e. submit iframe sub-form when main form submits)?
I am using PHP and MySQL.
Any help you could provide would be amazing!
Javascript:
$(function() {
$('#custom').stepy({
backLabel: 'Back',
block: true,
errorImage: true,
nextLabel: 'Next',
titleClick: true,
validate: false,
legend: false,
back: function(index) {
$.post('../../process.php')
}
next: function(index) {
$.post('../../process.php')
}
});
});
HTML:
<html>
<body>
<form id="custom" name="custom">
<fieldset title="Thread 1">
<legend>description one</legend>
<label>Question A:</label>
<input type="text" id="question_a" name="question_a" class="required">
<label>Question B:</label>
<input type="text" id="question_b" name="question_b">
</fieldset>
<fieldset title="Thread 2">
<legend>description two</legend>
<iframe src="../../list_form.php" width="100%" height="300"></iframe>
</fieldset>
<fieldset title="Thread 3">
<legend>description three</legend>
<label>Question C:</label>
<input type="text" id="question_c" name="question_c" class="required">
</fieldset>
<input type="submit" class="finish" value="Finish!">
</form>
</body>
</html>
iframe
<html>
<body>
<form id="sub_form" name="sub_form">
<label>Question 1:</label>
<input type="text" id="question_1" name="question_1">
<label>Question 2:</label>
<input type="text" id="question_2" name="question_2">
</form>
</body>
</html>
stepy.js
;(function($) {
var methods = {
init: function(options) {
return this.each(function() {
var opt = $.extend({}, $.fn.stepy.defaults, options),
$this = $(this).data('options', opt),
id = $this.attr('id');
if (id === undefined) {
id = 'stepy-' + $this.index();
$this.attr('id', id);
}
var $titlesWrapper = $('<ul/>', { id: id + '-titles', 'class': 'stepy-titles' });
if (opt.titleTarget) {
$(opt.titleTarget).html($titlesWrapper);
} else {
$titlesWrapper.insertBefore($this);
}
if (opt.validate) {
$this.append('<div class="stepy-error"/>');
}
var $steps = $this.children('fieldset'),
$step = undefined,
$legend = undefined,
description = '',
title = '';
$steps.each(function(index) {
$step = $(this);
$step
.addClass('step')
.attr('id', id + '-step-' + index)
.append('<p id="' + id + '-buttons-' + index + '" class="' + id + '-buttons"/>');
$legend = $step.children('legend');
if (!opt.legend) {
$legend.hide();
}
description = '';
if (opt.description) {
if ($legend.length) {
description = '<span>' + $legend.html() + '</span>';
} else {
$.error(id + ': the legend element of the step ' + (index + 1) + ' is required to set the description!');
}
}
title = $step.attr('title');
title = (title != '') ? '<div>' + title + '</div>': '--';
$titlesWrapper.append('<li id="' + id + '-title-' + index + '">' + title + description + '</li>');
if (index == 0) {
if ($steps.length > 1) {
methods.createNextButton.call($this, index);
}
} else {
methods.createBackButton.call($this, index);
$step.hide();
if (index < $steps.length - 1) {
methods.createNextButton.call($this, index);
}
}
});
var $titles = $titlesWrapper.children();
$titles.first().addClass('current-step');
var $finish = $this.children('.finish');
if (opt.finishButton) {
if ($finish.length) {
var isForm = $this.is('form'),
onSubmit = undefined;
if (opt.finish && isForm) {
onSubmit = $this.attr('onsubmit');
$this.attr('onsubmit', 'return false;');
}
$finish.click(function(evt) {
if (opt.finish && !methods.execute.call($this, opt.finish, $steps.length - 1)) {
evt.preventDefault();
} else {
if (isForm) {
if (onSubmit) {
$this.attr('onsubmit', onSubmit);
} else {
$this.removeAttr('onsubmit');
}
var isSubmit = $finish.attr('type') == 'submit';
if (!isSubmit && (!opt.validate || methods.validate.call($this, $steps.length - 1))) {
$this.submit();
}
}
}
});
$finish.appendTo($this.find('p:last'));
} else {
$.error(id + ': element with class name "finish" missing!');
}
}
if (opt.titleClick) {
$titles.click(function() {
var array = $titles.filter('.current-step').attr('id').split('-'), // TODO: try keep the number in an attribute.
current = parseInt(array[array.length - 1], 10),
clicked = $(this).index();
if (clicked > current) {
if (opt.next && !methods.execute.call($this, opt.next, clicked)) {
return false;
}
} else if (clicked < current) {
if (opt.back && !methods.execute.call($this, opt.back, clicked)) {
return false;
}
}
if (clicked != current) {
methods.step.call($this, (clicked) + 1);
}
});
} else {
$titles.css('cursor', 'default');
}
$steps.delegate('input[type="text"], input[type="password"]', 'keypress', function(evt) {
var key = (evt.keyCode ? evt.keyCode : evt.which);
if (key == 13) {
evt.preventDefault();
var $buttons = $(this).parent().children('.' + id + '-buttons');
if ($buttons.length) {
var $next = $buttons.children('.button right-aligned');
if ($next.length) {
$next.click();
} else {
var $finish = $buttons.children('.finish');
if ($finish.length) {
$finish.click();
}
}
}
}
});
$steps.first().find(':input:visible:enabled').first().select().focus();
});
}, createBackButton: function(index) {
var $this = this,
id = this.attr('id'),
opt = this.data('options');
$('<a/>', { id: id + '-back-' + index, href: 'javascript:void(0);', 'class': 'button left-aligned', html: opt.backLabel }).click(function() {
if (!opt.back || methods.execute.call($this, opt.back, index - 1)) {
methods.step.call($this, (index - 1) + 1);
}
}).appendTo($('#' + id + '-buttons-' + index));
}, createNextButton: function(index) {
var $this = this,
id = this.attr('id'),
opt = this.data('options');
$('<a/>', { id: id + '-next-' + index, href: 'javascript:void(0);', 'class': 'button right-aligned', html: opt.nextLabel }).click(function() {
if (!opt.next || methods.execute.call($this, opt.next, index + 1)) {
methods.step.call($this, (index + 1) + 1);
}
}).appendTo($('#' + id + '-buttons-' + index));
}, execute: function(callback, index) {
var isValid = callback.call(this, index + 1);
return isValid || isValid === undefined;
}, step: function(index) {
index--;
var $steps = this.children('fieldset');
if (index > $steps.length - 1) {
index = $steps.length - 1;
}
var opt = this.data('options');
max = index;
if (opt.validate) {
var isValid = true;
for (var i = 0; i < index; i++) {
isValid &= methods.validate.call(this, i);
if (opt.block && !isValid) {
max = i;
break;
}
}
}
$steps.hide().eq(max).show();
var $titles = $('#' + this.attr('id') + '-titles').children();
$titles.removeClass('current-step').eq(max).addClass('current-step');
if (this.is('form')) {
var $fields = undefined;
if (max == index) {
$fields = $steps.eq(max).find(':input:enabled:visible');
} else {
$fields = $steps.eq(max).find('.error').select().focus();
}
$fields.first().select().focus();
}
if (opt.select) {
opt.select.call(this, max + 1);
}
return this;
}, validate: function(index) {
if (!this.is('form')) {
return true;
}
var $step = this.children('fieldset').eq(index),
isValid = true,
$title = $('#' + this.attr('id') + '-titles').children().eq(index),
opt = this.data('options'),
$this = this;
$($step.find(':input:enabled').get().reverse()).each(function() {
var fieldIsValid = $this.validate().element($(this));
if (fieldIsValid === undefined) {
fieldIsValid = true;
}
isValid &= fieldIsValid;
if (isValid) {
if (opt.errorImage) {
$title.removeClass('error-image');
}
} else {
if (opt.errorImage) {
$title.addClass('error-image');
}
$this.validate().focusInvalid();
}
});
return isValid;
}
};
$.fn.stepy = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist!');
}
};
$.fn.stepy.defaults = {
back: undefined,
backLabel: '< Back',
block: false,
description: true,
errorImage: false,
finish: undefined,
finishButton: true,
legend: true,
next: undefined,
nextLabel: 'Next >',
titleClick: false,
titleTarget: undefined,
validate: false,
select: undefined
};
})(jQuery);
If you want to append Text\HTML or any other data to your iframe (which calling to a page on the same domain!) you may use:
jQuery("#iframe_id").contents().find('body').append('<div>Hello World</div>');
Full Example:
Full Example
If your iframe is on another domain you will have to use window.postMessage, which you may read about on Mozilla's docs:
Mozilla's docs
OR to take a look about my blog post about this subject.
Hope I helped,

Javascript Password Change Form Validation doesn't work on IE8

got this function to validate two fields from a changing password form and it's doesn't seem to work at IE8. FF, Opera, Safari and Chrome work.
function chk_form_pw()
{
if(document.getElementById('new_passwd').value == '')
{
alert("<?php _e('Please enter New Password') ?>");
document.getElementById('new_passwd').focus();
return false;
}
if(document.getElementById('new_passwd').value.length < 5 )
{
alert("<?php _e('Please enter New Password minimum 5 chars') ?>");
document.getElementById('new_passwd').focus();
return false;
}
if(document.getElementById('cnew_passwd').value == '')
{
alert("<?php _e('Please enter Confirm New Password') ?>");
document.getElementById('cnew_passwd').focus();
return false;
}
if(document.getElementById('cnew_passwd').value.length < 5 )
{
alert("<?php _e('Please enter Confirm New Password minimum 5 chars') ?>");
document.getElementById('cnew_passwd').focus();
return false;
}
if(document.getElementById('new_passwd').value != document.getElementById('cnew_passwd').value)
{
alert("<?php _e('New Password and Confirm New Password should be same') ?>");
document.getElementById('cnew_passwd').focus();
return false;
}
}
This is the form:
<form name="registerform" id="registerform" action="<?php echo get_option( 'siteurl' ).'/?page=account&chagepw=1'; ?>" method="post">
<p><label><?php _e('New Password'); ?> <span class="indicates">*</span></label></p>
<p><input type="password" name="new_passwd" id="new_passwd" class="lostpass_textfield" /></p>
<p><label><?php _e('Confirm New Password'); ?> <span class="indicates">*</span></label></p>
<p><input type="password" name="cnew_passwd" id="cnew_passwd" class="lostpass_textfield" /></p>
<p><input type="submit" name="Update" onclick="return chk_form_pw();" value="<?php _e('Update Password') ?>" class="btn grey"/></p>
</form>
And here is the chagepw=1 thing:
<?php
if($_POST)
{
if($_REQUEST['chagepw'])
{
$new_passwd = $_POST['new_passwd'];
if($new_passwd)
{
$user_id = $current_user->data->ID;
wp_set_password($new_passwd, $user_id);
$message1 = "Password Changed successfully.You need to sign back in.";
}
}else
{
$user_id = $userInfo['ID'];
$user_add1 = $_POST['user_add1'];
$user_add2 = $_POST['user_add2'];
$user_city = $_POST['user_city'];
$user_state = $_POST['user_state'];
$user_country = $_POST['user_country'];
$user_postalcode = $_POST['user_postalcode'];
$buser_add1 = $_POST['buser_add1'];
$buser_add2 = $_POST['buser_add2'];
$buser_city = $_POST['buser_city'];
$buser_state = $_POST['buser_state'];
$buser_country = $_POST['buser_country'];
$buser_postalcode = $_POST['buser_postalcode'];
$user_address_info = array(
"user_add1" => $user_add1,
"user_add2" => $user_add2,
"user_city" => $user_city,
"user_state" => $user_state,
"user_country" => $user_country,
"user_postalcode"=> $user_postalcode,
"buser_name" => $_POST['buser_fname'].' '.$_POST['buser_lname'],
"buser_add1" => $buser_add1,
"buser_add2" => $buser_add2,
"buser_city" => $buser_city,
"buser_state" => $buser_state,
"buser_country" => $buser_country,
"buser_postalcode"=> $buser_postalcode,
);
update_usermeta($user_id, 'user_address_info', serialize($user_address_info)); // User Address Information Here
$userName = $_POST['user_fname'].' '.$_POST['user_lname'];
$updateUsersql = "update $wpdb->users set user_nicename=\"$userName\", display_name=\"$userName\" where ID=\"$user_id\"";
$wpdb->query($updateUsersql);
$message = "Information Updated successfully.";
}
}
$userInfo = $General->getLoginUserInfo();
$user_address_info = unserialize(get_user_option('user_address_info', $user_id));
$user_add1 = $user_address_info['user_add1'];
$user_add2 = $user_address_info['user_add2'];
$user_city = $user_address_info['user_city'];
$user_state = $user_address_info['user_state'];
$user_country = $user_address_info['user_country'];
$user_postalcode = $user_address_info['user_postalcode'];
$display_name = $userInfo['display_name'];
$display_name_arr = explode(' ',$display_name);
$user_fname = $display_name_arr[0];
$user_lname = $display_name_arr[2];
$buser_add1 = $user_address_info['buser_add1'];
$buser_add2 = $user_address_info['buser_add2'];
$buser_city = $user_address_info['buser_city'];
$buser_state = $user_address_info['buser_state'];
$buser_country = $user_address_info['buser_country'];
$buser_postalcode = $user_address_info['buser_postalcode'];
$bdisplay_name = $user_address_info['buser_name'];
$display_name_arr = explode(' ',$bdisplay_name);
$buser_fname = $display_name_arr[0];
$buser_lname = $display_name_arr[2];
if($_SESSION['redirect_page'] == '')
{
$_SESSION['redirect_page'] = $_SERVER['HTTP_REFERER'];
}
if(strstr($_SESSION['redirect_page'],'page=checkout'))
{
$login_redirect_link = get_option( 'siteurl' ).'/?page=checkout';
}
?>
A smoother solution would be jQuery. There you can load a loading-animation, put color like red/green on wrong/correct and simplified print out text depending on what happening to the form.
Download jQuery from: http://docs.jquery.com/Downloading_jQuery
Then you insert it in the html code like this:
<script type="text/javascript" src="jquery.js">
</script>
Then you can have a valid.js like this:
$(document).ready(function () {
var validatefield = $('#validatefield');
$('#validatefield').keyup(function () {
var t = this;
if (this.value != this.lastValue) {
if (this.timer) clearTimeout(this.timer);
validatefield.html('<img src="images/Here_you_can_put_your_gif_animation"
alt="Loading..."
height="16" width="16"/>');
this.timer = setTimeout(function () {
$.ajax({
url: 'check_field.php',
data: 'action=check_field&field=' + encodeURIComponent(t.value),
dataType: 'json',
type: 'post',
success: function (j) {
if (j.ok) {
validatefield.html(j.msg);
}
else if ($("#validatefield").val() == "")
{
validatefield.html('');
}
else {
validatefield.html(j.msg);
}
}
});
}, 200);
this.lastValue = this.value;
}
});
});
Then in the check_field.php, have this;
echo json_encode(check_field($_POST['field']));
function check_field($field) {
$fieldSum = stripslashes(strip_tags(trim(htmlspecialchars($field))));
$response = array();
if (strlen($fieldSum) > 15) {
$response = array(
'ok' => false,
'msg' => "The field characters were over 15!");
}
else
{
$response = array(
'ok' => true,
'msg' => "Correct");
}
return $response;
}
The id #validatefield is an id inside the html code that you have to create in order to print things out.
Example:
<div id="validatefield">Here comes the text etc, from the valid.js</div>
Finally got it done using the JQuery script posted before:
http://code.google.com/p/form-validation-engine/downloads/list
It's been really easy to fit into my previous code and works flawlessly through every browser tested.
Thank you all for your help!

Categories