I am developing a web application where a user can decide to supplement their entry with a picture if needed by clicking "import picture" icon then uploading. This form can be completed multiple times by clicking on a button called "add another finding", which then clears the form and allow the user to put the next entry in.
When the "add another finding" button is clicked, I want to clear the user uploaded file so that I won't have duplicate files on the next entry.
Here is my code:
page.html--where the "addAnother" button resides
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<?!= include("page-css"); ?>
</head>
<body>
<div class="container">
<form action="#" method="post" enctype="multipart/form-data">
<div class="row">
<div class="file-field input-field">
<div class="waves-effect waves-light btn-small">
<i class="material-icons right">insert_photo</i>
<span>Import Picture</span>
<input id="files" type="file" name="image">
</div>
<div class="file-path-wrapper">
<input disabled selected type="text" class="file-path validate" placeholder="Choose an image">
</div>
</div>
</div>
</form>
<div class="row">
<a id="addAnother" class="waves-effect waves-light btn-small blue accent-2" type="submit" onclick="submitForm(); return true;">Add Another Finding</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://gumroad.com/js/gumroad.js"></script>
<?!= include("page-js"); ?>
</div>
<!-- CLOSE CONTAINER-->
</body>
</html>
Page-js.html
this is where I want to program a script to clear out the form when the "add another" button is clicked
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://gumroad.com/js/gumroad.js"></script>
<script>
document.getElementById("addAnother").addEventListener("click", doStuff1);
//Attempt #1- Tried to clear out the uploaded file when the "add another" button is selected using doStuff1()
function doStuff1() {
$('#files').val('');
$('#files').next() removeClass('active');
}
//Attempt #2- try to use the "onclick" within the "addAnother" button (not sure how to go about it)
function submitForm() {
var files = $('#files')[0].files;
file = files[0];
reader.readAsDataURL(file);
}
</script>
<style>
.form-row {
margin-bottom: 15px;
}
</style>
Related
Whenever I click on the enter button, it seems the page either shows me
Bad Request
Did not attempt to load JSON data because the request Content-Type was not 'application/json'.
or rarely if enter is pressed it creates duplicates each chat by itself and adds it to the div
I have removed the key event of enter but for some odd reason the enter function still works, I presume this is due to bootstrap but im not too certain.
<!DOCTYPE html>
<html lang="en" style="height: 500px">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Lexend" rel="stylesheet" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/stylesheet.css') }}">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://www.unpkg.com/spltjs#1.1.0"></script>
<script src="https://releases.jquery.com/git/jquery-git.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/5.0.2/typeit.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
<button type="button" class="btn btn-light" style="height:34px">click me</button>
<p style="color:white; font-family: Lexend;font-size: 15px;font-weight: 400;text-align: center;">AI for a healthier you</p>
<button type="button" class="btn btn-light" style="height:34px">click me</button>
</nav>
<br>
<center>
<div class="container" style="background-color:white ; border-radius: 20px;height:80%;-webkit-box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);-moz-box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);">
<p style="color:black" id="hello"></p>
<form method="post">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Type here...." aria-label="Recipient's username" aria-describedby="basic-addon2" name="userid" id="textinput">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" value="hello world" id="button">Submit</button>
</form>
</div>
</div>
</div>
</center>
<script>
document.getElementById("button").addEventListener("click", insertText);
// CREATES A DIV AND SENDS THE USERS TEXT
function insertText() {
let div = document.createElement("div");
let usertext = document.getElementById('textinput').value;
const usertext2 = 'Patient: ' + usertext;
let text = document.createTextNode(usertext2);
div.appendChild(text);
document.getElementById("hello").appendChild(div);
/////////////// submit JSON TO APP
var json_entry = usertext
fetch('/dashboard', {
method: 'POST',
body: JSON.stringify({
user_text: json_entry
}),
headers: {
'Content-Type': 'application/json'
}
});
let apiData;
fetch('/dashboard/api').then((response) => response.json()).then((data) => {
apiData = data;
let div = document.createElement('div');
let robot_reply = document.createTextNode(apiData);
div.appendChild(robot_reply);
document.getElementById("hello").appendChild(div);
});
////// ENTER BUTTON ////
///////////////////////
/////////////////////// allows the ability to hit the enter button
var input = document.getElementById("textinput");
}
</script>
</div>
</div>
</body>
</html>
When you hit enter, it triggers the submit event on the <form>, which will cause a page refresh. This is basically baked in browser functionality. Any enter keypress in a field inside a <form> tag, causes a form submission. If that form submission is not handled, it will attempt to POST the form to the current URL.
You need to attach everything to the submit event on the <form>, not the button click. And you also need to call e.preventDefault to prevent the browsers default form action handling.
Additionally, you need type="submit" on the button so the click on that button also submits the form.
Using form submit event is also better for accessibility. It means users can press enter in a field or click the button, and it will be handled.
<!DOCTYPE html>
<html lang="en" style="height: 500px">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Lexend" rel="stylesheet" />
<link rel="stylesheet" href="{{ url_for('static', filename='css/stylesheet.css') }}">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://www.unpkg.com/spltjs#1.1.0"></script>
<script src="https://releases.jquery.com/git/jquery-git.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/5.0.2/typeit.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
<button type="button" class="btn btn-light" style="height:34px">click me</button>
<p style="color:white; font-family: Lexend;font-size: 15px;font-weight: 400;text-align: center;">AI for a healthier you</p>
<button type="button" class="btn btn-light" style="height:34px">click me</button>
</nav>
<br>
<center>
<div class="container" style="background-color:white ; border-radius: 20px;height:80%;-webkit-box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);-moz-box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);box-shadow: 10px 10px 79px -7px rgba(0,0,0,0.22);">
<p style="color:black" id="hello"></p>
<form method="post" id="form">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Type here...." aria-label="Recipient's username" aria-describedby="basic-addon2" name="userid" id="textinput">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit" value="hello world" id="button">Submit</button>
</form>
</div>
</div>
</div>
</center>
<script>
document.getElementById("form").addEventListener("submit", insertText);
// CREATES A DIV AND SENDS THE USERS TEXT
function insertText(e) {
e.preventDefault();
let div = document.createElement("div");
let usertext = document.getElementById('textinput').value;
const usertext2 = 'Patient: ' + usertext;
let text = document.createTextNode(usertext2);
div.appendChild(text);
document.getElementById("hello").appendChild(div);
/////////////// submit JSON TO APP
var json_entry = usertext
fetch('/dashboard', {
method: 'POST',
body: JSON.stringify({
user_text: json_entry
}),
headers: {
'Content-Type': 'application/json'
}
});
let apiData;
fetch('/dashboard/api').then((response) => response.json()).then((data) => {
apiData = data;
let div = document.createElement('div');
let robot_reply = document.createTextNode(apiData);
div.appendChild(robot_reply);
document.getElementById("hello").appendChild(div);
});
////// ENTER BUTTON ////
///////////////////////
/////////////////////// allows the ability to hit the enter button
var input = document.getElementById("textinput");
}
</script>
</div>
</div>
</body>
</html>
I hope to click "Upload Files" lable to display a foreground windows which include extra content, Submit and Close buttons in a html web page.
I write the following code, but it's ugly, and orginal UI is damaged when the is shown.
Is there a good way to do that? or a good control can do that?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WiFi File Transfer</title>
<meta charset="utf-8" />
<script src="js/jquery1.10.2.min.js?isassets=1" type="text/javascript"></script>
<script src="js/user.js?isassets=1" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#UploadWindows").hide();
$("#UploadFile").click(function() {
$("#UploadWindows").show();
});
$("#Close").click(function() {
$("#UploadWindows").hide();
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<a href="#">
<span id="UploadFile">Upload Files</span>
</a>
</div>
<div id="UploadWindows">
<form action="" method="post" enctype="multipart/form-data">
Please select files to upload <br />
<input type="file" name="myupload" multiple="multiple" />
<br />
<input type="submit" value="Upload Files" />
<br />
<span id="Close">Close</span>
</form>
</div>
<div id="Div1">
Other Content!
</div>
</div>
</body>
</html>
BTW, I think the edit popup window of stackoverflow is very good, I don't know if there is simple way do to it.
Can you please tell me how to show an error message on submit button click ?.I am getting an error message after running the program (when I write required :true). I need to show an error message when a user submits the form. I am using this plugin https://github.com/McNull/angular-febworms
Can we get onchange event of select field ?
In my example a red border is displayed when I run the application. I don't want this. I need this when a user clicks the 'submit' button
http://plnkr.co/edit/JOI82JrEBcKJMrzLgtZd?p=preview
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" href="https://rawgithub.com/McNull/angular-febworms/master/package/febworms.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.0/angular.js" data-semver="1.2.0"></script>
<script src="http://code.angularjs.org/1.2.0/angular-route.js"></script>
<script type="text/javascript" src="https://rawgithub.com/McNull/angular-febworms/master/package/febworms.min.js"></script>
<script type="text/javascript" src="dummy-schema.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MyFormController as frmCtrl">
<div class="container">
<div class="row-fluid">
<form class="form-horizontal" name="form.state" novalidate>
<div febworms-form
febworms-schema="form.schema"
febworms-form-data="form.data">
</div>
<div class="form-actions">
<a class="btn btn-primary" ng-disabled="form.state.$invalid" ng-click="frmCtrl.save()">Save changes</a>
</div>
</form>
</div>
</div>
</body>
</html>
But need to blur event to validate or onchange event ?
Since your form name is 'form.state' and your field name is 'required' (which is a bit confusing by the way, you may want to change that), you can get useful information about your validation state with the following expressions in the scope of your form:
form.state.required.$error // yields something like { "required": true, "pattern": false }
form.state.required.$valid // yields a boolean
form.state.$error
form.state.$valid
I haven't heard of a way of knowing whether a form has already been submitted or not. My best shot would be to add some state for this in the controller :
$scope.errorShown = false;
$scope.showErrorMessage = function(){
$scope.errorShown = true;
};
And in your HTML :
<div class="form-actions">
<a class="btn btn-primary" ng-disabled="form.state.$invalid" ng-click="(form.state.$valid ? frmCtrl.save() : showErrorMessage())">Save changes</a>
</div>
<div ng-if="errorShown && form.state.$invalid">
Your form is not valid.
</div>
Plunkr here.
I'm trying to switch a "sign in" form for a "sign up" form whenever the user clicks on the "Sign Up" button in my angular app, but at the moment nothing is happening when the button is clicked; The sign in form remains on the screen and there are no console errors. Can anyone tell me where I'm going wrong?
I'm attempting to do this purely in html, is this even possible to achieve?
EDIT: I included a signup function in my UserCtrl which takes care of signing in/ out. Now when I click on sign up the alert is trigger but I get a console error saying TypeError: boolean is not a function.
$scope.signup = function() {
alert('signup function hit');
$scope.signup = true;
}
EDIT 2:
<!DOCTYPE html>
<html ng-app="myApp" >
<head>
<title> My App</title>
<link rel="stylesheet" type="text/css" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/signin.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"/>
</head>
<body ng-controller="MainCtrl">
<div ng-switch on="view.name">
<div ng-switch-default ng-controller="UserCtrl">
<div ng-show="!isAuthenticated">
<form class = "form-signin">
<div class="control-group">
<img src="img/logo.png">
<br />
<div class="controls">
<br />
<input type="text" ng-model="username" placeholder = "Email Address" >
</div>
<br />
<div class="controls">
<input type="password" ng-model="password" placeholder = "Password" >
</div>
<div class="controls">
<button class = "btn btn-default" ng-click="signIn()">Sign In</button>
<button class = "btn btn-primary" ng-click="view.name = 'signup'">Register</button>
</div>
</div>
</form>
</div>
<div ng-switch-when="signup" ng-controller = "UserNewCtrl" >
<label>
This is where my form should be when my signup button is clicked.
</label>
</div>
//This part of index.html is only shown when a user has been authenticated
<div ng-show="isAuthenticated">
<div class="col-md-2">
//MenuBar code is here
</div>
//Other templates get loaded here
<div class="col-md-10">
<div ng-view></div>
</div>
</div>
</div>
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/transition.js"></script>
<script src="js/ui-utils.js"></script>
</div>
</body>
</html>
MainCtrl.js:
angular.module('myApp.controllers')
.controller('MainCtrl', function($scope) {
$scope.view={
name: ''
};
})
To achieve your requirement you need a wrapper controller that hold ng-switch on model because ngSwitch creates child scope.
You can design your view like
<body ng-controller="mainCtrl">
<div ng-switch on="view.name">
<div ng-switch-default ng-controller="signInCtrl">
<h1>this is sign in page</h1>
sign in
<br>
go to sign up page
</div>
<div ng-switch-when="signup" ng-controller="signUpCtrl">
<h1>this is sign up page</h1>
sign up
<br>
go to sign in page
</div>
</div>
</body>
Here mainCtrl holds view.name and by default ng-switch-default works means your sign in page, then when you click
go to sign up page
view.name model changed and your sign-up page appear.
Check the Demo
move the app controller to the html tag, then the directive in your body tag should read if you want to match an expression
<html ng-app="myApp">
<body ng-switch="signup">
see here
where signup is a boolean in your myApp scope, that will presumably be changed when the signIn criteria is satisfactory
$rootScope.signup = true;
you can also achieve similar with the ng-show and ng-hide directives
I am using the following Flip JQuery plugin:
http://lab.smashup.it/flip/
I was able to get it to work but there are issues with using it on my site. How can I create something from scratch where on click of a button i can flip a div and then on clicking another it can revert to the old state.
Below is what I had using Flip but need to start from scratch.
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="real_thing" id="flipbox">
<a href="#" id="email_flip">
<div class="button1">
<span class="line_text">
Button 1
</span>
</div>
</a>
<div class="button2">
<span class="line_text">
Button 2
</span>
</div>
<div class="button3">
<span class="line_text">
Button 3
</span>
</div>
</div>
Flip
Revert
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.flip.js"></script>
<script type="text/javascript">
$("#clicker2").click(function(){
$("#flipbox").revertFlip();
});
</script>
<script type="text/javascript">
function flip() {
$("#email_flip").click(function()
{
$("#flipbox").flip({
direction: 'tb',
content: '<input type="text" placeholder="Email"> <input type="text" placeholder="Password">',
})
}
)
}
$(document).ready(function() {
$("#flipbox").on("focus", function(){flip();});
flip();
});
</script>
</body>
</html>