PDA

View Full Version : چگونه از فایل Ajax برای ثبت نام استفاده کنم؟



erfanPA
جمعه 09 مرداد 1394, 21:46 عصر
سلام دوستان من بسیار مبتدی هستم و هیچی از کد های ajax و جاوا اسکریپت سر در نمیارم. از یک سایتی یک قالب html5 گرفتم که توش میتونی ایمیل ثبت کنی. اینم لینک دمو سایت: http://html5up.net/eventually
و توی استفاده از سایت گفت برای استفاده از singup form از این دو روش استفاده کن:Signup Form:

The signup form won't actually do anything (other than report back with a "thank you" message)
until you tie it to either a third party service (eg. MailChimp) or your own hosted solution.
In either case, there are two ways to go:

1. The conventional (non-AJAX) way, which pretty much comes down to pointing the form's "action"
attribute to your service/script URL. If you go this route, remove the entire "Signup Form" code
block from assets/js/main.js (since it's not needed for this approach).

-or-

2. The AJAX way. How you set this up is largely dependent on the service/solution you're using
so you'll need to consult their/its documentation. However, I have included some basic code
(under "Signup Form" in assets/js/main.js) that will at least let you interact with the
form itself.

این کدی که گفته ازش استفاده کن:

// Signup Form.
(function() {

// Vars.
var $form = document.querySelectorAll('#signup-form')[0],
$submit = document.querySelectorAll('#signup-form input[type="submit"]')[0],
$message;

// Bail if addEventListener isn't supported.
if (!('addEventListener' in $form))
return;

// Message.
$message = document.createElement('span');
$message.classList.add('message');
$form.appendChild($message);

$message._show = function(type, text) {

$message.innerHTML = text;
$message.classList.add(type);
$message.classList.add('visible');

window.setTimeout(function() {
$message._hide();
}, 3000);

};

$message._hide = function() {
$message.classList.remove('visible');
};

// Events.
// Note: If you're *not* using AJAX, get rid of this event listener.
$form.addEventListener('submit', function(event) {

event.stopPropagation();
event.preventDefault();

// Hide message.
$message._hide();

// Disable submit.
$submit.disabled = true;

// Process form.
// Note: Doesn't actually do anything yet (other than report back with a "thank you"),
// but there's enough here to piece together a working AJAX submission call that does.
window.setTimeout(function() {

// Reset form.
$form.reset();

// Enable submit.
$submit.disabled = false;

// Show message.
$message._show('success', 'Thank you!');
//$message._show('failure', 'Something went wrong. Please try again.');

}, 750);


فایل کل سایت رو هم میذارم:
http://html5up.net/eventually/download

kianajoo
جمعه 09 مرداد 1394, 22:02 عصر
دوست عزیز اینجا جای مناسبی برای طرح سوال javascript نیست...
بهتره از jquery استفاده کنید و سوال رو به بخش مربوطه انتقال بدین!

erfanPA
جمعه 09 مرداد 1394, 23:02 عصر
آقا من اونجا هم پرسیدم ولی کسی جواب نداده

erfanPA
سه شنبه 13 مرداد 1394, 13:46 عصر
لطفا راهنمایی کنید