I'm working on a nodejs project and over the last couple days I put together a dynamic form using Vuejs. However, for the list I am confused as to how I should omit the delete button for the first item of the dynamic portion of the from.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homemade</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="newRecipeContainer">
<form action="/recipes/createRecipe" method="POST">
<div class="recipeNameContainer">
<label class="recipeNameLabel">Title</label>
<input type="text" name="recipeName">
</div>
<div class="directionsContainer">
<button class="addDirectionButton" type="button" #click="addDirectionForm">Add Another Direction</button>
<div class="allDirections" v-for="(direction, index) in directions">
<label class="direction">{{ index + 1 }}.)</label>
<input type="text" name="directions" v-model="direction.direction">
<button class="deleteDirectionButton" type="button" #click="deleteDirectionForm(index)">Delete Direction</button>
</div>
</div>
<div class="recipeImage">
<input type="file" accept="image/*" />
</div>
<button class="createRecipeButton" type="submit">Create Recipe</button>
</form>
</div>
<script src="/controls/newRecipeControl.js"></script>
</body>
</html>
var app = new Vue({
el: '.directionsContainer',
data: {
directions: [
{
direction: ''
}
]
},
methods: {
addDirectionForm: function(){
this.directions.push({
direction: ''
})
},
deleteDirectionForm: function(index){
if(index != 0)
this.directions.splice(index, 1)
}
}
})
Initially, my thought was to use an if statement in the html to check whether index is equal to 0, however, that errors out. I am using ejs to embed javascript into my html. I am unsure how to best approach this, any suggestions?
Thanks for the help.
Use Vue's conditional rendering on your button element to only show it for indexes above zero 1️⃣.
<button
v-if="index > 0" 1️⃣
class="deleteDirectionButton"
type="button"
#click="deleteDirectionForm(index)"
>Delete Direction</button>
Related
I do not know anything about coding and html.
I am trying to create a kind of calculator that detects upper bounds. For example, a number is read and if it surpasses the number 20, the box should highlight red. See below for what I have come up with so far:
<head>
<title>Form</title>
<style> .red{
color: red;
}
</style>
</head>
<body>
<input type="number" placeholder="Length" id="length">
<input type="number" placeholder="Width" id="width">
<input type="number" placeholder="Height" id="height">
<input type="number" placeholder="Weight" id="weight">
<script>
function condition()
{
var len=document.getElementById("length").value);
var wid=document.getElementById("width").value);
var hei=document.getElementById("height").value);
var wei=document.getElementById("weight").value);
if (len >="20"){
<p class="red">This is some paragraph with red color.</p> //<<<This is where I have the issue. I do not know how to display the color after it is read and accepted.
}
</script>
<button type ="button" onclick="condition()">Calculate</button>
</body>
</html>
This is what you were trying to do. If you want the box to be red, just change the document.getElementById("target") to width or whatever you need, and then in the style in the .red class change color to border-color. After that, you need to make a reset mechanism so it won't stay red the next time you press the button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.red {
color: red;
}
</style>
<input type="number" placeholder="Length" id="length">
<input type="number" placeholder="Width" id="width">
<input type="number" placeholder="Height" id="height">
<input type="number" placeholder="Weight" id="weight">
<p id="target"></p>
<button type="button" onclick="condition()">Calculate</button>
<script>
function condition() {
let len = document.getElementById("length").value;
let wid = document.getElementById("width").value;
let hei = document.getElementById("height").value;
let wei = document.getElementById("weight").value;
if (len >= 20) {
let target = document.getElementById("target");
target.innerText = "This is some paragraph with red color.";
target.classList.add("red");
}
}
</script>
</body>
</html>
I am trying to Remove a topic from CrudRepository, but the checkboxes I am trying to create don't show up.
I have an Add Method which works just fine, but the remove doesn't.
HTML: hello.html
for the navigation and head fragments
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org/"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:fragment="head">
<title> Lunch Planner Beta </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<h1 th:inline="text">Hello [[${#httpServletRequest.remoteUser}]]!</h1>
<nav th:fragment="navigation">
List |
Add |
<a th:href="/removeTopic">Remove</a>
</nav>
<form th:action="#{/home}" method="get">
<input type="submit" value="Home"/>
</form>
<br/>
<form th:action="#{/logout}" method="post">
<input type="submit" value="Sign OUT"/>
</form>
</body>
</html>
The part of TopicController.java
#RequestMapping(method = RequestMethod.POST, value = "/remove", consumes = {MediaType.APPLICATION_FORM_URLENCODED_VALUE})
#Transactional
public ModelAndView deleteTopic(Long id, HttpServletResponse response, Errors errors){
response.setStatus(HttpServletResponse.SC_NO_CONTENT);
model.addObject("topic",topicService.getTopic(id));
topicService.deleteTopic(id);
return new ModelAndView("home");
}
HTML: removeTopic.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head th:replace="hello :: head">
</head>
<body class="container">
<nav th:replace="hello :: navigation"></nav>
<form th:action="#{/api/remove}" th:object="${topic}" method="post">
<div th:each="topic: ${topic}" class="checkbox">
<input type="radio" name="id" th:value="${topics.id}" th:id="${topics.id}"/>
<label th:for="${topics.id}" th:text="${topics.category}"></label>
<br/>
</div>
<input type="submit" value="Remove Topic"/>
</form>
</body>
</html>
And here is what is happeneing:
Your problem is in the loop, you are using the same object to iterate itself
th:each="topic: ${topic}"
You should have something similar to this
<div th:each="item: ${topics}" class="checkbox">
<input type="radio" name="id" th:value="${item.id}" th:id="${item.id}"/>
<label th:for="${item.id}" th:text="${item.category}"></label>
<br/> <!-- Do not use this tag to add vertical space, use css classes-->
</div>
Thanks to https://stackoverflow.com/users/2757561/cralfaro we were able to fix the connection between the controller and the removeTopic.html
The problem was is the hello.html at the
<a th:href="/removeTopic">Remove</a>
and this is how it should be:
<a th:href="#{/api/removeTopic}">Remove</a>
I`m using Angualr for my web.
I have this part in html code:
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
</div>
I want to add method (in the Controller) that when the text change, it will add a new button down.
How can I do it? I can`t understand how ng-change works.
thanks
Simply use ng-if to check if newCreative.companionUrl exists in scope :
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
<input type="button" value="Click me" ng-if="newCreative.companionUrl">
</div>
You can also use a function to validate button visibility :
index.html
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="scripts.js"></script>
</head>
<body ng-controller="SampleController as ctrl">
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
<input type="button" value="Click me" ng-if="ctrl.isButtonAvailable()">
</div>
</body>
</html>
script.js
angular.module('app', []);
angular.module('app').controller('SampleController', function ($scope) {
var ctrl = this;
ctrl.isButtonAvailable = function() {
if(!$scope.newCreative) {
return false;
}
// Ensure companion url starts with https:// using a regular expression
return /^https:\/\//.test($scope.newCreative.companionUrl);
}
});
Working example
Check out this Plunker : https://plnkr.co/edit/n8VtJrenePGf9hCbmzWJ
You can use the directives ng-change on input and ng-if or ng-show on button, plus a little code on controller.
Check this:
http://codepen.io/mQuixaba/pen/oZqXWG?editors=1111
HTML:
<div ng-app="myApp" ng-controller="MyController">
<label for="input">Text:</label>
<input type="text" id="input" ng-model="text" ng-change="showButton=true"/>
<button ng-if="showButton" ng-click="hideButton()">My Button</button>
</div>
JS:
angular
.module('myApp', [])
.controller('MyController', function($scope){
$scope.showButton = false;
$scope.text = "My text";
$scope.hideButton = function() {
$scope.showButton = false;
}
});
I am using an ajax script to stringify the values from a controller of an application which is spring rest web service application..problem is when the values in html in form i click a button, this script should work but doesn't get executed..can someone help me what's wrong in the script, is a load problem or something else, and what is the right way of making it executable???
Ajax Script
load$(document).ready(function () {
$("#submit").click(function () {
var url = 'http://localhost:8080/xxx/authenticate';
var jsondata = JSON.stringify({
username: $('#inputEmail').val(),
password: $('#inputPassword').val()
});
postdata(url, jsondata, 1);
});
$('#register-dev').click(function () {
var url = 'http://localhost:8080/xxx/register';
alert(url);
var jsondata = JSON.stringify({
roleTb: {
roleId: parseInt($('#role').val())
},
firstName: $('#firstname').val(),
lastName: $('#lastname').val(),
emailId: $('#email').val(),
username: $('#username').val(),
password: $('#password').val()
});
postdata(url, jsondata, 2);
});
function postdata(url, jsondata, formId) {
var request = $.ajax({
type: "POST",
url: url,
contentType: 'application/json',
data: jsondata
});
request.done(function (msg) {
if (formId == 1) {
if (msg.errorcode == 200 && msg.obj == true) {
alert("Authentication Successful");
} else {
alert("Authentication failed");
}
}
if (formId == 2) {
if (msg.errorcode == 200) {
alert("Registration Successful Your Access Id is " + msg.obj);
} else {
alert("Registration failed");
}
}
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
}
});
HTML FORM
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<!-- Title and other stuffs -->
<title>xxxxxx Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- Stylesheets -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax-handler.js"></script>
<script src="js/respond.min.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Favicon -->
</head>
<body>
<!-- Form area -->
<div class="admin-form">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Widget starts -->
<div class="widget worange">
<!-- Widget head -->
<div class="widget-head"> <i class="fa fa-lock"></i> Login</div>
<div class="widget-content">
<div class="padd">
<!-- Login form -->
<form class="form-horizontal">
<!-- Email -->
<div class="form-group">
<label class="control-label col-lg-3" for="inputEmail">Email</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<!-- Password -->
<div class="form-group">
<label class="control-label col-lg-3" for="inputPassword">Password</label>
<div class="col-lg-9">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<!-- Remember me checkbox and sign in button -->
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<div class="checkbox">
<label>
<input type="checkbox">Remember me</label>
</div>
</div>
</div>
<div class="col-lg-9 col-lg-offset-3">
<button type="button" id="submit" class="btn btn-info btn-sm">Sign in</button>
<button type="reset" class="btn btn-default btn-sm">Reset</button>
</div>
<br />
</form>
</div>
</div>
<div class="widget-foot">Not Registred? Register here
</div>
</div>
</div>
</div>
</div>
</div>
</body>
You should prevent the default hard form submit if you wish to use asynchronous submission. Otherwise form gets refreshed
$("#submit").click(function (e) {
e.preventDefault();
check whether you really need to stringify the data. Normally, in most cases it's just enough to pass it as an object to jQuery.ajax(), unless the server really needs it as JSON string. jQuery internally does the necessary conversion. (serializes to query string) if it's an object or array.
var jsondata = {
username: $('#inputEmail').val(),
password: $('#inputPassword').val()
};
I am using angularjs, were i have defined some routes and on the html page i have used some validations.
My html page looks like:
<form ng-controller="validateCtrl"
name="loginForm" novalidate>
<p>UserName:<br>
<input type="text" name="uName" ng-model="uName" required>
<span style="color:red" ng-show="loginForm.uName.$dirty && loginForm.uName.$invalid">
<span ng-show="loginForm.uName.$error.required">Username is required.</span>
</span>
</p>
<p>Password:<br>
<input type="text" name="pwd" ng-model="pwd" required>
<span style="color:red" ng-show="loginForm.pwd.$dirty && loginForm.pwd.$invalid">
<span ng-show="loginForm.pwd.$error.required">Password is required.</span>
</span>
</p>
<p>
<input type="submit" ng-click="popupuser()"
ng-disabled="loginForm.$invalid ">
</p>
</form>
When i run the page in browser, all the errors/validations are showing up on page load itself.
I would like the validation error to only come up, when there is any error on particular control and wants the button to be disabled, until and unless the form is fully valid.
index.html:
<!DOCTYPE html>
<html ng-app="test">
<head>
<title>My Angular App!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="../js/app.js"></script>
</head>
<body ng-app="test">
<div id="links">
<a ui-sref="login">Login</a>
<a ui-sref="register">Register</a>
</div>
<div ui-view></div>
</body>
</html>
app.js:
angular.module('test', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('register', {
url: '/register',
templateUrl: '../partials/register.html',
controller: 'registration'
});
$stateProvider.state('login',{
url: '/login',
templateUrl: '../partials/login.html',
controller: 'login'
});
});
your code should work as is. check out this plunker..
what you need is ng-app somewhere in your html
<html ng-app="plunker">
.
.
.
</html>