When I click "preview" here the save button in my preview mode is not disabled http://plnkr.co/edit/I3n29LHP2Yotiw8vkW0i
I think this is because the form object (testAddForm) is not available in the scope of the ng-if. I know that I should use an object in my controller because it's passed down all the way, but the form object is created by angular and not available in the ng-if. How can I work around that?
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.2.27" data-semver="1.2.27" src="https://code.angularjs.org/1.2.27/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="TestController">
<form name="testAddForm" novalidate>
<div ng-if="!previewMode">
<input name="title" ng-model="data.title" required />
<p ng-show="testAddForm.title.$invalid && !testAddForm.title.$pristine" class="help-block">Title is required.</p>
<div>
<input type="button" value="Preview" ng-click="preview(true)" />
<input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>
</div>
</div>
<div ng-if="previewMode">
<h2>{{data.title}}</h2>
<div>
<input type="button" value="Cancel" ng-click="preview(false)" />
<input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>
</div>
</div>
</form>
</body>
</html>
JS:
angular.module('app', []);
angular.module('app').controller('TestController', ['$scope', function($scope) {
$scope.data = {};
$scope.previewMode = false;
$scope.preview = function(show) {
$scope.previewMode = show;
};
}]);
As a workaround you can try using ng-hide and ng-show instead of ng-if
Example plunkr
<form name="testAddForm" novalidate>
<div ng-hide="previewMode">
<input name="title" ng-model="data.title" required />
<p ng-show="testAddForm.title.$invalid && !testAddForm.title.$pristine" class="help-block">Title is required.</p>
<div>
<input type="button" value="Preview" ng-click="preview(true)" />
<input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>
</div>
</div>
<div ng-show="previewMode">
<h2>{{data.title}}</h2>
<div>
<input type="button" value="Cancel" ng-click="preview(false)" />
<input type="button" value="Save" ng-disabled="testAddForm.$invalid"/>
</div>
</div>
</form>
The input field is placed inside the ng-if condition and if ng-if is false, the elements inside are not in the DOM. Since in preview mode your input field is not in the DOM, it is not taken into account while validating the form.
An easy fix would be to use ng-show, like this:
<div ng-show="!previewMode">
Plunkr
Related
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
Trying to make an animation when clicking on a button, using semantic ui, a framework.
Tried the first code listed in this link => https://semantic-ui.com/modules/transition.html
But it doesn't work
Thanks in advance !
<!DOCTYPE html>
<html>
<head>
<title>Formulaire</title>
<link rel="stylesheet" type="text/css" href="css/form.css">
<link rel="stylesheet" type="text/css" href="css/transition.css">
</head>
<body>
<div id="pContainer">
<div id="C1">
<header id="title">
<label id="titleDescription">Sign in</label>
</header>
<div id="C2">
<form id="formulaire">
<input class="textForm" name="username" type="text" placeholder="Username"></input>
<input class="textForm" name="password" type="password" placeholder="Password"></input>
Forgot password or username ?
<div class="normalDiv">
<input class="button" type="submit" value="Confirm"></input>
<input class="button" type="button" value="Cancel"></input>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/form.js"></script>
</body>
(function(){
var bouttonConfirmer = document.querySelector(".button");
bouttonConfirmer.addEventListener("click",function(event){
var objet = document.querySelector(".textForm");
objet.transition('scale');
alert("oki");
});
})();
The first problem is that semantic-ui requires jquery (see docs) so I included jquery js and semantic-ui css/js.
The second problem is that button[type=submit] will submit the form and cause a page load. So you won't be able to see the transition. I changed the type=button to prevent this.
Lastly I made your <input /> elements self closing.
$("#confirm").on("click", function() {
$('.textForm').transition('scale');
});
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
</head>
<body>
<div id="pContainer">
<div id="C1">
<header id="title">
<label id="titleDescription">Sign in</label>
</header>
<div id="C2">
<form id="formulaire">
<input class="textForm" name="username" type="text" placeholder="Username" />
<input class="textForm" name="password" type="password" placeholder="Password" />
Forgot password or username ?
<div class="normalDiv">
<input class="button" type="button" value="Confirm" id="confirm" />
<input class="button" type="button" value="Cancel" />
</div>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
</body>
</html>
My code doesn't work here, anyone has any idea what's the problem. I don't know where the problem could be, the code looks correct.
<script type="javascript">
$(document).ready(function(){
$('.new-task').hide();
$('#addNewTask').click(function(){
$('.new-task').toggle();
});
});
</script>
<nav>
<div>
<logo>Logo</logo>
<button id="addNewTask">add newTask</button>
</div>
</nav>
{{>submitTask}}
<template name="submitTask">
<div>
<form class="new-task">
<textarea name="title" placeholder="Enter Task" rows="10"></textarea>
<input type="submit" value="Submit" class="button right">
</form>
</div>
</template>
First, here are some resources to set you on the right path:
https://www.meteor.com/tutorials/blaze/creating-an-app
http://docs.meteor.com/#/full/
Make it easy on yourself by reading the docs and using the conventions of meteor. Add an event to the body template to handle the #addNewTask click event. Below is how to get this working in meteor.
In your javascript:
Template.body.events({
"click #addNewTask": function(event, template) {
$(".new-task").toggle();
}
});
In your html:
<nav>
<div>
<logo>Logo</logo>
<button id="addNewTask">add newTask</button>
</div>
</nav>
{{>submitTask}}
<template name="submitTask">
<div>
<form class="new-task" style="display:none;">
<textarea name="title" placeholder="Enter Task" rows="10"></textarea>
<input type="submit" value="Submit" class="button right">
</form>
</div>
</template>
Try this script tag is causing problem
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.new_task').hide();
$('#addNewTask').click(function(){
$('.new_task').toggle();
});
});
</script>
</head>
<body>
<nav>
<div>
<logo>Logo</logo>
<button id="addNewTask">add newTask</button>
</div>
</nav>
<div>
<form class="new_task">
<textarea name="title" placeholder="Enter Task" rows="10"></textarea>
<input type="submit" value="Submit" class="button right">
</form>
</div>
</body>
</html>
I'm creating a simple AngularJS app using ng-clip. This is my code:
<!doctype html>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="src/ZeroClipboard.min.js"></script>
<script src="src/ngClip.js"></script>
</head>
<body>
<div ng-app="myapp">
<div class="container" ng-controller="myctrl">
<div class="page-header">
<h3>Simple Script</h3>
</div>
<form>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="" ng-model="name">
</div>
<div class="form-group">
<label>Gender</label>
<input type="radio" ng-model="gender" value="Male"> Male <input type="radio" ng-model="gender" value="Female"> Female
</div>
<div class="form-group">
<label>DOB</label>
<input type="text" class="form-control" placeholder="" ng-model="dob">
</div>
<p><strong>Preview</strong></p>
<p ng-model="final">Name: {{name}}<br/>
Gender: {{gender}}<br/>
DOB: {{dob}}</p>
<button class="btn btn-default" clip-copy="final">Copy!</button>
<br><br>
<textarea class="form-control" rows="3" placeholder="Test here"></textarea>
</form>
</div>
</div>
<script>
var myapp = angular.module('myapp', ["ngClipboard"]);
myapp.config(['ngClipProvider', function(ngClipProvider) {
ngClipProvider.setPath("src/ZeroClipboard.swf");
}]);
myapp.controller('myctrl', function ($scope) {
$scope.fallback = function(copy) {
window.prompt('Press cmd+c to copy the text below.', copy);
};
$scope.showMessage = function() {
console.log("clip-click works!");
};
});
</script>
</body >
</html>
Plunker Preview
Plunker Code
When I click on the "Copy!" button, I couldn't copy all text inside the final p element.
How to copy entire text inside the final p element into my clipboard?
It will definately not work as per doc ng-model cannot applied to paragraph("<p>") tag.
The ngModel directive binds an input,select, textarea (or custom form
control) to a property on the scope using NgModelController, which is
created and exposed by this directive.
I have problem when using my ajax form inside the lightbox div .
the form worked outside the lightbox .
after submit the form , I cannot recieve the variable from the form , I see it empty .
I am using lightbox from here:
http://www.aerowebstudio.net/codecanyon/jquery.lightbox/
the html example "
<html>
<head>
<script type="text/javascript">
function send_ajax_data() {
var reg_user = document.getElementById('reg_user').value;
reg_user2 = document.getElementById('reg_user2').value;
reg_pass = document.getElementById('reg_pass').value;
reg_pass2 = document.getElementById('reg_pass2').value;
reg_email = document.getElementById('reg_email').value;
alert(reg_user);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('div.lightbox').lightbox();
});
</script>
</head>
<body>
<div id="signup" style="width:756px; margin-right:auto;margin-left:auto;">
<div class="light-box">
<div class="center">
<div class="welcome">
<h1>Hello</h1>
</div>
<div id="reg_stats"></div>
<div class="login-form">
<div class="form-container">
<label class="label">xxx</label>
<input id="reg_user" type="text" />
<label class="label">xxx</label>
<input id="reg_user2" type="text" />
<label class="label">xxx</label>
<input id="reg_email" type="text" />
<label class="label">xxx</label>
<input id="reg_pass" type="text" />
<label class="label">xxx</label>
<input id="reg_pass2" type="text" />
<input type="submit" onclick="send_ajax_data();" class="login-btn" value="Done" />
</div>
</div>
</div>
</div>
</div>
new user
</body>
</html>
Try adding in a form tag?
Without a form wrapping the inputs, there is nothing to submit.