Can´t submit form content of a jQuery UI modal windows - form-submit

I like to use the jQuery UI modal dialog, to create new users in a database by using php code. I get the modal code example from the jQuery UI page and the form is opend in the modal window.
The orignal code example just adds the form datas into a table on the page with /$( "#users tbody" ).append... and so on.
But I need to submit the form datas to a php file. So far so good. I thought, okay I´ve just to replace the append code part with $("form#modal-form").submit(); and it´s should be working. But it doesn´t, and I don´t get it why.
I do the modal windows with:
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create User": addUser,
Cancel: function() {
dialog.dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
allFields.removeClass( "ui-state-error" );
}
});
And the addUser function:
function addUser() {
var valid = true;
allFields.removeClass( "ui-state-error" );
...validation of the form datas...
if ( valid ) {
//$( "#users tbody" ).append( "<tr>" +
// "<td>" + name.val() + "</td>" +
// "<td>" + email.val() + "</td>" +
// "<td>" + password.val() + "</td>" +
//"</tr>" );
$("form#modal-form").submit();
dialog.dialog( "close" );
}
return valid;
}
My form looks like this:
<form action="adduser.php" name="modal-form" id="modal-form" method="POST">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="jane#smith.com" class="text ui-widget-content ui-corner-all">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
</fieldset>
All I get is the error
Too much recursion
Where is my mistake? Can anyone maybe help me?

I have it.
When I use the native method with:
$("#modal-form")[0].submit();
then it works.

Related

How do I post the value of a radio button to a database using AJAX?

