Jump to content

Pulling Part of a Form via Ajax


Recommended Posts

I'm looking to know if I pull the middle portion of a HTML form via AJAX if the data entered in the form will actually submit? I'm pulling the middle portion based on a selection made via radio buttons at the top of the form. The middle portion contains the bulk of the form, which changes based on which user account type the user wants to register for.

 

Here's the HTML Form:

 

The <div id="signup_forms"> line is where the AJAX is inserted.

<div class="register_wrapper">
	<form action="">
		<div class="register_account_type_position">
		<p class="signup_title">Sign-Up for - Step One</p>
		<p class="register_account_type_title">Account Type:</p>
		<span class="register_account_type_personal_position"><input type="radio" value="personal" name="register_account_type" id="register_account_type_personal" class="register_account_type_personal" onclick="sendReq(\'personal\');" '; if((isset($_SESSION['account_type']) && $_SESSION['account_type']=="personal") || !isset($_SESSION['account_type'])){ $content.='checked="checked" '; } $content.='/> <label for="register_account_type_personal"><span class="register_radio_text">Personal</span></label></span>
		<span class="register_account_type_music_position"><input type="radio" value="music" name="register_account_type" id="register_account_type_music" class="register_account_type_music" onclick="sendReq(\'music\');" '; if(isset($_SESSION['account_type']) && $_SESSION['account_type']=="music"){ $content.='checked="checked" '; } $content.='/> <label for="register_account_type_music"><span class="register_radio_text">Band/Recording Artist</span></label></span>
		<span class="register_account_type_film_position"><input type="radio" value="film" name="register_account_type" id="register_account_type_film" class="register_account_type_film" onclick="sendReq(\'film\');" '; if(isset($_SESSION['account_type']) && $_SESSION['account_type']=="film"){ $content.='checked="checked" '; } $content.='/> <label for="register_account_type_film"><span class="register_radio_text">Filmmaker/Actor</span></label></span>
		<span class="register_account_type_business_position"><input type="radio" value="business" name="register_account_type" id="register_account_type_business" class="register_account_type_business" onclick="sendReq(\'business\');" '; if(isset($_SESSION['account_type']) && $_SESSION['account_type']=="business"){ $content.='checked="checked" '; } $content.='/> <label for="register_account_type_business"><span class="register_radio_text">Business</span></label></span>
		<span class="register_account_type_other_position"><input type="radio" value="business" name="register_account_type" id="register_account_type_other" class="register_account_type_other" onclick="sendReq(\'other\');" '; if(isset($_SESSION['account_type']) && $_SESSION['account_type']=="other"){ $content.='checked="checked" '; } $content.='/> <label for="register_account_type_other"><span class="register_radio_text">Other</span></label></span>
		</div>
	<div id="signup_forms">
		<div class="register_form_wrapper">
		<p class="register_form_position">
		<label for="register_email"><span class="register_form_text">Email:</span></label> <input type="email" value="'.$_SESSION['register_email'].'" name="register_email" id="register_email" class="register_form" />
		</p>
		<p class="register_form_position">
		<label for="register_fname"><span class="register_form_text">First Name:</span></label> <input type="text" value="'.$_SESSION['register_fname'].'" name="register_fname" id="register_fname" class="register_form" />
		</p>
		<p class="register_form_position">
		<label for="register_lname"><span class="register_form_text">Last Name:</span></label> <input type="text" value="'.$_SESSION['register_lname'].'" name="register_lname" id="register_lname" class="register_form" />
		</p>
		<p class="register_form_position">
		<label for="register_check_email"><span class="register_form_text">Re-enter Email:</span></label> <input type="email" value="'.$_SESSION['register_check_email'].'" name="register_check_email" id="register_check_email" class="register_form" />
		</p>
		<p class="register_form_position">
		<label for="register_password"><span class="register_form_text">New Password:</span></label> <input type="password" value="'.$_SESSION['register_password'].'" name="register_password" id="register_password" class="register_form" />
		</p>
		<p class="register_form_position">
		<label for="register_check_password"><span class="register_form_text">Re-enter Password:</span></label> <input type="password" value="'.$_SESSION['register_check_password'].'" name="register_check_password" id="register_check_password" class="register_form" />
		</p>
		<p class="register_form_position_gender">
		Gender:
		<select name="gender" id="gender">
		<option value=""></option>
		<option value="Female">Female</option>
		<option value="Male">Male</option>
		</select>
		</p>
		<p class="register_form_position_birthday">
		Birthday:
		<select name="month" id="month" onchange="sndReq(year.value,this.value);">
		<option value="">Month</option>
		<option value="January">January</option>
		<option value="February">February</option>
		<option value="March">March</option>
		<option value="April">April</option>
		<option value="June">June</option>
		<option value="July">July</option>
		<option value="August">August</option>
		<option value="September">September</option>
		<option value="October">October</option>
		<option value="November">November</option>
		<option value="December">December</option>
		</select>
		<select name="day" id="day">
		<option>Day</option>'."\n".
		$day_menu
		.'</select>
		<select name="year" id="year" onchange="sndReq(this.value,month.value);">
		<option>Year</option>'."\n".
		$year_menu
		.'</select>
		</p>
			<div class="register_membership_type_position">
			<span class="register_membership_type_title">Membership Type:</span>
			<span class="register_membership_type_basic_position"><input type="radio" value="basic" name="register_membership_type" id="register_membership_type_basic" class="register_membership_type_basic" '; if((isset($_SESSION['membership_type']) && $_SESSION['membership_type']=="basic") || !isset($_SESSION['membership_type'])){ $content.='checked="checked" '; } $content.='/> <label for="register_membership_type_basic"><span class="register_radio_text">Basic</span></label></span>
			<span class="register_membership_type_premium_position"><input type="radio" value="premium" name="register_membership_type" id="register_membership_type_premium" class="register_membership_type_premium" '; if(isset($_SESSION['membership_type']) && $_SESSION['membership_type']=="premium"){ $content.='checked="checked" '; } $content.='/> <label for="register_membership_type_premium"><span class="register_radio_text">Premium</span></label></span>
			<span class="register_membership_type_platinum_position"><input type="radio" value="platinum" name="register_membership_type" id="register_membership_type_platinum" class="register_membership_type_platinum" '; if(isset($_SESSION['membership_type']) && $_SESSION['membership_type']=="platinum"){ $content.='checked="checked" '; } $content.='/> <label for="register_membership_type_platinum"><span class="register_radio_text">Platinum</span></label></span>
			</div>
		</div>
	</div>
		<p class="register_form_position">
		<input type="submit" value="Sign Up for Basic Membership" class="register_button_position" />
		</p>
	</form>
