I am working on a Django site. This site has a form with preview button.
How I would like it to work: Text entered in the input field on HTML. Preview button pressed. Python script runs in background. Form to retain it's values.
What I have done: So far I have managed to a create form, a preview button, run the script and return the values as context to HTML and show it on the form. However the problem is, if the string has spaces. Form only shows first section of the string rather than whole string. Example: If I enter name as "John Smith" and press preview button. Form only shows me "John". Same if I do "London, United Kingdom". It shows me "London,"
I have looked onto Google and stackoverflow but couldn't find a solution to this, hence thought to ask here. I would appreciate if someone can guide me on this.
views.py
'''
nname = request.POST['name']
django_run_script()
context = {'name': nname}
'''
index.html
'''
<div class="form-group">
<label class="label" for="name">Full Name</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Name" required value={{ name|default:"" }}>
</div>
'''
Thank you, Kind regards,
Shashank
Edit1: Views.py
# # -*- encoding: utf-8 -*-
# """
# Copyright (c) 2019 - present AppSeed.us
# """
from django.contrib.auth.decorators import login_required
from django.shortcuts import render, get_object_or_404, redirect
from django.template import loader
from django.http import HttpResponse, HttpResponseRedirect
from datetime import datetime, timedelta
from django.conf import settings
from django import template
from django.contrib.auth.models import User
from app.script import django_run_script
def index(request):
context = {}
if request.method=='POST' and 'preview' in request.POST:
nname = request.POST['name']
location = request.POST['location']
django_run_script(nname)
print(nname, location)
context = {
'name': nname,
'location': location,
}
return render(request, 'index.html', context)
return render(request, 'index.html', context)
models.py
# -*- encoding: utf-8 -*-
"""
Copyright (c) 2019 - present AppSeed.us
"""
from django.db import models
# Create your models here.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="static/assets/css/style.css">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="wrapper">
<div class="row no-gutters mb-5">
<div class="col-md-6">
<div class="contact-wrap w-100 p-md-5 p-4">
<form action="" method="POST" id="contactForm" name="contactForm" class="contactForm">
{% csrf_token %}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="label" for="name">Full Name</label>
<input type="text" class="form-control" name="name" id="name" placeholder="Name" required value={{ name|default:"" }}>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="label" for="name">Select location</label>
{% comment %} <input type="text" class="form-control" name="location" id="location" placeholder="Location"> {% endcomment %}
<input class="form-control" name="location" id="location" type="text" placeholder="Enter your current location" type="text" autocomplete="on" runat="server" required value={{ location|default:"" }}>
</div>
</div>
<div class="col-md-12" hidden>
<div class="form-group">
<label class="label" for="city">Auto Location</label>
<input type="text" class="form-control" name="city" id="city" placeholder="city" required value={{ city|default:"" }}>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input name="preview" type="submit" value="Preview" class="btn btn-primary btn-block">
<div class="submitting"></div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-1 d-flex align-items-center">
<div class="contact100-pic js-tilt" data-tilt>
{% comment %} <img src="/static/assets/images/img-01.png" alt="IMG"> {% endcomment %}
</div>
</div>
<div class="col-md-5 d-flex align-items-center">
<div class="contact100-pic js-tilt" data-tilt>
<img src="/static/assets/images/NameNatal380.png" alt="IMG">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="static/assets/js/jquery.min.js"></script>
<script src="static/assets/js/popper.js"></script>
<script src="static/assets/js/bootstrap.min.js"></script>
<script src="static/assets/js/jquery.validate.min.js"></script>
<script src="static/assets/js/google-map.js"></script>
<script src="static/assets/js/main.js"></script>
<!--===============================================================================================-->
<script src="static/assets/vendor/tilt/tilt.jquery.min.js"></script>
<script >
$('.js-tilt').tilt({
scale: 1.1
})
</script>
<!--===============================================================================================-->
</body>
</html>
