HTML code
<form novalidate>
<div class="list">
<div class="list list-inset">
<label class="item item-input" id="descriptions">
<input type="text" height: "90" class="description" placeholder="Description ..." ng-model="describe">
</label>
<label input="email" class="item item-input" id="email" ng-model="email">
<span class="input-label">Email</span>
<input type="email">
</label>
<label class="item item-input" ng-model="date">
<span class="input-label">Date</span>
<input type="date">
</label>
</div>
<button class="button button-block button-balanced" ng-click="insertData(describe,email, date); AddItem()">Add Task</button>
<button class="button button-block button-assertive" ng-click="closeModal()">cancel</button>
</div>
</form>
I want to have a function that takes the values of these input text fields and passes them in a <div> when the Add Task button is clicked.
So, you need to set up a click event handler for the button that copies the data. See comments inline below:
// Get references to DOM elements needed to solve problem:
var addTask = document.querySelector(".button-balanced");
var description = document.querySelector(".description");
var email = document.querySelector("[type=email]");
var date = document.querySelector("[type=date]");
// Set up click event handling function for button
addTask.addEventListener("click", function(){
// Create an new "row" for data
var div = document.createElement("div");
// populate the "row" with the values from the text fields
div.textContent = description.value + ", " + date.value + ", " + email.value;
// Add the row to the document
document.body.appendChild(div);
});
<form novalidate>
<div class="list">
<div class="list list-inset">
<label class="item item-input" id="descriptions">
<input type="text" height: "90" class="description" placeholder="Description ..." ng-model="describe">
</label>
<label input="email" class="item item-input" id="email" ng-model="email">
<span class="input-label">Email</span>
<input type="email">
</label>
<label class="item item-input" ng-model="date">
<span class="input-label">Date</span>
<input type="date">
</label>
</div>
<button class="button button-block button-balanced" ng-click="insertData(describe,email, date); AddItem()">Add Task</button>
<button class="button button-block button-assertive" ng-click="closeModal()">cancel</button>
</div>
</form>
I believe your problem is the duplication of IDs:
<label id="email">
<input id="email">
</label>
That is invalid code as IDs have to be unique within the same document.
If you access the content of the <input> you will get undefined if you use the ID to access the element as the ID is taken by the label already.
Labels are associated using the for attribute:
<label for="email">
<input id="email">
</label>
This might fix it.
In case it does not, you can use plain JavaScript and the DOM:
<label for="email">Email: <input id="email"></label>
<label for="date">Date: <input id="date" type="date"></label>
<button id="add">Add</button>
<script>
document.getElementById("add").addEventListener('click', function() {
var div = document.createElement('div');
div.textContent = document.getElementById('email').value + ' on the ' + document.getElementById('date').value;
document.body.appendChild(div);
});
</script>
Related
I'm still learning to programme on AngularJS.
I want to get values from the input box and then click on the button I want to save them in the database.
My database table is called "user". I have columns like id, username, password, name.
I have two checkbox.When I click on first checkbox(Edit) it displaying "div myVar",when i click on second checkbox(Add new user) it displaying "div myVar1".
I want to activate this button "Add" to add input box values to database MySQL. Please help me.
I have this html code:
<label><input type="checkbox" ng-model="myVar">Edit</label>
<label><input type="checkbox" ng-model="myVar1">Add new user</label>
<div ng-show="myVar">
<div class="form">
<form ng-submit="saveItem(userForm.$valid)" name="userForm">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Save</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form><form ng-submit="createUser(userForm.$valid)" name="userForm1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control1" ng-model="usernamee" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control1" ng-model="passwordd"required id="password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control1" ng-model="namee" required id="username" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-click="createUser();" type="submit">Add user</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
And Angular code:
$scope.createUser=function()
{
//console.log($scope.activeItem);
//delete $scope.activeItem.hash_method
var objectToSave = {
username: $scope.usernamee,
password: $scope.passwordd,
name: $scope.namee,
id: $scope.id
};
{
defaultAdapter.query('INSERT INTO users(username,password,name,id) VALUES(username = :usernamee, password = :passwordd,name = :namee WHERE id =:id)',
{ replacements: objectToSave, type: Sequelize.QueryTypes.UPDATE }
).then(projects => {
console.log(projects);
$scope.editMode = false;
$scope.activeItem = false;
$scope.refresh();
});
}
}
In my web application, I have a form that provides me to create new blog. The code is:
<form method="post" action="#" id="createBlog">
<div class="form-group">
<label for="BlogName">Blog Name</label>
<input type="text" class="form-control" placeholder="Blog Name" name="blogName">
</div>
<div class="form-group">
<label for="Content">Content</label>
<textarea type="text" class="form-control" placeholder="content" name="content"></textarea>
</div>
<div class="form-group">
<label for="Image">Upload Image</label>
<input type="file" class="form-control" name="myImage">
</div>
<button type="button" name="Add more image" class="btn btn-default" onclick="addMoreFile()">+ Add More Image</button>
<br>
<br>
<button type="submit" name="send" class="btn btn-default" value="Send">Send</button>
</form>
For this form, my plan is that when I press the "+ Add More Image" button, to create additional file upload area, which is:
<div class="form-group">
<label for="Image">Upload Image</label>
<input type="file" class="form-control" name="myImage">
</div>
To do this, I used Javascript and applied two approaches. When I used my first approach which is my prefer due to it is more easy to implement, nothing happened. For my second approach, it works.
First Approach:
function addMoreFile(){
var createForm = document.getElementById("createBlog");
var uploadFile = createForm.getElementsByTagName("div")[2];
var firstButton = createForm.getElementsByTagName("button")[0];
createForm.insertBefore(uploadFile,createForm.getElementsByTagName("button")[0]);
}
Second Approach:
function addMoreFile(){
var divNode = document.createElement("div");
divNode.setAttribute("class","form-group");
var labelNode = document.createElement("label");
labelNode.setAttribute("for","Image");
labelNode.innerHTML = "Upload Image";
var myInput = document.createElement("input");
myInput.setAttribute("type","file");
myInput.setAttribute("class","form-control");
myInput.setAttribute("name","myImage");
divNode.appendChild(labelNode);
divNode.appendChild(myInput);
createForm.insertBefore(divNode,createForm.getElementsByTagName("button")[0]);
}
What is the difference between two approaches/codes, and why it is not work when I apply the first approach?
I'm trying to code this form in sharing.html so that when one is done putting in information and want to add more contacts, they can click on "add another contact" but when I tried to write out the code, the dreamweaver I was using said that there's a error in Javascript. I don't know how I can fix this error: (the script is almost at the bottom)
<div class="recordsbox">
<h1>Sharing Center</h1>
<p>Please enter the contact information that you want to share.</p>
<div id="shareform">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
<div class="addcontact">
<input type="button" value="Add another contact?" onClick="addForm('shareform');">
</div>
<script>
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
';
document.getElementById(divName).appendChild(newform);
shareform++;
}
</script>
<div class="nextbutton">
Next
</div>
</div>
I based this code on that tutorial: http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/.
Also you can check out full code at http://hamzakhan.name/dev/eric/options_innerpage/sharing.html
For a quicker look, here is the script in question:
<script>
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'">
<form id="share" method="POST">
<div class="notifyfield">
<label>Who is this person?</label>
<input type="text">
</div>
<div class="notifyfield">
<label>Email Address:</label>
<input type="email" >
</div>
<div class="notifyfield">
<label>Phone Number:</label>
<input type="tel" >
</div>
</form>
</div>
';
document.getElementById(divName).appendChild(newform);
shareform++;
}
</script>
Here is the new code:
var shareform = 0;
function addForm(divName) {
shareform++;
var newform = document.createElement('div');
newform.innerHTML = '<div id="shareform'+shareform+'"><form id="share" method="POST"><div class="notifyfield2"><div class="sharefield"><label>Who is this person?</label><input type="text"></div></div><div class="notifyfield"><label>Email Address:</label><input type="email" ></div><div class="notifyfield"><label>Phone Number:</label><input type="tel" ></div></form><hr class="greenline"></div>';
document.getElementById(divName).appendChild(newform);
shareform++;
}
You need to delete all invisible characters. You can't "newline" string.
I have to create 3 input text boxes for getting user input about names and email addresses.
I have to create it dynamically, i.e. as the user clicks on the email input field a new line of all the three element supposed to be created.
This is the code for one line with the 3 inputs:
<div class='row' id="inputcontainer">
<div class="form-group clearfix" >
<div class="col-md-2 col-md-offset-2">
<div class="form-text-field first-name">
<label>First name</label>
<input type="text" id="firstName10" class="signup-input" name="" placeholder="">
</div>
</div>
<div class="col-md-2">
<div class="form-text-field last-name">
<label>Last name</label>
<input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
</div>
</div>
<div class="col-md-4">
<div class="form-text-field email">
<div>
<label>Email</label>
<input type="text" data-index="0" id="inputMail0" class="signup-input text-value " name="email[0]" placeholder="e.g. example#url.com"/>
<span class="common-sprite disNone sign-up-cross first"></span>
</div>
</div>
</div>
</div>
</div>
How to create it dynamically ?
I'm using the following code for cloning and it's clone it several times instead 1
maxIndex = 0;
$('form').on('input','.email',function(){
$(this).parent().find('.common-sprite').removeClass('disNone');
var lastmail = $(this); if(($(this).val().length > 0)&&(lastmail.data('index') == maxIndex)) {
var count = $('.row.inputcontainer').length;
console.log(count);
maxIndex++;
var clone = $('#template').clone(true).attr('id', '');
clone.find('.firstName[id=firstName'+(maxIndex-1)+']').attr('id', 'firstName' + maxIndex).attr('name', 'first[' + maxIndex +']').addClass('signup-input firstName').val('');
clone.find('.lastName[id=lastName'+(maxIndex-1)+']').attr('id', 'lastName' + maxIndex).attr('name', 'last[' + maxIndex +']').addClass('signup-input lastName').val('');
clone.find('.email[id=inputMail'+(maxIndex-1)+']').attr('id', 'inputMail' + maxIndex).attr('name', 'email[' + maxIndex +']').data('index', maxIndex).addClass('signup-input text-value email').val('');
$('.inputcontainer').append(clone);
}
something like this? i used .blur() to trigger the dynamic adding so that if you type something in the email input and you click outside of it, then the next 3 lines of information will show up. i also added some classes to help jquery find elements faster and more reliably. i used clone() to recreate the same structure of the 3 lines every time.
$(document).ready(function() {
$('.email').on('blur', function() {
if($(this).val().length > 0) {
var count = $('.row').length;
console.log(count);
var clone = $('#template').clone(true).attr('id', '');
clone.find('.firstName').attr('id', 'firstName' + count).val('');
clone.find('.lastName').attr('id', 'lastName' + count).val('');
clone.find('.email').attr('id', 'inputMail' + count).val('');
$('body').append(clone);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row inputcontainer' id="template">
<div class="form-group clearfix" >
<div class="col-md-2 col-md-offset-2">
<div class="form-text-field first-name">
<label>First name</label>
<input type="text" id="firstName0" class="signup-input firstName" name="" placeholder=""/>
</div>
</div>
<div class="col-md-2">
<div class="form-text-field last-name">
<label>Last name</label>
<input type="text" id="lastName0" class="signup-input lastName" name="" placeholder="optional"/>
</div>
</div>
<div class="col-md-4">
<div class="form-text-field email">
<div>
<label>Email</label>
<input type="text" data-index="0" id="inputMail0" class="signup-input text-value email" name="email[0]" placeholder="e.g. example#url.com"/>
<span class="common-sprite disNone sign-up-cross first"></span>
</div>
</div>
</div>
</div>
</div>
hope this helps!
Is this something similar to what you would like?
$(document).on("blur",".add",function()
{
$("#inputcontainer").append("<br />");
$("#inputcontainer").append("First Name <input type='text' class='signup-input' name='' placeholder='' /><br />");
$("#inputcontainer").append("last Name <input type='text' class='signup-input' name='' placeholder='optional' /><br />");
$("#inputcontainer").append("Email Address <input type='text' data-index='0' class='signup-input text-value add' name='email[0]' placeholder='e.g. example#url.com' /><br />");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row' id="inputcontainer">
<div class="form-group clearfix t" >
<div class="col-md-2 col-md-offset-2">
<div class="form-text-field first-name">
<label>First name</label>
<input type="text" id="firstName10" class="signup-input" name="" placeholder="">
</div>
</div>
<div class="col-md-2">
<div class="form-text-field last-name">
<label>Last name</label>
<input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
</div>
</div>
<div class="col-md-4">
<div class="form-text-field email">
<div>
<label>Email</label>
<input type="text" data-index="0" id="inputMail0" class="signup-input text-value add" name="email[0]" placeholder="e.g. example#url.com"/>
<span class="common-sprite disNone sign-up-cross first"></span>
</div>
</div>
</div>
</div>
</div>
Type into the email textbox then leave to create the new textboxes.
I have some forms like this:
<div class="well">
<form>
<span class="remove pull-right"><i class="fa fa-times pointer"></i></span>
<div class="form-group" style="margin:0">
<label for="image-link">Image Link</label>
<input type="text" name="image-link" value="" class="form-control" >
</div>
<div class="form-group" style="margin:0">
<label for="content">Content</label>
<textarea class="form-control" name="content" rows="10"></textarea>
</div>
<div class="form-group" style="margin:0">
<label for="author">Author</label>
<input type="text" name="author" value="" class="form-control" >
</div>
</form>
</div>
....
<div class="well">
<form>
<span class="remove pull-right"><i class="fa fa-times pointer"></i></span>
<div class="form-group" style="margin:0">
<label for="image-link">Image Link</label>
<input type="text" name="image-link" value="" class="form-control" >
</div>
<div class="form-group" style="margin:0">
<label for="content">Content</label>
<textarea class="form-control" name="content" rows="10"></textarea>
</div>
<div class="form-group" style="margin:0">
<label for="author">Author</label>
<input type="text" name="author" value="" class="form-control" >
</div>
</form>
</div>
The forms will be added more and more when I click the add button, so will have multi forms.
I want to submit multi datas into an json arrayjust looks like this:
"quotes":[
{"image":"image_link","content":"content","author:"author"}
{"image":"image_link","content":"content","author:"author"}
...
{"image":"image_link","content":"content","author:"author"}
]
which is an array will contain all of the forms' datas. And the amount of forms is not fixed. It will be changed when I click add button.
So how can I do that automatically.
Thank you so much!
You can iterate through all the form elements on the page by calling the following function:
function generateArrayData() {
var forms = document.querySelectorAll(".well form");
var quotes = [];
for(var i = 0; i < forms.length; i++) {
var form = forms[i];
quotes.push({
image: form.querySelector("input[name='image-link']").value,
content: form.querySelector("textarea").value,
author: form.querySelector("input[name='author']").value
})
}
return quotes;
}
The way this works is that querySelectorAll loads all of the form elements on the page within a div with the class .well. We then iterate through the elements from the previous query and use querySelector to pull out each individual element we'd like to extract.