I have created a form that writes an开发者_如何学JAVA email address to a CSV file and submits via AJAX (using jquery.form.js ) with some JSON validation messages.
I successfully tested the form on my local server as well as on the root server of my website. When I migrate the form inside of the WordPress theme however, the form is stuck with the message, "loading..."
Removing the following code makes the form submit A-OK, but defeats the purpose as it won't write anything to the CSV without this code. I've set the permissions of all the files involved (emails.csv, submit.php as well as containing WP folders) to 777, but seems that WordPress is causing some error related to 'fopen'
Also note that in the actual file I use an absolute URL for the .CSV file but omitted it here intentionally-- i have already confirmed that it is pointing to the right file.
Problematic Code:
//open the file
$file = "emails.csv";
$fh = fopen($file, 'a') or die('fail:noFile');
//remove any commas from the input and save to file with a preposition ","
$em = preg_replace('/,/', ' ', $_POST['email']);
$li = '
'.$em;
if (fwrite($fh, $li)) {
}
//close the file
fclose($fh);
Submit.php Code
<?php
if ($_POST) {
// response hash
$response = array('type' => '', 'message' => '');
try {
// do some sort of data validations, very simple example below
$required_fields = array('email-address');
foreach ($required_fields as $field) {
if (empty($_POST[$field])) {
throw new Exception('Required field "' . ucfirst($field) . '" missing input.');
}
}
// ok, field validations are ok
// now add to data to DB, Send Email, ect.
// let's assume everything is ok, setup successful response
$response['type'] = 'success';
$response['message'] = 'Thank-You for submitting the form!';
//open the file
$file = "emails.csv";
$fh = fopen($file, 'a') or die('fail:noFile');
//remove any commas from the input and save to file with a preposition ","
$em = preg_replace('/,/', ' ', $_POST['email']);
$li = '
' . $em;
if (fwrite($fh, $li)) {
}
//close the file
fclose($fh);
}
catch (Exception $e) {
$response['type'] = 'error';
$response['message'] = $e->getMessage();
}
// now we are ready to turn this hash into JSON
print json_encode($response);
exit;
}
?>
Custom JS file
function setupAjaxForm(form_id, form_validations) {
var form = '#' + form_id;
var form_message = form + '-message';
// en/disable submit button
var disableSubmit = function (val) {
$(form + ' input[type=submit]').attr('disabled', val);
};
// setup loading message
$(form).ajaxSend(function () {
$(form_message).removeClass().addClass('loading').html('Loading...').fadeIn();
});
// setup jQuery Plugin 'ajaxForm'
var options = {
dataType: 'json',
beforeSubmit: function () {
// run form validations if they exist
if (typeof form_validations == "function" && !form_validations()) {
// this will prevent the form from being subitted
return false;
}
disableSubmit(true);
},
success: function (json) {
$(form_message).hide();
$(form_message).removeClass().addClass(json.type).html(json.message).fadeIn('slow');
disableSubmit(false);
if (json.type == 'success') $(form).clearForm();
}
};
$(form).ajaxForm(options);
}
$(document).ready(function () {
new setupAjaxForm('newsletterForm');
});
HTML
<form method="post" action="<?php bloginfo('wpurl'); ?>/submit.php" id="newsletterForm">
<div class="inner">
<div id="newsletterForm-message"></div>
<p class="tagline">get quarterly tlm updates</p>
<div class="input-box">
<input type="text" name="email-address" />
</div>
<div class="submit">
<input type="submit" value=" " />
</div>
</div>
</form>
精彩评论