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>
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>
im currently working on how to change the background image of my html document when the user selects a speficifc group from the dropdown menu from chatrooms. But im currently stuck I cant seem to get my jQuery to work any help you could offer would be great thank you :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Soc Talk</title>
<script src="resource/js/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="resource/css/bootstrap.min.css" />
<link rel="stylesheet" href="resource/css/style.css" />
<script>
$(".chatroom").click(function(){
$('.active').toggleClass('active');
$('.chatroom').toggleClass('active');
$('.jumbotron').fadeOut(500);
//change background image
$('.jumbotron').fadeIn(500);
$('.jumbotron').css('bg.png','url(resource/GamingSoc.jpg)');
});
</script>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>SocTalk</h1>
</div>
</div>
<div class="container chat-signin">
<form class="form-signin">
<h2>Chat Login</h2>
<label for="nickname">Nickname</label> <input type="text" placeholder="Nickname" id="nickname">
<div>
<label for="chatroom" class="chatroom">Chatroom</label> <select size="1" id="chatroom">
<option>Select Room</option>
<option>Gaming Soc</option>
<option>Pokemon Soc</option>
</select>
</div>
<button type="submit" id="enterRoom">Sign in</button>
</form>
</div>
<!-- /container -->
<div class="container chat-wrapper">
<form id="do-chat">
<h2></h2>
<h4></h4>
<table id="response" ></table>
<fieldset>
<legend>Enter your message..</legend>
<div>
<input type="text" placeholder="Your message..." id="message" style="height:60px"/>
<input type="submit" value="Send message" />
<button type="button" id="Exit-room">Exit Room</button>
</div>
</fieldset>
</form>
</div>
<div class="alt1">
<div class="container">
</div>
</div>
<div class="alt2">
<div class="container">
<footer>
<p>Passive Aggressive Liberals</p>
</footer>
</div>
</div>
</body>
</html>
Use background-image property to change or set background image.
<script>
$(".chatroom").click(function(){
$('.active').toggleClass('active');
$('.chatroom').toggleClass('active');
$('.jumbotron').fadeOut(500);
//change background image
$('.jumbotron').fadeIn(500);
$('.jumbotron').css('background-image','url(resource/GamingSoc.jpg)');
});
Possible duplicate of Setting background-image using jQuery CSS property
$('body').css('background', 'url(resource/GamingSoc.jpg)')
No matter what I try I cannot get this to submit my search form
<div id="search_bar_container" style="z-index:99999">
<div class="container">
<form action="tour-list-search-results.php" method="post" name="search_2" id="search_2">
<div class="search_bar">
<div class="nav-searchfield-outer">
<input type="text" autocomplete="off" name="field-keywords" placeholder="Type your search terms ...." id="twotabsearchtextbox">
</div>
<div class="nav-submit-button">
<input type="submit" onclick="this.form.submit();" name="button" id="button" class="nav-submit-input" value="Submit">
</div>
</div>
<!-- End search bar-->
</div>
</div>
<!-- /search_bar-->
</form>
</div>
This seems to work fine, BUT your HTML looks invalid. The form is not nested correctly and you have an extra tag.
Apparently, you just need to tidy up your HTML and the form will submit when you click the button.
$("form").submit(function( event ) {
alert( "Form submitted" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search_bar_container" style="z-index:99999">
<div class="container">
<form action="tour-list-search-results.php" method="post" name="search_2" id="search_2">
<div class="search_bar">
<div class="nav-searchfield-outer">
<input type="text" autocomplete="off" name="field-keywords" placeholder="Type your search terms ...." id="twotabsearchtextbox" />
</div>
<div class="nav-submit-button">
<input type="submit" onclick="this.form.submit();" name="button" id="button" class="nav-submit-input" value="Submit" />
</div>
</div>
<!-- End search bar-->
</form>
</div>
<!-- /search_bar-->
</div>
I have formatted your HTML correctly and as you can se, the form submits on click of the button.
Fiddle
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