We Keep Coding

Django Forms or own html forms?

Is it a good practice to write own forms in django templates isntead of creating built-in django forms?
Like this:
<div class="container">
<div class="row justify-content-center mt-5">
<div class="col-4">
<form method="post" >
{% csrf_token %}
<div class="form-group">
<label for="username">UserName</label><br>
<input type="text" id="username" placeholder="username" name="{{ form.username.name }}"
class="form-control">
</div>
<div class="form-group">
<label for="password1">Password</label><br>
<input type="password" id="password1" placeholder="password"
name="{{ form.password1.name }}" class="form-control">
</div>
<div class="form-group">
<label for="password2">Password</label><br>
<input type="password" id="password2" placeholder="password" name="{{ form.password2.name }}"
class="form-control"> <span id="help"></span>
</div>
<input type="submit" class="btn btn-primary form-control" value="Send">
</form>
</div>
</div>
</div>

Django's docs say the following about their role in form creation:
"preparing and restructuring data to make it ready for rendering"
"creating HTML forms for the data"
"receiving and processing submitted forms and data from the client"
source: https://docs.djangoproject.com/en/2.1/topics/forms/
If you want to let them do the heavy lifting and manage those three things listed above then why not? No need to re-invent the wheel unless you are doing something that requires it. It really depends on what you're building.

As a heavy user of django and its forms. I recommend django forms with django-crispy-forms. This is the best package you can use to customize a form by functionality and/or layout. They have ready template forms for bootstrap too which I use for most of my projects.
Hope this helps!

How to link to another page based on a returned value

I have just started using GWTBootstrap. I have set up my login page and now I want to:
If login was unsuccessful stay on page
If value returned from the database is "1" go to htmlpage1.html
If value returned from the database is "2" go to htmlpage2.html
In this way if the wrong login information is entered I do not go to the next page and, if successful login, people with different access levels are presented with different information.
Is there a tutorial that covers this please?
My html code is:
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" class="input-block-level" placeholder="Email address">
<input type="password" class="input-block-level" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<button id="SignIn" class="btn btn-large btn-primary" type="submit">Sign in</button>
<script type="text/javascript">
document.getElementById("SignIn").onclick = function () {
location.href = "htmlpage1.html";
};
</script>
</form>
</div> <!-- /container -->

You need to create an AJAX request inside on-click method in order to get some response from a POST url, based on it, you will redirect to the correct html.
Anyway, is better to use some framework to do that.

How to show js message from html action

I have this form in html
<form class="form-horiz" role="form" action="" >
<div class="form-group-1" style="margin-left:5px">
<div class="col-sm-10">
<input type="text" class="form-control" id="adsend" placeholder="Enter your ad" >
</div>
</div>
<div class="form-group-1">
<div class="col-sm-offset">
<button type="submit" class="btn btn-default" name="send" id="send" >Send</button>
<button type="submit" class="btn btn-default" value="classify">Classify</button>
</div>
</div>
</form>
What I need to do is: The user will write something in text and after click on classify button js message will appear to the user with some results, is it possible to do something in action="" or there is another way to do it?

You can use event listeners for button clicks if you'd like instead of form actions. Check out this documentation, hopefully it'll help! I'd suggest something like this:
<form class="form-horiz" role="form" action="" >
<div class="form-group-1" style="margin-left:5px">
<div class="col-sm-10">
<input type="text" class="form-control" id="adsend" placeholder="Enter your ad" >
</div>
</div>
<div class="form-group-1">
<div class="col-sm-offset">
<button type="submit" class="btn btn-default" name="send" id="send" >Send</button>
<button id="classify" type="submit" class="btn btn-default" value="classify">Classify</button>
</div>
</div>
</form>
and then have this in some js file
document.getElementById("classify").addEventListener("click", function () {
// do some js stuff here
});
EDIT:
Another alternative would be to use an onclick attribute, which is also documented in the link I posted before, but this is a little antiquated, and your function has to be named in the global scope and it's not really a good idea in general. I'd go with an event listener!

I would suggest you to have jQuery added into your Application. It makes your life easier in your construction.
Check this https://jsfiddle.net/dqwLv8q7/
I added id in your button and made it preventDefault() as it fire us submit action of your form as you set it "type=submit". So your "classify" click button now just shows Alert message with value of your "adsend" ID input value. You can consider to use another tag and replace it with message to your user.

How to get around the FormSpree redirect?

