I have a form like this one below, which contains steps and each steps contains multiple courses.
<div class="si-steps">
<input type="text" class="si-step-input" name="step-name">
<input type="text" class="si-step-input" name="step-id">
<div class="si-courses">
<input type="text" class="si-step-input" name="course-name">
<input type="text" class="si-step-input" name="course-id">
</div>
<button type="button" id="si-course-btn" class="si-course-btn">Add course</button>
</div>
<button type="button" id="si-step-btn" class="si-step-btn">Add step</button>
How do i append these properly when i click on the "Add step" and "Add course" buttons ?
i need to add them in this format
targetCourse: [{
step-name:
step-id:
course: [{
course-name:
course-id:
}]
}]
You can extract all steps using querySelectorAll. Then, iterate through all steps in this collection and gather name, id and courses using querySelector.
Array.prototype.map will make iteration easier.
var stepElements = document.querySelectorAll('.si-steps');
var result = [].map.call(stepElements, function(stepElement) {
var courseElements = stepElement.querySelectorAll('.si-courses');
var coursesInfo = [].map.call(courseElements, function(courseElement) {
return {
'course-name': courseElement.querySelector("[name='course-name']").value,
'course-id': courseElement.querySelector("[name='course-id']").value
};
});
return {
'step-name': stepElement.querySelector("[name='step-name']").value,
'step-id': stepElement.querySelector("[name='step-id']").value,
'course': coursesInfo
};
});
document.getElementById('result').innerText = JSON.stringify(result, null, 4);
<div class="si-steps">
<input type="text" class="si-step-input" name="step-name" value="step1">
<input type="text" class="si-step-input" name="step-id" value="1">
<div class="si-courses">
<input type="text" class="si-step-input" name="course-name" value="course1">
<input type="text" class="si-step-input" name="course-id" id="c1">
</div>
<button type="button" id="si-course-btn" class="si-course-btn">Add course</button>
</div>
<div class="si-steps">
<input type="text" class="si-step-input" name="step-name" value="step2">
<input type="text" class="si-step-input" name="step-id" value="2">
<div class="si-courses">
<input type="text" class="si-step-input" name="course-name" value="course3">
<input type="text" class="si-step-input" name="course-id" id="c3">
</div>
<button type="button" id="si-course-btn" class="si-course-btn">Add course</button>
</div>
<button type="button" id="si-step-btn" class="si-step-btn">Add step</button>
<div>
<pre id="result">
</pre>
</div>
Note that Add course and Add step buttons are not implemented. Scroll down the snippet to see result.
Related
I got a problem I need to fill two fields in a form with diffrent values and I would like to do that with an button onClick function.
I genererat buttons and the output looks like this:
<button class="btn btn-primary" type="button" onclick="fillsquare(test, 1)">1</button>
<button class="btn btn-primary" type="button" onclick="fillsquare(test2, 3)">1</button>
Now I want to fill my form with the values
the first value I want to be placed in the first field id="areaname_fill" and the secound value should fill the field id="squarename_fill".
Just to clarify, If I click on the first button
id="areaname_fill" should set the value to "Test" AND
id="squarename_fill" should set the value to 1.
<div class="form-group">
<label>fyll i område</label>
<input type="text" name="areaname_fill" id="areaname_fill" class="form-control" value="" />
</div>
<div class="form-group">
<label>fyll i rutans nummer</label>
<input type="text" name="squarename_fill" id="squarename_fill" class="form-control" value="" />
</div>
I came up with this JS but I can't get it to work, any ides?
function fillsquare(area,square)
{
var area = area;
var square = square;
document.getElementById(areaname_fill).value = area;
document.getElementById(squarename_fill).value = square;
}
You can achieve it in this way
document.getElementById("areaname_fill").value=area;
document.getElementById("squarename_fill").value=square;
And here
<button class="btn btn-primary" type="button" onclick="fillsquare('test', 1)">1</button>
<button class="btn btn-primary" type="button" onclick="fillsquare('test2', 3)">1</button>
function fillsquare(area,square)
{
document.getElementById("areaname_fill").value = area;
document.getElementById("squarename_fill").value = square;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label>fyll i område</label>
<input type="text" name="areaname_fill" id="areaname_fill" class="form-control" value="">
</div>
<div class="form-group">
<label>fyll i rutans nummer</label>
<input type="text" name="squarename_fill" id="squarename_fill" class="form-control" value="">
</div>
<button class="btn btn-primary" type="button" onclick="fillsquare('test', 1)">1</button>
<button class="btn btn-primary" type="button" onclick="fillsquare('test2', 3)">1</button>
It's generally recommended that you avoid using inline javascript like onClick="foo"
If possible, you should change your markup to to include the values in the button markup and then add a click event listener to extract and the data and use it in the form. Here's an example of that.
const buttons = document.querySelectorAll("button");
const areaField = document.getElementById("areaname_fill");
const squareField = document.getElementById("squarename_fill");
buttons.forEach(button => {
button.addEventListener("click", () => {
areaField.value = button.dataset.area;
squareField.value = button.dataset.square;
});
});
<div class="form-group">
<label>fyll i område</label>
<input
type="text"
name="areaname_fill"
id="areaname_fill"
class="form-control"
value=""
>
</div>
<div class="form-group">
<label>fyll i rutans nummer</label>
<input
type="text"
name="squarename_fill"
id="squarename_fill"
class="form-control"
value=""
>
</div>
<button class="btn btn-primary" type="button" data-area="test" data-square="1">
First button
</button>
<button class="btn btn-primary" type="button" data-area="test2" data-square="3">
Second button
</button>
Try the below code. The quotes are missing in onclick and in the document.getElementById as the test and test2 are string, and the document.getElementById expects a string argument (the element id).
function fillsquare(area, square) {
var area = area;
var square = square;
document.getElementById("areaname_fill").value = area;
document.getElementById("squarename_fill").value = square;
}
<body>
<button
class="btn btn-primary"
type="button"
onclick="fillsquare('test', 1)"
>
1
</button>
<button
class="btn btn-primary"
type="button"
onclick="fillsquare('test2', 3)"
>
1
</button>
<div class="form-group">
<label>fyll i område</label>
<input
type="text"
name="areaname_fill"
id="areaname_fill"
class="form-control"
value=""
/>
</div>
<div class="form-group">
<label>fyll i rutans nummer</label>
<input
type="text"
name="squarename_fill"
id="squarename_fill"
class="form-control"
value=""
/>
</div>
document.getElementById("areaname_fill").value=area;
document.getElementById("squarename_fill").value=square;
You should Add double quotes to fix it.
I have 4 different checkboxes and when I check one(or two, or three, or all) I want to save some data into a database with a click on the button "Save". I'm using angular.
How I can do this?
I have this HTML code:
<div class="addMode1" style="display: none;">
<div class="form">
<form ng-submit="createReason(reasonsForm1.$valid)" name="reasonsForm1">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="database_address">Name of reason:</label>
<input type="text" class="form-control" ng-model="reasonname" placeholder="Име основание за добавяне" />
</div>
<div class="container">
<p>Using in::</p>
<input type="checkbox" ng-model="all">Buy<br>
<input type="checkbox" ng-checked="all">Sell<br>
<input type="checkbox" ng-checked="all">PKO<br>
<input type="checkbox" ng-checked="all">RKO
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Save</button>
<button class="btn btn-primary" id="cnlbtn1" type="button">Cancel</button>
<!--ng-click="createUser()"-->
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
</div>
</div>
And Angular code(createReason function which saves data from input box into the database):
$scope.createReason=function()
{
var objectToSave = {
name: $scope.reasonname,
};
defaultAdapter.query('INSERT INTO reasons(name) VALUES(:name)',
{ replacements: objectToSave, type: Sequelize.QueryTypes.UPDATE }
).then(projects => {
console.log(projects);
$scope.editMode = false;
$scope.activeItem = false;
$scope.refresh();
});
}
Please help me.
Thanks!
enter image description here
<label><input type="checkbox" name="test" ng-model="testModel['item1']" /> Testing</label><br />
<label><input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2</label><br />
<label><input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3</label><br />
After this on submit check the testModel index value which one is true or false then send that value in database.
try this i hope its helpful to you
Actually I have two divs available on my page with buttons and I am passing the hidden field attached with that button to the jquery function But when I click on the second div it pass the value of the first div. Below is the html code
<div id="polls-42-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons" id="vote-btn">
<input type="hidden" value="42" id="poll-id">
</div>
<div id="polls-11-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons" id="vote-btn">
<input type="hidden" value="11" id="poll-id">
</div>
And I am using this jquery :
$(document).on('click','#vote-btn', function() {
console.log( $("#poll-id").val());
});
NOTE: The Div ids are not same all the time
The id attribute should be unique in the same document, it will be better if you're using global classes instead :
<div id="polls-42-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="42" class="poll-id">
</div>
<div id="polls-11-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="11" class="poll-id">
</div>
Then use siblings to target the related field :
$(this).siblings(".poll-id").val();
Hope this helps.
$(document).on('click','.vote-btn', function() {
console.log( $(this).siblings(".poll-id").val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="polls-42-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="42" class="poll-id">
</div>
<div id="polls-11-ans"class="wp-polls-ans">
<input type="button" name="vote" value="Vote" class="Buttons vote-btn">
<input type="hidden" value="11" class="poll-id">
</div>
You can select the DIVs with the class "wp-polls-ans" and then the buttons inside
$(".wp-polls-ans #vote-btn").click(function(){
var val = $(this).parent().find( "#poll-id").val();
alert(val);
})
This is the fiddle
Here is the working javascript code:
$(document).on('click','#vote-btn', function() {
console.log( $(this).siblings("#poll-id").val() );
});
I am trying to dynamically add a form input in AngularJS every time the add button is clicked. However, with the code I have, it the input elements don't display at all. I simply see the "Post" button. If I remove the ng-repeat="ingredient in ingredients", the form displays (as expected). What am I doing wrong here?
Here is the specific code in index.ejs:
<form ng-model="recipe">
<div class="form-inline" ng-repeat="ingredient in ingredients">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" ng-model="ingredient.name"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Quantity" ng-model="ingredient.quantity"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Unit" ng-model="ingredient.unit"></input>
</div>
<div class="form-group">
<button type="button" id="add" ng-click="add()">Add</button>
</div>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
Here is the corresponding js code:
app.controller('MainCtrl', [
'$scope',
'posts',
'auth',
function($scope, posts, auth){
$scope.ingredients = [];
$scope.add = function() {
var newItemNo = $scope.ingredients.length+1;
$scope.ingredients.push({'id':'choice'+newItemNo});
};
}]);
That's because your button is in the ng-repeated element. ng-repeat repeats the HTML inside the element it is assigned to. Since you have no items in ingredients, nothing is rendered - including your button
Just move your button out of <div class="form-inline">.
Your add button is inside the ng-repeat, so it's never shown, so you can never populate the array, so it can't ever show. Does that make sense?
Try
<form ng-model="recipe">
<div class="form-inline" ng-repeat="ingredient in ingredients">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" ng-model="ingredient.name"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Quantity" ng-model="ingredient.quantity"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Unit" ng-model="ingredient.unit"></input>
</div>
</div>
<div class="form-group">
<button type="button" id="add" ng-click="add()">Add</button>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
I've managed to get my adding a clone button working but im now having trouble with getting the delete button to work. Wondering if people can see the problem im guessing im totally wrong.
This is the code in jsfiddle
http://jsfiddle.net/AFfa2/
<div class="question">
<div class="questiontext">
20. Details of Children
</div>
<div id="question20">
<div class="questiontitles">
Family Name<br>
Given Names<br>
Sex<br>
Date of Birth<br>
Country of Birth
</div>
<div class="questionanswer">
<input type="text" name="children" class="textbox">
<input type="text" name="children" class="textbox">
<input type="text" name="children" class="textbox">
<input type="text" name="children" class="textbox">
<input type="text" name="children" class="textbox">
</div>
</div>
</div>
<div id="Child" class="question">
<div id="addChild" class="questiontitles">
<input type="button" value="Add Child Info">
</div>
<div id="deleteChild" class="questionanswers">
<input type="button" value="Delete Child Info">
</div>
</div>
$("#addChild").click(function(){
var newElement =$('<div/>').html($("#question20").html());
newElement.addClass('input');
$("#question20").after(newElement);
});
$("#deleteChild").click(function() {
if(childId > 0) childId--;
$("#child"+childId).slideUp();
if ($("#deleteChild").css("display") == "none") $("#deleteChild").slideUp();
});
Try this Answer
$("#addChild").click(function () {
var newElement = $('<div id="childdiv"/>').html($("#question20").html());
newElement.addClass('input');
$("#question20").after(newElement);
childId++;
});
$("#deleteChild").click(function () {
var div = document.getElementById('childdiv');
if (div) {
div.parentNode.removeChild(div);
}
});
$("#addChild").click(function(){
$(".question20:last").after($(".question20:first").clone(true));
});
$("#deleteChild").click(function() {
if($(".question20").length!=1)
$(".question20:last").remove();
});
<div class="question20"> //and the div got class instead of id since cloning the div with same id is not good
http://jsfiddle.net/AFfa2/4/
DEMO
updated code posted by rps
as it deletes all the div elements. Modified it not delete the original form element.
$("#addChild").click(function () {
$(".question20:last").after($(".question20:first").clone(true));
});
$("#deleteChild").click(function () {
if ($('.question20').length > 1) {
$(".question20:last").remove();
}
});
Try this jsfiddle
<div id="question20" class="input">
<div id="question20">20. Details of Children
<br>Family Name
<input type="text" name="children" class="textbox">
<br>Given Names
<input type="text" name="children" class="textbox">
<br>Sex
<input type="text" name="children" class="textbox">
<br>Date of Birth
<input type="text" name="children" class="textbox">
<br>Country of Birth
<input type="text" name="children" class="textbox">
<br>
</div>
<div id="removeChild">
<input type="button" value="Remove Child Info">
</div>
</div>
<div id="addChild" class="input">
<input type="button" value="Add Child Info">
</div>
jQuery code
$("#addChild").click(function(){
var newElement =$('<div/>').html($("#question20").html());
newElement.addClass('input');
$("#question20").after(newElement);
});
$('#removeChild').click(function(){
$(this).parent().remove();
});
This might work
$("#deleteChild").click(function() {
$('#question20').parent().children('.input:last').remove();
});
http://jsfiddle.net/HLpJP/
You've got issues around where your inserting the new rows however. Your inserting new rows after question20, these will appear before existing ones. The remove method will remove the last one so might not be the behaviour you want.
Here is jsfiddle link : http://jsfiddle.net/AFfa2/5/
add remove button
<div id="removeChild">
<input type="button" value="Remove Child Info">
</div>
and jquery
$("#removeChild").click(function(){
$('div.input').get($(this).length).remove();
});
you need to change buttons div classes