Develop Reference

Add same form element below by clicking add button. using Angular Js

I have a form1 and a add button. The thing I want is to add same form as form2 below form1 on clinking add button. As I am new to Angular Js it will be very helpful if someone can help me out.
HTML
<div class="row">
<header class="panel-heading">
<h5 class="panel-title" style="padding-left: 1.5rem;">
<b>APPLICANTS</b>
<input class="btn btn-primary" style="float:right " type="button" value="Add" />
</h5>
<hr>
</header>
<div class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Name</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtFullName">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Nationality</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtNationality">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Pin Code</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtPincode">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">House No.</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtHouseNo">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You need to create an array of applicants model objects, let's call it applicantsArray, where every object will represent a single applicant form.
You need to initialize this array with one model empty on page load.
Then you need to wrap your form with ng-for and iterate over every applicant model. So the n-th form will be binded with the n-th model in the applicantsArray.
Last step will be to push an empty applicant model to applicantsArray when 'Add' is clicked. Then a new model is added and the DOM will render additional form for the new model.

Django: Get previous values of a multi-step form to dynamically display the fields of the next step

I am making a project in Django but Im not using Django built-in forms. Rather, I am using html and bootstrap to render forms. On a page, I want to create a quiz. I am doing this via a multi-step form where I input the number of questions on the first form. Then based upon this field, when I hit next, I want to have the same number of the fields for questions and corresponding answers to appear so that I can set them. For example, if I type 5 questions and hit next, it should have 5 fields for me to enter the questions and each question field should have 4 answer fields. Is there a way to dynamically do this?
Please help :(((( This is very important.
Thank you n here is my code snippet
{% block content %}
<div class="row">
<h2 style="color: darkblue;" class="text-center">Add a Quiz</h2>
</div>
<form action="" id="add_test_form" method="POST">
<!--This form will contain the quiz information-->
{% csrf_token %}
<div class="row">
<div class="form-row">
<div class="form-group col-md-6">
<label>Name of test</label>
<input type="text" class="form-control" name="test_name" required>
</div>
</div>
</div>
<div class="row">
<div class="form-row">
<div class="form-group col-md-6">
<label>Number of questions</label>
<input type="number" id="num_qu" class="form-control" name="test_num_questions" min="1"
oninput="validity.valid||(value='')" required>
</div>
</div>
</div>
<div class="row">
<div class="form-row">
<div class="form-group col-md-6">
<label>Time( Duration) in minutes</label>
<input type="number" class="form-control" name="test_duration" min="1"
oninput="validity.valid||(value='')" required>
</div>
</div>
</div>
<div class="row">
<div class="form-row">
<div class="form-group col-md-4">
<input type="button" value="Next" id="first_next" class="btn btn-primary btn-lg mb-10">
</div>
</div>
</div>
</form>
</div>
<script>
$(document).ready(function(){
$("#first_next").click(function(e){
var num_of_qu = $("#num_qu").val();
alert(num_of_qu);
});
});
</script>
{% endblock content %}

Add button under CKEditor is not visible

I have used CKEditor django plugin in my form modal. But when i try to show ADD button below the CKEditor, the button doesn't appear in the UI at all.
As shown in the below image, I have currently kept the Add button on the top of the CKEditor text box as its not appearing when placed at the bottom.
Below is the HTML code snippet
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="">Driver Name</label>
<input type="text" class="form-control" name="dn" id="dnn" required="True" />
</div>
<div class="form-group">
<label for="st">Driver Description</label>
<textarea name="editor1" id="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary up">
ADD
</button>
</div>
</div>
</div>
<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
Can someone please suggest how to make the add button make it appear below ckeditor.

If you are using Bootstrap 4, You can use the Order feature if your elements are wrapped inside a flex container.
Your code should look similar to this:
<div class="row">
<div class="d-flex">
<div class="col-md-12">
<div class="form-group">
<label for="">Driver Name</label>
<input
type="text"
class="form-control"
name="dn"
id="dnn"
required="True"
/>
</div>
<div class="form-group">
<label for="st">Driver Description</label>
<textarea name="editor1" id="editor1"></textarea>
<script>
CKEDITOR.replace("editor1");
</script>
</div>
<div class="modal-footer order-1">
<button type="submit" class="btn btn-primary up">
ADD
</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>

jquery form field write issue

I am updating hidden field in form with jquery. it works just fine for first three clicks after that it shows only first element value.
Here is working js fiddle jsfiddle link:
when users is clicking on tab the value of fileorurl changes to 1,2 or 3. it works for first 3-5 click but after that the value stocks to only 1. here is html
<div class="container" id="upload">
<div class="row">
<form id="upload-form2"
action="http://way2enjoy.com/modules/compress-png/converturl16.php"
name="arjun"
method="post"
enctype="multipart/form-data">
<div id="tab" class="btn-group" data-toggle="buttons">
<a href="#fileuu" class="btn btn-default active" data-toggle="tab">
<input type="radio" class="changev" value="1">File Upload
</a>
<a href="#urluu" class="btn btn-default" data-toggle="tab">
<input type="radio" class="changev" value="2">URL upload
</a>
<a href="#linkuu" class="btn btn-default" data-toggle="tab">
<input type="radio" class="changev" value="3">Website Link
</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="fileuu">
<label for="comment">Click below to choose files:</label>
<input type="file" name="file[]" multiple id="input" class="file_input">
</div>
<div class="tab-pane" id="urluu">
<label for="comment">Image Urls to Compress:</label>
<textarea class="form-control" rows="2" name="urls" id="urls"></textarea>
</div>
<div class="tab-pane" id="linkuu">
<label for="comment">Website URL to Analyze:</label>
<textarea class="form-control" rows="2" name="file[]" id="urls"></textarea>
</div>
</div>
<div class="alert alert-warning" role="alert" id="loading_progress"></div>
<br>
<input type="submit"
value="Compress »"
class="btn btn-primary btn-lg pull-right"
id="upload_btn"
name="upload_btn">
<input type="hidden" name="fileorurl" id="myField" value="">
</form>
</div>
</div>
Here is javascript:
<script>
$('.changev').change(function () {
var valueuu = $(this).val();
$("#myField").val(valueuu);
});
</script>
Any help will be useful thanks!

Your checkboxes not updating for some strange reason after a few clicks. You can use the click event on their parents instead:
$('#tab a').on('click', function(){
var valueuu = $(this).find('input').val();
$("#myField").val(valueuu);
});
Fiddle

I would personally use a custom attribute for that and listen to Bootstrap events. The default value of the input is 1, because that will be the first active tab.
$(document).on('shown.bs.tab', '#tab > a', function(e) {
var dataType = $(e.target).attr('data-type');
$("#myField").val(dataType);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="upload">
<div class="row">
<form id="upload-form2" action="http://way2enjoy.com/modules/compress-png/converturl16.php" name="arjun" method="post" enctype="multipart/form-data">
<div id="tab" class="btn-group" data-toggle="buttons">
File Upload
URL upload
Website Link
</div>
<div class="tab-content">
<div class="tab-pane active" id="fileuu">
<label for="comment">Click below to choose files:</label>
<input type="file" name="file[]" multiple id="input" class="file_input">
</div>
<div class="tab-pane" id="urluu">
<label for="comment">Image Urls to Compress:</label>
<textarea class="form-control" rows="2" name="urls" id="urls"></textarea>
</div>
<div class="tab-pane" id="linkuu">
<label for="comment">Website URL to Analyze:</label>
<textarea class="form-control" rows="2" name="file[]" id="urls"></textarea>
</div>
</div>
<div class="alert alert-warning" role="alert" id="loading_progress"></div>
<br>
<input type="submit" value="Compress »" class="btn btn-primary btn-lg pull-right" id="upload_btn" name="upload_btn">
<input type="text" name="fileorurl" id="myField" value="1">
</form>
</div>
</div>
Fiddle here: https://jsfiddle.net/zyynnzm9/3/

Found it ^^ your radio buttons are getting checked but they aren't getting unchecked so they aren't canceling each other .. because they aren't in the same radio group
You have to put them in a radio group by adding the name attribute with equal value to each

Why do i get 2 default characters in my password input field

I have a little problem.... see here : http://prntscr.com/5anqx8 : here you can see what's wrong, there are 2 default characters in those inputs... this happends on multiple pages and there is nothing in the code what could be the problem. I use Firefox but have Chrome as well. On Chrome is doesn't show these characters which is kinda weird. How do I get rid of these Characters?? I've tried clearing all history cache and stuff, the whole list. I restarted Firefox.... nothing works. I'm not sure if this is really a programming question but you guys are really smart so... I'm asking you :p
Thanks a lot,
Mike
CODE :
<!-- Right Content -->
<div class="col-md-6">
<div class="panel-box">
<div class="titles">
<h4>Registratie Formulier</h4>
</div>
<!-- Form Contact -->
<form class="form-theme">
<div class="row">
<div class="form-group">
<div class="col-md-6">
<label>Uw gebruikersnaam</label>
<input type="text" required="required" value="" maxlength="100" class="form-control" name="Name" id="name">
</div>
<div class="col-md-6">
<label>Uw email</label>
<input type="email" required="required" value="" maxlength="100" class="form-control" name="Email" id="email">
</div>
<div class="col-md-6">
<label>Uw wachtwoord</label>
<input type="password" required="required" value="" maxlength="100" class="form-control" name="Password" id="password">
</div>
<div class="col-md-6">
<label>Herhaal uw wachtwoord</label>
<input type="password" required="required" maxlength="100" class="form-control" name="Password2" id="password2">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="submit" value="Registreer" class="btn btn-lg btn-primary">
</div>
</div>
</form>
<!-- End Form Contact -->
<div class="result"></div>
</div>
</div>
<!-- End Right Content -->

Some browsers can save form data like passwords, names and adresses.
When getting errors like this, remember to test in a private window/session to rule this out.