We Keep Coding

Creating input fields inside a form using JavaScript

I'm working on a quiz app and want to generate a number of input fields representing the answers based on the value that the user types.
I'm using a button named "create" to do that Using JavaScript, but when clicking the button it submits the form.
Please Check the two images below.
Input
Output
HTML Code
{% load static %}
{% block body %}
<button class="btn btn-primary new">Add a question</button>
<form class="question" method="POST" style="display: none">
{% csrf_token %}
<div class="form-group">
<label for="exampleInputEmail1">Title</label>
<input type="text" class="form-control" id="title" placeholder="Question title">
</div>
<div class="form-group" id="answers_num">
<label for="exampleInputPassword1">Number of answers</label>
<input type="number" class="form-control" id="ans_number">
<button class="create_answers">Create</button>
</div>
<div class="form-group">
{% comment %} Generated input fields {% endcomment %}
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
{% block script %}
<script src="{% static 'mcq/index.js' %}"></script>
{% endblock %}
{% endblock %}```
JS code
document.querySelector(".new").addEventListener("click", ()=> {
document.querySelector(".question").style.display = 'block';
document.querySelector("#create_answers").addEventListener("click", ()=> {
answers = this.value;
console.log(answers);
// Create input fields
for (let i = 0; i < answers; i++) {
input = document.createElement("input");
input.classList.add('form-control');
answersDiv = document.querySelector("#answers").appendChild(input);
}
})
})```

You need to explicitly set the type of the button, like
<button class="create_answers" type="button">Create</button>
in order to avoid submitting the form upon click.

Django post text using submit button without using input tag

I have a django template in which there is a form in which I am getting input from the user.
template.html
{% extends 'header.html' %}
{% load staticfiles %}
{% block content %}
<h3> Questtion</h3>
<img src="/media/{{ image }}" >
<br> <br>
<h3> Responses </h3>
<form method="post" action="/tools/submit">
{% csrf_token %}
<input type="text" name="first_response" placeholder="First Response" size="40" required>
<input type="text" name="second_response" placeholder="Second Response" size="40" required>
<input type="text" name="third_response" placeholder="Third Response" size="40" required>
<input type="text" name="fourth_response" placeholder="Fourth Response" size="40" required>
<input type="text" name="fifth_response" placeholder="Fifth Response" size="40" required>
<button type="submit" >Submit</button>
</form>
{% endblock %}
The text from input is easy to get with the following method in views.py
def post_form(request):
if request.method == 'POST':
first_response = request.POST.get('first_response')
second_response = request.POST.get('second_response')
third_response = request.POST.get('third_response')
fourth_response = request.POST.get('fourth_response')
fifth_response = request.POST.get('fifth_response')
image_name = # HOW TO GET {{ image }} name here ?
But I want to also post {{ image }} from <img src="/media/{{ image }}" > also when the submit button is clicked. How can I do that ?

in html
<form method="post" action="/tools/submit" enctype="multipart/form-data">
<input type="file" name="image" placeholder="Image Response" size="40" required>
in view
fifth_response = request.FILES.get('image')

Inside your html template form add this line
<input type="hidden" name="question" value="/media/{{ image }}">
in Django views simply get the image path
fifth_response = request.POST.get('question')
since the image is already on your server i don't think you would like to have it as file. so getting file path is enough.

Make Password Field Not Required in Shopify Create Customer Form

I am trying to create a from on my shopify store that will collect an email address and a "Goal" however I believe the default functionality of shopify requires a password to create an account for the shopify store. I want to get around the password requirement. I have pasted what I have so far, any help would be amazing.
{% form 'create_customer' %}
{{ form.errors | default_errors }}
{% if form.posted_successfully? %}
<script>
window.location = "https://www.thankyoupage";
</script>
{% endif %}
<div class="clearfix large_form">
<label for="email" class="login">Email Address</label>
<input type="email" value="" name="customer[email]" id="email" class="large" size="30" />
</div>
<div class="clearfix large_form">
<label for="goal">Goal </label>
<select name="customer[note][Goal]" id="goal">
<option value=""></option>
<option value="Lose Weight">Goal 1 </option>
<option value="Eat Healthy">Gaol2</option>
<option value="Peak Performance">Goal 3</option>
</select>
</div>
<div class="clearfix large_form" style="display:none;">
<label for="password" class="login">Password</label>
<input type="password" value="" name="customer[password]" id="password" class="large password" size="30" is_required="0" />
</div>
<button type="submit" value="Create">Get Started</button>
{% endform %}

If you prefill the field with a default (random) value, the form check requirements should be satisfied.

Object required in validation

I am trying to validate code in javascript. Here is my code:
if(document.getElementById("name").value == ""){
alert("Name is a required field");
document.getElementById("name").focus();
return false;
}
name is id in my html page:
<div class="app-form-box">
{% if review %}
{% if not review.name %}
<input type="text" alt="" onkeyup="return validateField(name)" tabindex="2" name="name" id="name" class="disabled inputtxtlarge" onfocus="highlightInput(this.id)" onblur="return (!validateField(name) || unhighlightInput(this.id))" maxlength="50" value="{{name|moonescape}}" disabled="disabled"/><span> </span>
{% else %}
<input type="text" alt="" onkeyup="return validateField(name)" tabindex="2" name="name" id="name" class="inputtxtlarge" onfocus="highlightInput(this.id)" onblur="return (!validateField(name) || unhighlightInput(this.id))" maxlength="50" value="{{name|moonescape}}"/><span> </span>
{% endif %}
{% else %}
<input type="text" alt="" onkeyup="return validateField(name)" tabindex="2" name="name" id="faname" class="inputtxtlarge" onfocus="highlightInput(this.id)" onblur="return (!validateField(name) || unhighlightInput(this.id))" maxlength="50" value="{{name|moonescape}}"/><span> </span>
{% endif %}
<div class="servererror">
{% if form_errors.name %}
* {{ form_errors.name|join:"| " }}<br/>
{% endif %}
</div>
</div>
But I am getting OBJECT REQUIRED. Please suggest how to put check in js file for this. Thanks

Changing input type after event

I'm trying to change the input type in a form from 'hidden' to 'text' after a Javascript variable has a value. My current code is this:
var currentUser;
var getButton = document.getElementById("button");
getButton.addEventListener("click",getUser,false);
function getUser(event) {
var user = document.getElementById("username");{
if(user.value !=="") {
currentUser = user.value;
}
event.preventDefault();
}
if(currentUser.value!=="") {
document.getElementById("message").type="text";
}
}
My HTML is this:
<form method = "post">
{% if username %}
<label>{{ username }}</label>
<input id="message" type="text" size="70" name="message" />
<input type="hidden" name="username" value="{{ username }}" />
<input type="hidden" name="timestamp" value="{{ timestamp }}" />
{% else %}
<label>Pick a username: </label>
<input type="text" size="10" name="username" id="username" />
{% endif %}
<input type="submit" value="send" id="button" />
</form>
</div>
Can anyone tell me where I'm going wrong? At the moment, whenever I run the code, it gets stuck on 'username', and the 'message' box doesn't appear.