I got my website over on the Github Pages Service. I'm trying to implement the FormSpree free contact form but after you submit the form, it redirects you to a different website. Something I'd like to avoid. So I looked it up on the internet and of course others wanted to get rid of it too (I omitted my email in the below picture).
This is the form I got above but it doesn't actually work at all. It worked before I tried to fiddle with it though.
Here is what the form looks like by default from FormSpree:
<form action="//formspree.io/your#email.com"
method="POST">
<input type="text" name="name">
<input type="email" name="_replyto">
<input type="submit" value="Send">
</form>
Here is my version (which worked fine before I tried to get around the redirect)
<div class=modal-body style="background-color: #454545">
<p>Please use the form below to contact us regarding feedback or any questions you may have!
We will never use the information given below to spam you and we will never pass on your
information to a 3rd party.</p>
<p>As we are using <a target="_blank" href="http://formspree.io">FormSpree</a> for this form
please consult their privacy policy for any questions regarding this matter.</p>
<form id="contactform" method="POST">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Name</span>
<input name="form-name-input" type="text" name="name" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Email</span>
<input name="form-email-input" type="email" name="_replyto" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Subject</span>
<input name="form-subject-input" type="text" name="subject" class="form-control" required>
</div>
<div class="input-group">
<span class="input-group-addon">Description</span>
<textarea name="form-description-input" name="description" class="form-control" rows="4" cols="60" required></textarea>
</div>
<input type="text" name="_gotcha" style="display:none" />
<input class="btn btn-success" data-dismiss="modal" type="submit" id="form-submit-btn" value="Submit">
<input type="hidden" name="_next" value="http://www.dynamicrealities.net" onclick="FormSentConfirmation()"/>
</div>
<script>
var contactform = document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities#gmail.com');
</script>
</form>
</div>
<div class="modal-footer" style="background-color: #333333">
<button class="btn btn-danger btn-bg" data-dismiss="modal" type="button" id="form-dismiss-btn" onclick="">Close</button>
</div>
And when I call _next I want it to execute the following alert:
function FormSentConfirmation() {
alert('Thanks for the email, we\'ll be in touch promptly.');
}
When I press the Submit button, all that happens is that the form goes away but I don't receive any emails. I'm probably just doing this wrong as I am fairly new still to HTML/JavaScript.

Update: The feature available only on paid plans.
Use this hidden input field inside the form for redirection after form submission. You can redirect users to a page that you like or you have created by using this code block.
<input type="hidden" name="_next" value="//site.io/thanks.html" />
replace value with a valid thank-you page URL.
Follow this link for a tutorial on how to use Formspree and also a video demo

Follow their AJAX example at the bottom: https://formspree.io/
$("#sendMessage").on("click", function() {
$.ajax({
url: "//formspree.io/dynamicrealities#gmail.com",
method: "POST",
data: {message: "hello!"},
dataType: "json"
});
});
Remember to include jQuery as well for this to work. Remove the:
var contactform = document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities#gmail.com
and replace it with my code and change the selector. Or use $("form").on("submit"...
Here is my example, which sends you a mail and prompts an alert for the user: http://jsfiddle.net/228d4snb/
Do anything you'd like to do right before that return false;

You can put the form in an iframe so only the iframe gets redirected. What I did was create a separate html doc with just the contact form html (and any associated scripts) and then in my actual contact.html page I put:
<iframe src="contact-form.html" class="container"></iframe>.
Style the iframe to the appropriate size and with no border and it should work swimmingly.

Using an answer to comment system with multiple inputs in angularJS

I have comments fetched by AngularJS from a webservice. I then fill my HTML with AngularJS data.
There can be answers to any of these comments, and there's always an input after the comments and answer (in the same div) to answer to the whole post.
Here's the HTML showing this :
<div class="message" ng-repeat="post in ctrl.posts" ng-if="ctrl.posts">
...
<div class="message_answer" ng-repeat="answer in post.answer" ng-if="post.answer">...</div>
<form method="POST" ng-submit="ctrl.add_answer_to_post = post.message.add_answer_to_post">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="post_id" value="<% post.message.id %>">
<textarea class="comment" name="comment" placeholder="Write your message" ng-model="post.message.answer_added"></textarea>
<div class="message-send">
<button type="submit" class="general-button"><i class="fa fa-send"></i> React</button>
</div>
</form>
</div>
But I have two problems here.
First, the ng-submit that I did seems dodgy.
I did this because I don't know how to get the textarea value that's in the form I submit.
Same goes for post_id.
ctrl.posts is an array of objects or empty, and ctrl.posts[0].answer is an array of objects or empty.
How do I get the values that are contained in the form I submitted ?