I am making a website and I have 3 buttons. Button named "byHour" is a normal button but how do I make so that the other 2 button will not refresh the page when clicking them.
<form method="POST" >
{% csrf_token %}
<center>
<input list="name" name="enterName" placeholder="enter name..." style="margin-bottom: 10px;">
<datalist id="name">
{% for empName in empName %}
<option value="{{empName.employee}}">
{% endfor %}
</datalist>
<div id="date" style="display: none;">
<input type="date" name="firstDate" value="firstDate" style="margin-right: 10px;">
<input type="date" name="secondDate" value="secondDate">
</div>
<p class="p2" style="margin-top: 10px; font-size: 15px;">Filter by: </p>
<div class = "pad3">
<button type="submit" name="byHour" value="byHour" class="button1" id="example2" onclick="closeFunction()" style="width: fit-content; margin-right: 50px; font-size: 12px;">Total Hours</button>
<button type="submit" name="byDate" value="byDate" class="button1" id="example2" onclick="closeFunction()" style="width: fit-content; margin-right: 50px; font-size: 12px;">Date</button>
<button type="submit" name="specificDate" value="specificDate" class="button1" id="example2" onclick="myFunction()" style="width: fit-content; font-size: 12px;">Date Range</button>
</div>
</center>
</form>
<script>
function myFunction() {
var x = document.getElementById("date");
if (x.style.display == "none") {
x.style.display = "block";
}
else{
x.style.display = "none"
}
}
function closeFunction() {
var x = document.getElementById("date");
x.style.display = "none"
}
</script>
type=submit will always submit the form, so the page will reload. Just change the type to button like explained more in detail here:
<button type="button">Button</button>`
Related
I have above html code. Which has table with rows and each row has selection radio button. There is confirm button. I need to send the row data for selected radio option on button click. How should I find what was selected and send that rows data on button click. I want to use javascript but I am very novice in it. Please suggest.
{% extends "base.html" %} {% block title %}Login{% endblock %} {% block content
%}
<html>
<div class="container ">
<h1>You are proposing trade for:: {{desired_item_details[2]}}</h1>
<style>
th, td
{
border:1px solid blue;
padding:10px;
text-align:left;
}
table
{
border-collapse: collapse;
font-size:12px;
text-align: left;
}
</style>
<!-- Content here -->
</div>
<body>
<div class="home">
<br><br><br>
<label>Please Choose Your Proposed Items::</label>
<table>
<tr>
<th>Item#</th>
<th>Game Type</th>
<th>Title</th>
<th>Condition</th>
</tr>
{% for item in proposed_items %}
<tr>
<td>{{item[0]}}</td>
<td>{{item[1]}}</td>
<td>{{item[2]}}</td>
<td>{{item[3]}}</td>
<td>
<input value="{{item[0]}}" id="type_radio_1" name="select" type="radio" /> Select
</td>
</tr>
{% endfor %}
</table>
</div>
<div class="col">
<a class="btn btn-primary btn-lg" role="button">Confirm</a>
</div>
</body>
</html>
{% endblock %}
Here is a simple solution for your question.
document.getElementById("confirmButton").onclick = ( function(event) {
for(var i = 1; i < 4; i++) {
var radioButton = document.getElementById("type_radio_"+i)
if(radioButton.checked){
alert("You have selected" + radioButton.value);
}
}
});
<input value="{{item[0]}}" id="type_radio_1" name="select" type="radio" /><label for="type_radio_1">Select</label>
<input value="{{item[1]}}" id="type_radio_2" name="select" type="radio" /><label for="type_radio_2">Select</label>
<input value="{{item[2]}}" id="type_radio_3" name="select" type="radio" /><label for="type_radio_3">Select</label>
<input type="button" class="btn btn-primary btn-lg" id="confirmButton" value="Confirm">
You can easily do this using a loop and a condition to check whether the current radio button's id in the loop is selected or not. I have changed your confirm button which was a "a" HTML element to a "input" element.
If you want to change the id of the radio input field dynamically, try to use the below code.
document.getElementById("confirmButton").onclick = ( function(event) {
for(var i = 0; i < 3; i++) {
var radioButton = document.getElementById("{{item["+i+"]}}")
if(radioButton.checked){
alert("You have selected" + radioButton.value);
}
}
});
<input value="{{item[0]}}" id="{{item[0]}}" name="select" type="radio" /><label for="{{item[0]}}">Select</label>
<input value="{{item[1]}}" id="{{item[1]}}" name="select" type="radio" /><label for="{{item[1]}}">Select</label>
<input value="{{item[2]}}" id="{{item[2]}}" name="select" type="radio" /><label for="{{item[2]}}">Select</label>
<input type="button" class="btn btn-primary btn-lg" id="confirmButton" value="Confirm">
Thanks and best regards!
The code below shows a multi step form, the second page displays two buttons next and previous and for some reason the previous button doesn't work. I tried playing with code a lot but I couldn't figure it out. Please help.
<form class="form-wrapper">
<fieldset class="section is-active">
<h3>Details</h3>
<div class="inputlabel">
<label>Exchange</label>
</div>
<input type="text" placeholder="Exchange..">
<div class="button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Title</h3>
<div class="inputlabel">
<label>Balance</label>
</div>
<input type="text" placeholder="Password" readonly>
<div class="btnpre" onclick="prvbtn()" id="btnprevious">Previous</div>
<input class="submit button" type="submit" value="Finish">
</fieldset>
<fieldset class="section">
<i class="fas fa-check-circle fa-7x"></i>
<h2>Saved</h2>
<p>Your Data has been saved</p>
<div class="button" id="button2">Close</div>
</fieldset>
</form>
This is the jQuery script
<script>
$(document).ready(function(){
$(".form-wrapper .button").click(function(){
var button = $(this);
var currentSection = button.parents(".section");
var currentSectionIndex = currentSection.index();
var headerSection = $('.steps li').eq(currentSectionIndex);
currentSection.removeClass("is-active").next().addClass("is-active");
headerSection.removeClass("is-active").next().addClass("is-active");
$(".form-wrapper").submit(function(e) {
e.preventDefault();
});
function prvbtn(){
if(currentSectionIndex === 1){
currentSectionIndex = 0;
}
if(currentSectionIndex === 2){
$(document).find(".form-wrapper .section").first().addClass("is-active");
$(document).find(".steps li").first().addClass("is-active");
}
});
});
</script>
Consider the following example.
$(function() {
// Define a Global Index
var sectionIndex = 0;
$(".form-wrapper .button").click(function() {
// Examine the button and determine which button was clicked
if ($(this).hasClass("next")) {
// Use the current Index and them increment it
$(".section").eq(sectionIndex++).toggleClass("is-active");
$(".section").eq(sectionIndex).toggleClass("is-active");
} else {
// Use the current Index and them decrement it
$(".section").eq(sectionIndex--).toggleClass("is-active");
$(".section").eq(sectionIndex).toggleClass("is-active");
}
});
$(".form-wrapper").submit(function(e) {
e.preventDefault();
});
});
.section {
display: none;
}
.section.is-active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-wrapper">
<fieldset class="section is-active">
<h3>Details</h3>
<div class="inputlabel">
<label>Exchange</label>
</div>
<input type="text" placeholder="Exchange..">
<div class="next button">Next</div>
</fieldset>
<fieldset class="section">
<h3>Title</h3>
<div class="inputlabel">
<label>Balance</label>
</div>
<input type="text" placeholder="Password" readonly>
<div class="previous button" id="btnprevious">Previous</div>
<input class="submit button" type="submit" value="Finish">
</fieldset>
<fieldset class="section">
<i class="fas fa-check-circle fa-7x"></i>
<h2>Saved</h2>
<p>Your Data has been saved</p>
<div class="button" id="button2">Close</div>
</fieldset>
</form>
This assigns one callback to all button elements. With an if statement, we can easily determine the direction.
I am trying out a page at work. I have a snapshot of the page
Can you please help me to understand how to implement this. I am not being able to pass the values from html file to typescript. Also, how to send these file inputs to post
HTML: <form enctype="multipart/form-data">
<div class="col-lg-12">
<div style="border: 1px solid rgb(104, 104, 187); border-radius: 15px; color: black; margin-bottom: 5px; ">
<div class="ds-col-12" style="margin-top: 10px; margin-left: 10px;">
<div class="ds-col-3">
<span style="color: red;" ng-bind="model.subLevelName" value="1.a Security Plan"> 1.a Name </span>
</div>
<div class="ds-col-3">
<mat-form-field appearance="outline">
<mat-label>Comments</mat-label>
<textarea matInput [(ngModel)]="model.comment" name="comment" cdkTextareaAutosize #autosize="cdkTextareaAutosize"
cdkAutosizeMinRows="2" cdkAutosizeMaxRows="5"></textarea>
</mat-form-field>
</div>
<div class="ds-col-4">
<ngx-dropzone (change)="onSelect($event,'security')" class="mat-card" style="vertical-align: bottom;">
<ngx-dropzone-label>Upload files here!</ngx-dropzone-label>
<ngx-dropzone-preview *ngFor="let f of files_panel1_a" [removable]="true" (removed)="onRemove(f)">
<ngx-dropzone-label >{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
</ngx-dropzone-preview>
</ngx-dropzone>
</div>
<div class="ds-col-2">
<button class="ds-button ds-button-primary ds-width-auto ds-small">Download</button>
</div>
<div class="ds-col-3">
<button type="button" class="ds-button ds-button-primary ds-width-auto ds-small"
name="submit" id="Submit" (click)="uploadFiles(model)">Submit</button>
</div>
</div>
</div>
</form>
ts file:
uploadFiles(model) {
var formData = new FormData()
for (let i = 0; i < this.files.length; i++) {
formData.append("uploads", this.files[i]);
const blobOverrides = new Blob([JSON.stringify(model)],
{
type: "application/json"
});
console.log(blobOverrides)
formData.append(blobOverrides)
}
console.log(formData.getAll("uploads"))
this.upload(formData)
.subscribe((res)=>{
console.log(res)
this.FileName=res[0].FileName
this.KeyName=res[0].KeyName
},
(err)=>{
console.log(err)
})
}
Please help me to understand where do i have to correct my code.
How can i move to the next page after clicking onthe submit button, in my case my submit button is not working. I used some JQuery code inside this html page, is that a reason?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="form_table_output.html" name="myform" method="post" style="width: 1200px; margin:0px auto">
<h1 title="Cycle calculation"> Cycle Time Calculation INSIGNUM </h1>
<hr><br>
<table border="0" cellpadding="18" cellspacing="10" style="margin:0px 40px;">
<tr>
<td style="width: 50%">
<label for="to_check_recognition"><b>Do you have to check Orientation? <span style="color:red">*</span></b></label><br><br>
<select id="to_check_recognition" name="to_check_recognition" style="width: 350px; height: 35px; border-radius: 8px" required>
<option value="" disabled selected > Please Select... </option>
<option value="yes"> Yes</option>
<option value="no"> No </option>
</select><br><br>
</td>
<td style="width: 50%">
<div id = "Average_orientation" style="display: none;">
<label for="Average_orientation"><b>Average amount of orientation check per panel <span style="color:red">*</span></b></label><br><br>
<input type = "number" step="any" name = "Average_orientation" style="width: 350px; height: 25px; border-radius: 8px" required /><br><br>
</td>
</tr>
<script>
$(document).ready(function() {
Orientation();
$("#to_check_recognition").change(function() {
Orientation();
});
});
function Orientation() {
if ($("#to_check_recognition").val() == 'yes')
$("#Average_orientation").show();
else
$("#Average_orientation").hide();
}
</script>
<tr>
<td colspan="2" style="text-align: right; height: 225px">
<input name="submit" type="submit" value="Click To Submit" style="width: 200px; height: 50px; border-radius: 12px; color: blue; background: gold; cursor: pointer;" />
</td>
</tr>
</table>
</form>
</body>
</html>
You have given required attribute to input:
<input type = "number" step="any" name = "Average_orientation" style="width: 350px; height: 25px; border-radius: 8px" required />
When you select no & input is hidden, due to required attribute, form is not submitted.
Change value of input to 0 then submit form:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form action="form_table_output.html" name="myform" method="post" style="width: 1200px; margin:0px auto">
<h1 title="Cycle calculation"> Cycle Time Calculation INSIGNUM </h1>
<hr><br>
<table border="0" cellpadding="18" cellspacing="10" style="margin:0px 40px;">
<tr>
<td style="width: 50%">
<label for="to_check_recognition"><b>Do you have to check Orientation? <span style="color:red">*</span></b></label><br><br>
<select id="to_check_recognition" name="to_check_recognition" style="width: 350px; height: 35px; border-radius: 8px" required>
<option value="" disabled selected > Please Select... </option>
<option value="yes"> Yes</option>
<option value="no"> No </option>
</select><br><br>
</td>
<td style="width: 50%">
<div id = "Average_orientation" style="display: none;">
<label for="Average_orientation"><b>Average amount of orientation check per panel <span style="color:red">*</span></b></label><br><br>
<input type = "number" step="any" name = "Average_orientation" style="width: 350px; height: 25px; border-radius: 8px" required /><br><br>
</td>
</tr>
<script>
$(document).ready(function() {
Orientation();
$("#to_check_recognition").change(function() {
Orientation();
});
});
function Orientation() {
if($("#to_check_recognition").val() == 'yes'){
$("#Average_orientation").show();$("input[name=Average_orientation]").val("");}else if($("#to_check_recognition").val() == 'no'){
$("#Average_orientation"). hide();$("input[name=Average_orientation]").val("0"); }
}
</script>
<tr>
<td colspan="2" style="text-align: right; height: 225px">
<input name="submit" type="submit" value="Click To Submit" style="width: 200px; height: 50px; border-radius: 12px; color: blue; background: gold; cursor: pointer;" />
</td>
</tr>
</table>
</form>
</body>
</html>
in my case my submit button is not working
When I am testing your code I am correctly redirecting to "form_table_output.html"
What do you mean, when you click nothing happen or when you click something happen but it is not what you want?
submit button is working fine and correctly redirect to "form_table_output.html".
But the error is a bad path i.e. this is path "form_table_output.html" not exist. So please define it in your codebase.
I have two buttons inside separate controllers.
<div ng-controller="aCtrl">
<button class="addButton" ng-click="toggle()"> Add </button>
<form ng-hide="myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
<div ng-controller="bCtrl">
<button class="EditButton" ng-click="toggle()"> Add </button>
<form ng-hide="myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
Note: Toggle just switches the hide/show bool in the back-end
As you can see when clicking the Addbutton it will show the form for aCtrl and EditButton for bCtrl. The result of the current layout is when Add Buttons form expands it pushes the EditButton down. I don't think this can be fixed with CSS as its the logical flow of the HTML.
I am looking for solutions that would allow me to have the buttons at the top in the flow of the page then the forms below.
for example I tried:
<button ng-controller="aCtrl" class="EditButton" ng-click="toggle()"> Add </button>
<button ng-controller="bCtrl" class="addButton" ng-click="toggle()"> Add </button>
<div ng-controller="aCtrl">
<form ng-hide="myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
<div ng-controller="bCtrl">
<form ng-hide="myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
Which doesn't seem to work.
The problem is that ng-hide hides the content with a display: none that causes the space occupied by the element to collapse.
You need visibility: hidden that also hides the element, but keeps the space.
Therefore, use ng-class instead of ng-hide:
<div ng-controller="aCtrl">
<button class="addButton" ng-click="toggle()"> Add </button>
<form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
<div ng-controller="bCtrl">
<button class="EditButton" ng-click="toggle()"> Add </button>
<form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
and the CSS
.hidden {
visibility: hidden;
}
Here is a live sample:
var myApp = angular.module('myApp',[]);
function aCtrl($scope) {
$scope.myVar = true;
$scope.toggle = function () {
$scope.myVar = !$scope.myVar;
}
}
function bCtrl($scope) {
$scope.myVar = true;
$scope.toggle = function () {
$scope.myVar = !$scope.myVar;
}
}
.hidden {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="myApp">
<div ng-controller="aCtrl">
<button class="addButton" ng-click="toggle()"> aCtrl.Add </button>
<form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
<input type="text" value="aCtrl.form">
</form>
</div>
<div ng-controller="bCtrl">
<button class="EditButton" ng-click="toggle()"> bCtrl.Add </button>
<form ng-class="{ 'hidden' : myVar }" ng-submit="submit()">
<input type="text" value="bCtrl.form">
</form>
</div>
</section>
As you can see, the bCtrl.Add button remains in place, regardless whether aCtrl.form is visible or not.
It can be done via css only, just wrap the two in a div with position: relative and then add position:absolute to addButton and editButton together with top/left/right positioning values.
<div class="formContainer">
<div ng-controller="aCtrl">
<button class="addButton" ng-click="toggle()"> Add </button>
<form ng-hide="myVar" ng-submit="submit()">
<h1>Add form</h1>
<input type="text">
<input type="text">
</form>
</div>
<div ng-controller="bCtrl">
<button class="editButton" ng-click="toggle()"> Edit </button>
<form ng-hide="myVar" ng-submit="submit()">
<h1>Edit form</h1>
<input type="text">
<input type="text">
</form>
</div>
</div>
and css:
.formContainer {
position: relative;
width: 200px;
padding-top: 30px;
}
.addButton {
position: absolute;
top: 0;
right: 40px;
}
.editButton {
position: absolute;
top: 0;
right: 0;
}
Here's a working demo: Plunker CSS Only
There's another way, put them in a parent controller, which would hold the logic for toggling between the forms and then each form have their own controller for their respective functionalities.
Here's a working demo of the second version: Plunker with parent Controller
Here is example as u mentioned in your post. u can keep button outside of your controllers
var myApp = angular.module('myApp',[]);
myApp.controller('aCtrl', ['$scope', function ($scope) {
$scope.myVar = true
}]);
myApp.controller('bCtrl', ['$scope', function ($scope) {
$scope.myVar = true;
}]);
function getscope(ctrlName) {
var sel = 'div[ng-controller="' + ctrlName + '"]';
return angular.element(sel).scope();
}
function showForm(ctrlName) {
var $scope = getscope(ctrlName);
$scope.myVar = !$scope.myVar;
$scope.$apply();
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<section ng-app="myApp">
<button class="addButton" onclick="showForm('aCtrl')"> aCtrl.Add </button>
<button class="EditButton" onclick="showForm('bCtrl')"> bCtrl.Add </button>
<div ng-controller="aCtrl">
<form ng-hide="myVar" ng-submit="submit()">
<input type="text" value="aCtrl.form">
</form>
</div>
<div ng-controller="bCtrl">
<form ng-hide="myVar" ng-submit="submit()">
<input type="text" value="bCtrl.form">
</form>
</div>
</section>
Is having two controllers is your requirement ?
You can have a separate controller of the button for eg. btnCtrl and toogle the value using a $rootscope variable. As follows.
<button ng-controller="btnCtrl" class="EditButton" ng-click="toggle()"> Add </button>
<button ng-controller="btnCtrl" class="addButton" ng-click="toggle()"> Add </button>
<div ng-controller="aCtrl">
<form ng-hide="$root.myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>
<div ng-controller="bCtrl">
<form ng-hide="$root.myVar" ng-submit="submit()">
<input ......
<input ......
</form>
</div>