</div>

 

The current page pulled via AJAX:

 

<?php
require_once 'function.php';
$form_type=$_GET['signup_type'];

if($form_type=="music"){
$content.='Test';
}
elseif($form_type=="film"){
$content.='Test2';
}
elseif($form_type=="business"){
$content.='Test3';
}
elseif($form_type=="other"){
$content.='Test4';
}
else{
$year_menu=generateBirthYearMenu(date("Y"));
$day_menu=generateBirthDayMenu(null,null);
$content.='<div class="register_form_wrapper">
		<p class="register_form_position">
		<label for="register_email"><span class="register_form_text">Email:</span></label> <input type="email" value="'.$_SESSION['register_email'].'" name="register_email" id="register_email" class="register_form" />
		</p>
		<p class="register_form_position">
		<label for="register_fname"><span class="register_form_text">First Name:</span></label> <input type="text" value="'.$_SESSION['register_fname'].'" name="register_fname" id="register_fname" class="register_form" />
		</p>
		<p class="register_form_position">
		<label for="register_lname"><span class="register_form_text">Last Name:</span></label> <input type="text" value="'.$_SESSION['register_lname'].'" name="register_lname" id="register_lname" class="register_form" />
		</p>
		<p class="register_form_position">
		<label for="register_check_email"><span class="register_form_text">Re-enter Email:</span></label> <input type="email" value="'.$_SESSION['register_check_email'].'" name="register_check_email" id="register_check_email" class="register_form" />
		</p>
		<p class="register_form_position">
		<label for="register_password"><span class="register_form_text">New Password:</span></label> <input type="password" value="'.$_SESSION['register_password'].'" name="register_password" id="register_password" class="register_form" />
		</p>
		<p class="register_form_position">
		<label for="register_check_password"><span class="register_form_text">Re-enter Password:</span></label> <input type="password" value="'.$_SESSION['register_check_password'].'" name="register_check_password" id="register_check_password" class="register_form" />
		</p>
		<p class="register_form_position_gender">
		Gender:
		<select name="gender" id="gender">
		<option value=""></option>
		<option value="Female">Female</option>
		<option value="Male">Male</option>
		</select>
		</p>
		<p class="register_form_position_birthday">
		Birthday:
		<select name="month" id="month" onchange="sndReq(year.value,this.value);">
		<option value="">Month</option>
		<option value="January">January</option>
		<option value="February">February</option>
		<option value="March">March</option>
		<option value="April">April</option>
		<option value="June">June</option>
		<option value="July">July</option>
		<option value="August">August</option>
		<option value="September">September</option>
		<option value="October">October</option>
		<option value="November">November</option>
		<option value="December">December</option>
		</select>
		<select name="day" id="day">
		<option>Day</option>'."\n".
		$day_menu
		.'</select>
		<select name="year" id="year" onchange="sndReq(this.value,month.value);">
		<option>Year</option>'."\n".
		$year_menu
		.'</select>
		</p>
			<div class="register_membership_type_position">
			<span class="register_membership_type_title">Membership Type:</span>
			<span class="register_membership_type_basic_position"><input type="radio" value="basic" name="register_membership_type" id="register_membership_type_basic" class="register_membership_type_basic" '; if((isset($_SESSION['membership_type']) && $_SESSION['membership_type']=="basic") || !isset($_SESSION['membership_type'])){ $content.='checked="checked" '; } $content.='/> <label for="register_membership_type_basic"><span class="register_radio_text">Basic</span></label></span>
			<span class="register_membership_type_premium_position"><input type="radio" value="premium" name="register_membership_type" id="register_membership_type_premium" class="register_membership_type_premium" '; if(isset($_SESSION['membership_type']) && $_SESSION['membership_type']=="premium"){ $content.='checked="checked" '; } $content.='/> <label for="register_membership_type_premium"><span class="register_radio_text">Premium</span></label></span>
			<span class="register_membership_type_platinum_position"><input type="radio" value="platinum" name="register_membership_type" id="register_membership_type_platinum" class="register_membership_type_platinum" '; if(isset($_SESSION['membership_type']) && $_SESSION['membership_type']=="platinum"){ $content.='checked="checked" '; } $content.='/> <label for="register_membership_type_platinum"><span class="register_radio_text">Platinum</span></label></span>
			</div>
		</div>';
}

echo $content;

?>

Link to comment
Share on other sites

Yes you can dynamically add elements to a form via Ajax. Have you tried it?

 

Thanks.

 

Haven't tried it yet. Was going to bed when I posted this. Was looking to get an answer, so I would know if I had to start working on a work around or get straight to work on the next step, when I got up.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.