Here I am trying to built a multistep form wizard in vue.js using Django and python
Alam487
Posted on February 11, 2021
I am trying to built a multistep form wizard in vue.js using Django where I have two flows one is personal user and other one business user. SO in personal user I have to prompt a form based on category selection. Like when we enter a category in html input field based on that category I have to show next form. Suppose if I enter a "IT" in category field then based on IT i have prompt next form related with IT fields.
So here first flow I have completed like displaying the form based on category selection. And the main problem is with business user here while we enter a category "IT" in business flow so at that time by default we are having next form with two radio buttons one is personal user radio button and other is business user so if we click on business user radio button then user are able to update his account from personal to business using registration form.
But while we click on personal radio button then I need to follow the same process of entering category and showing the next form based on this category enter by user but i was unable to achieve this. So here i need help if anyone have an idea on this
below is my code what I am trying to achieve
<div id="app">
<form>
{% csrf_token %}
<fieldset class="postad_fieldset" v-if="step == 1">
<a href="/home" class="close" data-dismiss="modal" style="margin-top: -3px;margin-right: 5px;" type="button">×</a>
<div style="width: 100%;position: relative;left: 12px;height: 440px;">
<p class="progress_bar1"></p>
<p class="progress_percent1"></p>
<h1 class="post_adttl">Post Ad</h1>
<p><input class="vue_input" style="width: 93%;" type="text" v-model="category"
placeholder="Search your category"
name="category" maxlength="200" id="id_post_type" required></p>
<p>
<input style="width: 93%;"class="vue_input" placeholder="Title" type="text" v-model="title" name="title" maxlength="60"
id="id_post_title">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Address" v-model="address" name="address"
maxlength="200" id="id_post_address">
<input class="vue_input" type="text" placeholder="City" v-model="city" name="city" maxlength="100"
id="id_post_city">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="State" v-model="state" name="state"
maxlength="100" id="id_post_state">
<input class="vue_input" type="text" placeholder="Zip" v-model="zip" name="zip" maxlength="50"
id="id_post_zip">
</p>
<p>
<input class="vue_input" style="width: 93%;" type="number" placeholder="Price" v-model="price"
name="price" step="any" id="id_post_price">
</p>
<p>
<textarea style="height: 100px;padding-left: 25px;" class="vue_input" name="description"
v-model="description" placeholder="Ad description.." rows="5" maxlength="600"
id="id_post_description"></textarea>
</p>
<button class="step1_next" @click.prevent="next()" class="btn btn-primary">Next</button>
</div>
</fieldset>
<fieldset class="postad_fieldset progress_bar2" v-if="step == 2">
<div style="width: 100%;position: relative;left: 12px;">
<!--if we enter category 'Real Estate | Single Family Homes' in first screen at category field. If that entered category and this template
is matched then based on that category we are prompting this template -->
{% if user_type == 'business' %}
<template v-if="category == 'Real Estate | Single Family Homes'">
<p class="progress_bar1"></p>
<p class="progress_percent1"></p>
<h1 class="post_adttl">Post Ad</h1>
<p class="select_p">
<input class="vue_input" type="number" placeholder="Bedrooms" name="bedrooms_p"
v-model="bedrooms" id="id_post_bedrooms">
<input class="vue_input" type="number" placeholder="Bathrooms" name="bathrooms_p"
v-model="bathrooms" id="id_post_bathrooms">
</p>
<p class="select_p">
<input class="vue_input" type="number" placeholder="SQFT" name="Square_ft_p" v-model="Square_ft"
maxlength="100" id="id_post_Square_ft">
<input class="vue_input" type="number" placeholder="Lot size" name="lot_size_p"
v-model="lot_size" maxlength="50" id="id_post_lot_size">
</p>
<p class="select_p">
<input class="vue_input" type="number" placeholder="Total rooms" v-model="total_rooms"
name="total_rooms_p" id="id_post_total_rooms">
<input class="vue_input" type="number" placeholder="Stories" name="stories_p" v-model="stories"
maxlength="200" id="id_post_stories">
</p>
<p class="select_p">
<input class="vue_input" type="number" placeholder="Year built" v-model="year_built"
name="year_built_p" id="id_post_year_built">
<input class="vue_input" type="number" placeholder="HOA" name="h_o_a_p" v-model="h_o_a"
maxlength="200" id="id_post_h_o_a">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Garages" name="garages_p" v-model="garages"
maxlength="200" id="id_post_garages">
<input class="vue_input" type="text" placeholder="Basement" name="basement_p" v-model="basement"
maxlength="200" id="id_post_basement">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Roof" name="roof_p" v-model="roof"
maxlength="200" id="id_post_roof">
<input class="vue_input" type="text" placeholder="Exterior" name="exterior_p" v-model="exterior"
maxlength="200" id="id_post_Exterior">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Cooling" name="cooling_p" v-model="cooling"
maxlength="200" id="id_post_cooling">
<input class="vue_input" type="text" placeholder="Heating" name="heating_p" v-model="heating"
maxlength="200" id="id_post_heating">
</p>
<!-- Select drop down list for schools based on state and city we prompt near by schools in drop down list dynamically. Multiple selection.-->
<p>
<select class="vue_input" style="width: 93%;" placeholder="Schools" name="schools_p"
v-model="schools" id="id_post_schools"></select>
</p>
<p class="select_p">
<input class="vue_input" type="file" name="image_p" v-model="image" accept="image/*"
id="id_post_image">
<input class="vue_input" type="file" name="image2_p" v-model="image2" accept="image/*"
id="id_post_image2">
</p>
<p class="select_p">
<input class="vue_input" type="file" name="image3_p" v-model="image3" accept="image/*"
id="id_post_image3">
<input class="vue_input" type="file" name="image4_p" v-model="image4" accept="image/*"
id="id_post_image4">
</p>
<p class="prev_next">
<button style="background-color: lightgray;border-color:lightgray;" @click.prevent="prev()"
class="btn btn-info">Previous
</button>
<button style="background-color: #01ABAA;border-color:#01ABBAA;" @click.prevent="next()"
class="btn btn-primary">Next
</button>
</p>
</template>
<!-- -->
<template v-else-if="category == 'laptop'">
<p class="progress_bar1"></p>
<h1 class="post_adttl">Post Ad</h1>
<h2> laptop template</h2>
<p class="prev_next">
<button style="background-color: lightgray;border-color:lightgray;" @click.prevent="prev()"
class="btn btn-info">Previous
</button>
<button style="background-color: #01ABAA;border-color:#01ABBAA;" @click.prevent="next()"
class="btn btn-primary">Next
</button>
</p>
</template>
<template v-else-if="category == 'computer'">
<p class="progress_bar1"></p>
<h1 class="post_adttl">Post Ad</h1>
<h2> computer template</h2>
<p class="prev_next">
<button style="background-color: lightgray;" @click.prevent="prev()" class="btn btn-info">
Previous
</button>
<button style="background-color: #01ABAA;" @click.prevent="next()" class="btn btn-primary">
Next
</button>
</p>
</template>
<template v-else-if="category == 'IT'">
<div style="height: 238px;">
<p style="position:relative;left: 107px;" class="progress_bar1"></p>
<p style="width: 190px;" class="progress_percent1"></p>
<h1 class="post_adttl">Post Ad</h1>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Title" name="title_it" v-model="title_it"
maxlength="200" id="id_post_title_it">
<input class="vue_input" type="text" placeholder="Experience" name="experience_it"
v-model="experience" maxlength="200" id="id_post_experience_it">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Location" name="location_it"
v-model="location" maxlength="200" id="id_post_location_it">
<input class="vue_input" type="text" placeholder="Salary" name="salary_it" v-model="salary"
maxlength="200" id="id_post_salary_it">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Industry" name="industry_it"
v-model="industry" maxlength="200" id="id_post_industry_it">
<input class="vue_input" type="text" name="time_it" v-model="time" maxlength="200"
id="id_post_time_it">
</p>
<p class="prev_next">
<button style="background-color: lightgray;" @click.prevent="prev()" class="btn btn-info">
Previous
</button>
<button style="background-color: #01ABAA;" @click.prevent="next()" class="btn btn-primary">
Next
</button>
</p>
</div>
</template>
<template v-else-if="category == 'Boat'">
<h1 class="post_adttl">Post Ad</h1>
<p class="select_p">
<input class="vue_input" type="number" placeholder="Year" name="Yearofmake"
id="id_post_year_boat">
<input class="vue_input" type="text" placeholder="Make" name="Make" maxlength="200"
id="id_post_make_boat">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Model" name="Model" maxlength="200"
id="id_post_model_boat">
<input class="vue_input" type="text" placeholder="Type" name="type_boat" maxlength="200"
id="id_post_type_boat">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Class" name="class_boat" maxlength="200"
id="id_post_class_boat">
<input class="vue_input" type="text" placeholder="Length" name="length_boat" maxlength="200"
id="id_post_length_boat">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Beam" name="beam_boat" maxlength="200"
id="id_post_beam_boat">
<input class="vue_input" type="text" placeholder="Draft" name="draft_boat" maxlength="200"
id="id_post_draft_boat">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Weight" name="weight_boat" maxlength="200"
id="id_post_weight_boat">
<input class="vue_input" type="text" placeholder="Engine" name="engine_boat" maxlength="200"
id="id_post_engine_boat">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="HP" name="hp_boat" maxlength="200"
id="id_post_hp_boat">
<input class="vue_input" type="text" placeholder="Drive" name="drive_boat" maxlength="200"
id="id_post_drive_boat">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Fuel Type" name="fuel_type_boat"
maxlength="200"
id="id_post_fuel_type_boat">
<input class="vue_input" type="text" placeholder="Status" name="status_boat" maxlength="200"
id="id_post_status_boat">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Condition" name="condition_boat"
maxlength="200" id="id_post_condition_boat">
</p>
<p class="prev_next">
<button style="background-color: lightgray;" @click.prevent="prev()" class="btn btn-info">
Previous
</button>
<button style="background-color: #01ABAA;" @click.prevent="next()" class="btn btn-primary">
Next
</button>
</p>
</template>
{% else %}
<template v-if="">
<h1 class="preview_adttl">Consumer<% this.category %></h1>
<input class="consumer_radio" type="radio" id="consumer" name="flag" value="Personal Ad"
v-on:input="selectCategory">
<label style="position: relative;left: 1px;" class="personal_postad">Personal Ad:</label>
<p class="postad_p">Personal ads can be posted one ad per month, which will appear <br>
with "sale by owner
tag"</p><br>
<input style="position: relative;width: 4%;top: -37px;" class="business_radio" type="radio"
id="business" name="flag" value="business" v-model="picked">
<label style="position: relative;top: -49px;" class="Business_postad">Business Ad:</label>
<p style="position: relative;left: 0px;top: -47px;" class="postad_p">Do you want to
upgrade to business account to post more <br>ads per month</p>
<p class="prev_next">
<button style="background-color: lightgray;border-color:lightgray;"
@click.prevent="prev()" class="btn btn-info">Previous
</button>
<button style="background-color: #01ABAA;border-color:#01ABBAA;" @click.prevent="next()"
class="btn btn-primary">Next
</button>
</p>
</template>
{% endif %}
</div>
</fieldset>
<fieldset class="postad_fieldset" v-if="step == 3">
<div style="width: 100%;position: relative;left: 12px;height: 275px;">
{% if user_type == 'business' %}
<template v-if="">
<p style="position:relative;left: 216px;" class="progress_bar1"></p>
<p style="width: 300px;" class="progress_percent1"></p>
<h1 class="post_adttl">Package</h1>
<p>
<input style="width: 4%;" type="radio" name="price_Ads_package" class="price_1"
value="$4.99 - 12 Ads - Month"><span
class="radio_price1"> $2.99 - 6 Ads - Month</span>
</p>
<p>
<input style="width: 4%;" class="price2" type="radio" name="price_Ads_package" class="price_1"
value="$4.99 - 12 Ads - Month"><span
class="radio_price2" style="position: relative;
top: -13px;"> $4.99 - 12 Ads - Month</span>
</p>
<p style="margin-top: -30px;">
<input style="width: 4%;" type="radio" name="price_Ads_package" class="price_1"
value="$8.99 - 24 Ads - Month"><span
class="radio_price3"> $8.99 - 24 Ads - Month</span>
</p>
<p style="margin-top: -20px;">
<input style="width: 4%;" type="radio" name="price_Ads_package" class="price_1"
value="Need More"><span
class="radio_price4"> Need More</span></p>
</p>
<p class="prev_next">
<button style="background-color: lightgray;" @click.prevent="prev()" class="btn btn-info">
Previous
</button>
<button style="background-color: #01ABAA;" @click.prevent="next()" class="btn btn-primary">
Next
</button>
</p>
</template>
{% endif %}
<template v-if="picked == 'Personal Ad'">
<h1 class="post_adttl">Post Ad</h1>
<p class="select_p">
<input class="vue_input" type="number" placeholder="Bedrooms" name="bedrooms_p"
v-model="bedrooms" id="id_post_bedrooms">
<input class="vue_input" type="number" placeholder="Bathrooms" name="bathrooms_p"
v-model="bathrooms" id="id_post_bathrooms">
</p>
<p class="select_p">
<input class="vue_input" type="number" placeholder="SQFT" name="Square_ft_p" v-model="Square_ft"
maxlength="100" id="id_post_Square_ft">
<input class="vue_input" type="number" placeholder="Lot size" name="lot_size_p"
v-model="lot_size" maxlength="50" id="id_post_lot_size">
</p>
<p class="select_p">
<input class="vue_input" type="number" placeholder="Total rooms" v-model="total_rooms"
name="total_rooms_p" id="id_post_total_rooms">
<input class="vue_input" type="number" placeholder="Stories" name="stories_p" v-model="stories"
maxlength="200" id="id_post_stories">
</p>
<p class="select_p">
<input class="vue_input" type="number" placeholder="Year built" v-model="year_built"
name="year_built_p" id="id_post_year_built">
<input class="vue_input" type="number" placeholder="HOA" name="h_o_a_p" v-model="h_o_a"
maxlength="200" id="id_post_h_o_a">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Garages" name="garages_p" v-model="garages"
maxlength="200" id="id_post_garages">
<input class="vue_input" type="text" placeholder="Basement" name="basement_p" v-model="basement"
maxlength="200" id="id_post_basement">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Roof" name="roof_p" v-model="roof"
maxlength="200" id="id_post_roof">
<input class="vue_input" type="text" placeholder="Exterior" name="exterior_p" v-model="exterior"
maxlength="200" id="id_post_Exterior">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Cooling" name="cooling_p" v-model="cooling"
maxlength="200" id="id_post_cooling">
<input class="vue_input" type="text" placeholder="Heating" name="heating_p" v-model="heating"
maxlength="200" id="id_post_heating">
</p>
<!-- Select drop down list for schools based on state and city we prompt near by schools in drop down list dynamically. Multiple selection.-->
<p>
<select class="vue_input" style="width: 93%;" placeholder="Schools" name="schools_p"
v-model="schools" id="id_post_schools"></select>
</p>
<p class="select_p">
<input class="vue_input" type="file" name="image_p" v-model="image" accept="image/*"
id="id_post_image">
<input class="vue_input" type="file" name="image2_p" v-model="image2" accept="image/*"
id="id_post_image2">
</p>
<p class="select_p">
<input class="vue_input" type="file" name="image3_p" v-model="image3" accept="image/*"
id="id_post_image3">
<input class="vue_input" type="file" name="image4_p" v-model="image4" accept="image/*"
id="id_post_image4">
</p>
<p class="prev_next">
<button style="background-color: lightgray;border-color:lightgray;" @click.prevent="prev()"
class="btn btn-info">Previous
</button>
<button style="background-color: #01ABAA;border-color:#01ABBAA;" @click.prevent="next()"
class="btn btn-primary">Next
</button>
</p>
</template>
<template v-if="picked == 'business'">
<div class=" modal-body login-form" style="padding: 17px;width: 101%;background: rgb(237, 237, 237);position: absolute;left: -13px;">
<form style="position: relative;
left: 6px;" id="business_signup" action="/business_signup" method="post">
{% csrf_token %}
<h1 style="font-size:25px;margin-top:3px;margin-bottom:10px;">Sign Up</h1>
<p style="font-size:12px;float:left;color:grey;">Please fill in this form to create an account!</p>
<div class="form-group new-signup">
<input id="email_business" name="email" placeholder="Business Email Address"
style="border:1px solid #01ABAA;"
type="email">
<span class="input-icon"><i class="fa fa-envelope fa1"></i></span>
</div>
<div class="form-group">
<input type="password" id='password_consumer' class="InputPassword password_r"
name="password_consumer" placeholder="Password" onkeyup="validate_password()"><br>
<p id="password_result12_invalid" class="error_verify"
style="font-size: 8px;position: relative;top: 9px;"></p>
<span class="input-icon"><i class="fa fa-lock fa1"></i></span>
</div>
<div class="form-group">
<input type="password" id='repassword_consumer' class="password_r" name="repassword"
placeholder="Confirm Password" onkeyup="validate_password()"><br>
<p id="password_confirmation12_invalid" class="error_verify"
style="font-size: 8px;position: relative;top: 9px;"></p>
<span class="input-icon"><i class="fa fa-lock fa1"></i><i
class="fa fa-check icon fa1"></i></span>
</div>
<div class="form-group">
<input id="Business_Name" name="Business_Name" placeholder="Business Name" type="text"
maxlength="30">
<span class="input-icon "><i class="fa fa-landmark icon fa1"></i></span>
</div>
<div class="form-group">
<input id="phone" name="phone" placeholder="Phone Number">
<span class="input-icon "><i class="fa fa-phone icon fa1"></i>
</span>
</div>
<div class="form-group flex-row">
<input style="width:50%" id="firstname" name="firstname" placeholder="First Name" type="text"
maxlength="30">
<input style="width:50%" id="lastname" name="lastname" placeholder="Last Name" type="text"
maxlength="30">
</div>
<div class="form-group flex-row">
<input style="width:50%" class="InputZip" name="Zip" placeholder="Zip Code" type="text">
<input style="width:50%" class="Inputstate" name="state" placeholder="State" type="text">
</div>
<div class="select_business form-group">
<select class="i_do" id="referred_by" name="referred_by" type="select">
<option disabled selected value="">How did you hear about
us
</option>
<option class="o_drop" value="Email">Email
</option>
<option class="o_drop" value="website">Website</option>
<option value="Friend">Friend</option>
<option value="social medial">Social medial</option>
</select>
</div>
<div class="form-group" style="">
<label class="container12" id="mailing" name="mailing">
<input class="input" style="width: 17px;height: 17px;margin-left: -29px;
margin-top: -40px;display: inline-block;vertical-align: bottom;background-color: white;"
type="checkbox">
<p1 style="margin-left: 11px;">
I’m in for emails with exciting discounts and personalized recommendations
</p1>
</label>
</div>
<button class="login-btn" id="submit_consumer">
Sign Up
</button>
<p style="font-size:10px;margin-top: 4px;">By signing up,you agree to our <a href="#"
style="color:#DB0038;">Terms
of use</a> and <a href="#" style="color:#DB0038;">Privacy policy.</a></p>
<p>Already have an account?<a class="" data-dismiss="modal" data-target="#myModal"
data-toggle="modal"
href="#" style="color:#DB0038;"> Log In</a></p>
</form>
</div>
</template>
</div>
</fieldset>
vue.js
//Using vue.js script we have written data properties and this data properties are connected with form input fields with v-model
Vue.use(VueFormWizard)
var app = new Vue({
el: '#app',
data: {
step:1,
category:'',
title:'',
address:'',
city:'',
state:'',
zip:'',
price:'',
description:'',
bedrooms:'',
bathrooms:'',
Square_ft:'',
lot_size:'',
total_rooms:'',
stories:'',
year_built:'',
h_o_a:'',
garages:'',
basement:'',
roof:'',
exterior:'',
cooling:'',
heating:'',
price_Ads_package:'',
},
// By using this delimiters we were able to fix the vue.js compatibility with django. since the curly braces between django and
// vue.js conflicted, delimiters helped here to solve the conflicts
delimiters: ["<%","%>"],
ready: function() {
console.log('ready');
},
//This method is used for preview button while we click on preview we will navigate to previous screen-->
methods:{
prev() {
this.step--;
},
//By using next method user will able to navigate at next screen
next() {
this.step++;
},
selectCategory() {
this.category == category;
},
submitForm: function(){
axios({
method : "POST",
url: "{% url 'PostAd' %}", //django path name
headers: {'X-CSRFTOKEN': '{{ csrf_token }}', 'Content-Type': 'application/json'},
data : {"step1_category":this.category, "step1_title":this.title,
"step1_address":this.address,
"step1_city": this.city,
"step1_state": this.state,
"step1_Zip": this.zip,
"step1_price": this.price,
"step1_description": this.description,
"step2_bedrooms_p": this.bedrooms,
"step2_bathrooms_p": this.bathrooms,
"step2_Square_ft_p": this.Square_ft,
"step2_lot_size_p": this.lot_size,
"step2_total_rooms_p": this.total_rooms,
"step2_stories_p": this.stories,
"step2_year_built_p": this.year_built,
"step2_h_o_a_p": this.h_o_a,
"step2_garages_p": this.garage,
"step2_basement_p": this.basement,
"step2_roof_p": this.roof,
"step2_exterior_p": this.exterior,
"step2_cooling_p": this.cooling,
"step2_heating_p": this.heating,
"price_Ads_package": this.price_Ads_package},//data
}).then(response => {
console.log("response");
console.log(response.data);
this.success_msg = response.data['msg'];
window.location.replace('{% url "classifieds" %}') // Replace home by the name of your home view
}).catch(err => {
this.err_msg = err.response.data['err'];
console.log("response1");
console.log(err.response.data);
});
},
}
});
💖 💪 🙅 🚩
Alam487
Posted on February 11, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