I want to be able to post the value of a radio button to a database, without having to submit the form, hence why I have attempted this using 'on change'.
$("input:radio[name=q1_MC]").on("change", function () {
var dunno1 = $(this).serialize();
$.ajax({
url: "get_response.php",
type: "POST",
data: dunno1,
success: function (data) {
console.log("working)";
},
error: function (request, status, error) {
console.log(request.responseText);
}
});
});
My console.log does show when I click one of my radio buttons.
Inside get_response.php I have:
<?php
require("db_connection.php");
if((isset($_POST['your_name']) {
$yourName = $conn->real_escape_string($_POST['your_name']);
$q1_MC = $conn->real_escape_string($_POST['q1_MC']);
$q2 = $conn->real_escape_string($_POST['q2']);
$q3 = $conn->real_escape_string($_POST['q3']);
$q4 = $conn->real_escape_string($_POST['q4']);
$q5 = $conn->real_escape_string($_POST['q5']);
$q6 = $conn->real_escape_string($_POST['q6']);
$q7_MC = $conn->real_escape_string($_POST['q7_MC']);
$q8 = $conn->real_escape_string($_POST['q8']);
$sql="INSERT INTO commenttable (name, q1_MC, q2, q3, q4, q5, q6, q7_MC, q8) VALUES ('".$yourName."','".$q1_MC."', '".$q2."', '".$q3."', '".$q4."', '".$q5."', '".$q6."', '".$q7_MC."', '".$q8."')";
if(!$result = $conn->query($sql)){
die('There was an error running the query [' . $conn->error . ']');
} else {
echo "Thank you! Your feedback is appreciated";
}
}
?>
HTML:
<input type="radio" name="q1_MC" value="Excited"> Excited
<input type="radio" name="q1_MC" value="Optimistic"> Optimistic
<input type="radio" name="q1_MC" value="Indifferent"> Indifferent
<input type="radio" name="q1_MC" value="Nervous"> Nervous
<input type="radio" name="q1_MC" value="Sceptical"> Sceptical
if((isset($_POST['your_name']) will only be true when you submit the whole form. In your case you appear to be posting just the key/value of the radio button.
EG:
$("input:radio[name=q1_MC]").on("change", function() {
var dunno1 = $(this).serialize();
console.log(dunno1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label><input type="radio" name="q1_MC" value="test1" />test1</label>
<label><input type="radio" name="q1_MC" value="test2" />test2</label>
</form>

Cant access the serialized data from AJAX inside an PHP file

Trying to get the send data inside an Wordpress plugin but I cant get the data to work. So how do I get the data from the serialized part inside a php file?
// the code
<form method="post" id="form-settings" action="ajaxpro.php" >
<?php wp_nonce_field( 'settings', 'settings_nonce', false );?>
<input name="field-one" type="text"/>
<input name="field-two" type="text"/>
<textarea name="field_three">Hello world</textarea>
// notice the double fields
<input name="field-x[]" type="text"/>
<input name="field-x[]" type="text"/>
<input name="field-x[]" type="text"/>
<input name="field-x[]" type="text"/>
<input name="field-x[]" type="text"/>
<button id="submitme" name="save-form">Save</button>
</form>
$('body').on('submit', '#form-settings', function(e){
var seri =$(this).serializeArray()
$.post(ajaxurl, {
action: 'save_ajax_func',
posted: seri
}, function(response) {
console.log( response );
});
return false;
});
//notice that I do use double field names(field-x)
echo $_POST[ 'posted' ][ 'field-one' ] // not working
To use the [] notation in the html it would be posted[field-x]
<input name="posted[field-x]" type="text"/>
the ajax will have to change to below
var seri = $(this).serializeArray();
seri.push({name:'action',value:'save_ajax_func'});
$.post(ajaxurl, seri, function(response) {
console.log( response );
});

Joomla, Filezilla, Contact, changing automatic answer

I have a problem with my website. I made the lines where my problem lays thick(bottom). Here it is:
" **result = '<p style="color:white;"><?php echo** JText::_('VG_SK_CONTACT_SUCCESS'); ?></p>'; } else {
**result = '<p style="color:white;"><?php echo**
"
If I write between >< "Thank you for..." then it says in the automatic answer "Thank you for..." and there is another sentence which is maybe called by a function. I don't know very well programming, so can someone tell me maybe where I could find this data file, where I can change the automatic answer.
//CODE
// no direct access defined('_JEXEC') or die;
//library jimport('joomla.application.module.helper');
//vars //$class_sfx = htmlspecialchars($params->get('moduleclass_sfx')); $c_emailto = explode( '#', $params->get('emailto') ); $c_justdata = $params->get('justdata'); $c_justsocial = $params->get('justsocial');
echo '<div class="contactform"> <span class="error"></span> <span class="error"></span> <span class="error"></span> <span class="error"></span>
<form id="contactForm" method="post" action="">
<input type="hidden" name="emailto1" value="' . $c_emailto[0] . '" />
<input type="hidden" name="emailto2" value="' . $c_emailto[1] . '" />
<input type="text" name="contactName" id="contactName" class="requiredField" value="" placeholder="' . JText::_('VG_SK_CONTACT_NAME') . '" />
<input type="text" name="email" id="email" value="" class="requiredField email" placeholder="' . JText::_('VG_SK_CONTACT_EMAIL') . '" />
<textarea class="requiredField" name="comments" id="comments" placeholder="' . JText::_('VG_SK_CONTACT_MESSAGE') . '"></textarea>
<input type="hidden" name="submitted" id="submitted" value="true" />
<div class="clearfix"></div>
<button type="submit" name="submit" id="submitMsg" class="large_btn contact-btn">' . JText::_('VG_SK_CONTACT_SUBMIT') . '</button>
</form> <div id="note"></div>
</div>
<div class="contactinfo">
' . $c_justdata . ' ' . $c_justsocial . '
</div>'; ?>
<script> // mail-form jQuery(document).ready(function($){ $("#contactForm").submit(function(){ var str = $(this).serialize();
$.ajax({ type: "POST", url: "<?php echo JURI::base(); ?>modules/mod_circle_contact/ajax/send.php", data: str, success: function(msg){
$("#note").ajaxComplete(function(event, request, settings){ if(msg == 'OK') {
**result = '<p style="color:white;"><?php echo** JText::_('VG_SK_CONTACT_SUCCESS'); ?></p>'; } else {
**result = '<p style="color:white;"><?php echo** JText::_('VG_SK_CONTACT_FORGOT'); ?></p>'; }
$(this).html(result).fadeIn("slow"); $(this).html(result);
}); //alert(msg);
}
}); return false; }); }); </script>
//CODE
Thank you, greetings
You should change the strings inside the JText::_('VG_SK_CONTACT_FORGOT'); that is the VG_SK_CONTACT_FORGOT inside en-GB.tpl_vg_grettla.ini see this relevant answer: Customize Joomla Text

AJAX form submission issue in Internet Explorer

For some reason the newsletter sign-up form bar I'm creating is not working as it should in IE. In fact, it's not working at all. If you visit the link below in Chrome or Firefox it works like it should, but in any version of IE it doesn't.
Anyone have any leads to fix this?
Here's the code, summarized:
$(function() {
$('#name').textboxhint({
hint: 'First Name'
});
$('#email').textboxhint({
hint: 'Email Address'
});
$("#submitButton").click(function() {
// VALIDATE AND PROCESS FORM
var name = $("#name").val();
var email = $("#email").val();
var dataString = 'name='+ name + '&email=' + email;
// HANDLE DATA: SHOW ERROR IF FIELDS ARE BLANK
if (name=='' || name=='First Name' ){
$('.errorIconName').show();
return false;
}
if (email=='' || email=='Email Address'){
$('.errorIconEmail').show();
return false;
}
else {
$.ajax({
type: "POST",
url: "#",
data: dataString,
success: function(){
$('#signupWidget').fadeOut(400).hide();
$('#thankyouText').fadeIn(700).show();
$('.errorIcon').fadeOut(200).hide();
$('#signupWrap').delay(3000).fadeOut(800);
}
});
}
return false;
});
});
and...
<form action="" method="post">
<span id="sprytextfield1" class="pr20">
<input name="name" id="name" type="text"/>
<div class="errorIconName" style="display:none"></div>
</span>
<span id="sprytextfield2" class="pr20">
<input name="email" id="email" type="text"/>
<div class="errorIconEmail" style="display:none"></div>
</span>
<span>
<input type="submit" name="widgetButton" id="submitButton" value="SUBMIT"/>
</span>
</form>

My Jquery tools Ajax modal login is not working in IE 7 and 8

I am working on modal login/registration forms. I'm not good with Javascript, but have hacked my way to some working Jquery for my Ajax call, and all is working nicely in Chrome 14.0.835.159 beta-m and in Firefox 5 and 6.0.2 and Opera 11.51. I used Firebug to see the JSON returning correctly and updating the error messages.
In FF/Opera/Chrome if I leave the username and login blank and I click the login button on the modal window, the returns count up the failed logins and display the return.I used firebuggerhttp://www.firebugger.com/ to look at what was going on in On IE 7 and 8.
If you leave the form fields blank, it seems the form is somehow "cached" and the call doesnt go through. None of the returns act on my login javascript to update the loginMsg div. If you change the input each time, "a", "as", "asd", the return counts up the failed logins as intended but still no update on my div
Very odd :-(
The test page is at camarillon.com/testpage.cfm
<!DOCType html>
<html>
<head>
<title>testpage - test ajax login</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<!--- add styles --->
<link rel="stylesheet" type="text/css" href="css/loginbox.css" />
<!--- <noscript>This is what you see without javascript</noscript> --->
<CFSET structDelete(session, 'form')>
<cfset session.form.validate_require="username|'Username' is required.;password|'Password' is required.;confirmpassword|'Confirm password' is a required field.;">
<cfset session.form.validate_minlength="username|'Username' must be at least 3 characters long.;password|'Password' must be at least 7 characters long.">
<cfset session.form.validate_maxlength="username|'Username' must be less than 6 characters long.">
<cfset session.form.validate_alphanumeric="username|'Username' must be alphanumeric.">
<cfset session.form.validate_password="confirmpassword|password|'Password' and 'Confirm Password' must both match.">
</head>
<body>
<cfparam name="session.auth.loggedIn" default="false">
<div id="loginMenu">
<cfif session.auth.loggedIn>
Log out
<cfelse>
<button class="modalInput" rel="#login">Login</button>
<button class="modalInput" rel="#register">Register</button>
</cfif>
</div>
<!-- user input dialog -->
<cfif isDefined("session.auth.failedLogins")>
<cfset loginMsg=#session.auth.failedLogins# & " failed logins">
<cfelse>
<cfset loginMsg="Please log in">
</cfif>
<script>
$(document).ready(function() {
var triggers = $(".modalInput").overlay({
// some mask tweaks suitable for modal dialogs
mask: {
color: '#ccc',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: false,
onClose: function () {
$('.error').hide();
}
});
$("#toomanylogins").overlay({
mask: {
color: '#ccc',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false,
load: false
});
$("#loginForm").submit(function(e) {
var form = $(this);
// submit with AJAX
$.getJSON("cfcs/security.cfc?method=processLogin&ajax=1&returnformat=JSON&queryformat=column&" + form.serialize(), function(json) {
// everything is ok. (server returned true)
if (json === true) {
// close the overlay
triggers.eq(0).overlay().close();
$("#loginMenu").html("<a href='logout.cfm'>Log out</a>");
// server-side validation failed. use invalidate() to show errors
} else if (json === "More than five") {
var tempString
tempString = "<h2>Too many failed logins </h2>"
$("#loginMsg").html(tempString);
triggers.eq(0).overlay().close();
$("#toomanylogins").overlay().load();
} else {
var tempString
tempString = "<h2>" + json + " failed logins</h2>"
$("#loginMsg").html(tempString);
}
});
// prevent default form submission logic
e.preventDefault();
});
// initialize validator and add a custom form submission logic
$("#signupForm").validator().submit(function(e) {
var form = $(this);
// client-side validation OK.
if (!e.isDefaultPrevented()) {
// submit with AJAX
$.getJSON("cfcs/security.cfc?method=processSignup&returnformat=JSON&queryformat=column&" + form.serialize(), function(json) {
// everything is ok. (server returned true)
if (json === true) {
// close the overlay
triggers.eq(1).overlay().close();
$("#loginMenu").html("<a href='logout.cfm'>Log out</a>");
// server-side validation failed. use invalidate() to show errors
} else {
form.data("validator").invalidate(json);
}
});
// prevent default form submission logic
e.preventDefault();
}
});
$.tools.validator.fn("[minlength]", function(input, value) {
var min = input.attr("minlength");
return value.length >= min ? true : {
en: "Please provide at least " +min+ " character" + (min > 1 ? "s" : ""),
};
});
$.tools.validator.fn("[data-equals]", "Value not equal with the $1 field", function(input) {
var name = input.attr("data-equals"),
field = this.getInputs().filter("[name=" + name + "]");
return input.val() == field.val() ? true : [name];
});
});
</script>
<!-- yes/no dialog -->
<div class="modal" id="toomanylogins">
<h2>Having problems logging in?</h2>
<p>
If you have forgotten your password you can request a reset.
</p>
<!-- yes/no buttons -->
<p>
<button class="close"> Cancel </button>
</p>
</div>
<div class="modal" id="login">
<!-- login form -->
<form name="loginForm" id="loginForm" autocomplete="off" method="get" action="">
<div id="loginMsg"><h2><cfoutput>#loginMsg#</cfoutput></h2></div>
<p><input type="text" name="username" placeholder="username..." title="Must be at least 8 characters." <!--- required="required" --->></p>
<p><input type="password" name="password" placeholder="password..." title="Try to make it hard to guess" <!--- required="required" --->></p>
<p>
<button type="submit"> Login </button>
<button type="button" class="close"> Cancel </button>
</p>
</form>
</div>
<div class="modal" id="register">
<!-- signup form-->
<form id="signupForm" autocomplete="off" method="get" action="" novalidate="novalidate">
<fieldset>
<p>
<label>firstname *</label>
<input id="firstname" type="text" name="firstname" placeholder="firstname..." required="required"/></p>
<p>
<label>lastname *</label>
<input type="text" name="lastname" placeholder="lastname..." required="required"/></p>
<p>
<label>email *</label>
<input type="email" name="email" placeholder="email..." required="required"/></p>
<p>
<label>username *</label>
<input type="text" name="username" placeholder="username..." required="required"/>
</p>
<p>
<label>password *<br>
<input type="password" name="password" required="required" placeholder="password..." /></label>
</p>
<p>
<label>confirm password *<br>
<input type="password" name="confirmpassword" data-equals="password" placeholder="password..." required="required"/></label>
</p>
<p>
<button type="submit">Sign Up</button>
<button type="button" class="close"> Cancel </button>
</p>
</fieldset>
</form>
</div>
</body>
</html>
Back end is in Coldfusion, but I don't think thats relevant, the JSON returns work just fine in FF etc
Any pointers about what I presume is some bug in my Javascript appreciated, my JQuery kung foo is not strong :-(
Logans solution below is correct ... I also had a trailing comma in here which was wrong only bugging out in IE 5-7
$.tools.validator.fn("[minlength]", function(input, value) {
var min = input.attr("minlength");
return value.length >= min ? true : {
en: "Please provide at least " +min+ " character" + (min > 1 ? "s" : ""),
};
});
should have been
$.tools.validator.fn("[minlength]", function(input, value) {
var min = input.attr("minlength");
return value.length >= min ? true : {
en: "Please provide at least " +min+ " character" + (min > 1 ? "s" : "")
};
});
Instead of using $.getJSON, you can use $.ajax and set the cache option to false. I think that sound fix the issue.
$("#loginForm").submit(function(e) {
var form = $(this);
$.ajax({
type: 'GET',
url: "cfcs/security.cfc?method=processLogin&ajax=1&returnformat=JSON&queryformat=column&" + form.serialize(),
dataType: "json",
cache: false,
success: function(json) {
// everything is ok. (server returned true)
if (json === true) {
// close the overlay
triggers.eq(0).overlay().close();
$("#loginMenu").html("<a href='logout.cfm'>Log out</a>");
// server-side validation failed. use invalidate() to show errors
} else if (json === "More than five") {
var tempString
tempString = "<h2>Too many failed logins </h2>"
$("#loginMsg").html(tempString);
triggers.eq(0).overlay().close();
$("#toomanylogins").overlay().load();
} else {
var tempString
tempString = "<h2>" + json + " failed logins</h2>"
$("#loginMsg").html(tempString);
}
}
});
// prevent default form submission logic
e.preventDefault();
});
// initialize validator and add a custom form submission logic
$("#signupForm").validator().submit(function(e) {
var form = $(this);
// client-side validation OK.
if (!e.isDefaultPrevented()) {
// submit with AJAX
$.ajax({
type: 'GET',
url: "cfcs/security.cfc?method=processSignup&returnformat=JSON&queryformat=column&" + form.serialize(),
dataType: "json",
cache: false,
success: function(json) {
// everything is ok. (server returned true)
if (json === true) {
// close the overlay
triggers.eq(1).overlay().close();
$("#loginMenu").html("<a href='logout.cfm'>Log out</a>");
// server-side validation failed. use invalidate() to show errors
} else {
form.data("validator").invalidate(json);
}
}
});
// prevent default form submission logic
e.preventDefault();
}
});
Did you try out
$.ajaxSetup({
cache: false
});
at the beginning of document ready?
Really looks like a problem with the jQuery Cache. If this helps, it certainly is.

Resources