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!
Related
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>`
I have a for loop in and it generation id for div
i need to get all values for elements in a div when click any element at div
<div id="{{ item3.id }}" (click)="getChildren($event)">
<input type="checkbox" name="status" [checked]="item3.templatesFields.status"/>
<input type="checkbox" name="inMain" [checked]="item3.templatesFields.inMain" />
</div>
and this ts code
public getChildren(e) {
}
Try This
getChildren(e)
{
if (e.target.children.length!=0) {
var g=Array.from(e.target.children).forEach(y=>console.log(y.value))
console.log(g);//here your values
}
<div id="{{ item3.id }}" (click)="getChildren(ch1, ch2)">
<input type="checkbox" name="status" #ch1 [checked]="item3.templatesFields.status"/>
<input type="checkbox" name="inMain" #ch2 [checked]="item3.templatesFields.inMain" />
</div>
via TS you will see the nativeElement of both your checkboxes
getChildren(ch1: any, ch2: any){
console.log(ch1);
console.log(ch2);
}
I have a created a form using HTML and Jinja2 to configure a CSV file. The user is asked to change the name and assign a type to each column name. The CSV file can have any number of columns, therefore, I have created the form through looping Currently, I use the bootstrap grid and divide into three columns and rows depending on the number of columns.
<form action="/updateFile" method="POST" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-12">
<p class="form-group">
{% for x in title %}
{% if loop.index == 1 %} <div class="row"> {% endif %}
<div class="col-xs-12 col-sm-12 col-lg-4 col-md-4">
<div class="row">
<div class="col-sm-6">
<label> Field {{ loop.index }} : {{ x }} </label>
<input type="text" title="Name should only contain letters or numbers" class="form-control"
name="field-{{ loop.index }}" value="{{ x }}" maxlength="10" pattern="[a-zA-Z0-9_ ]+" required>
</div>
<div class="col-sm-6 pull-right">
<label> </label>
<select class="form-control " name="choice-{{ loop.index }}">
<option value="mcqsr">MCQ-Single Response</option>
<option value="mcqmr">MCQ-Multiple Response</option>
<option value="num">Numerical</option>
<option value="tim">Temporal</option>
<option value="lat">Survey Site - Latitude</option>
<option value="lng">Survey Site - Longitude</option>
<option value="temp">Survey Site - Temporal</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<label> </label>
<input type="text" title="Name should only contain letters or numbers" class="form-control"
name="question-{{ loop.index }}" value=" Question of {{ x }}" pattern="[a-zA-Z0-9_ ]+" required>
</div>
</div>
</div>
{% if loop.index % 3 == 0 %} </div><p> </p><p> </p><div class="row"> {% endif %}
<input type="hidden" name="title-{{ loop.index }}" value= {{x}}>
{% endfor %}
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<input type="hidden" name="filename" value= {{filename}}>
<input type="hidden" name="numofField" value= {{numofField}}>
<button class="btn btn-primary" type="submit" value="Update">Submit</button>
</div>
</div>
</div>
</form>
I would like to include an option the user to choose the number of variables he/she wants to choose. Similar to the e-commerce sites or photo albums, they generally give you an option to "show 25" at a time, and give you the option of changing that to "show 50", "show 100", or "show all" in order to allow the user have the control in the amount of clutter they will be able to navigate through in the page. I could find few examples like datatables.js but they only work on tables. I could not find a way how to go about it?
If you access to javascript you can write logic something like this.
let container = document.getElementById('container');
for (let i=0; i<200; i++) {
let div = document.createElement('div');
div.className = 'box';
container.appendChild(div);
}
var items = document.getElementsByClassName('box');
function show(howMany) {
showAll();
let count = parseInt(howMany);
for(let i = 0; i<items.length;i++){
if(i<count){
continue
} else {
items[i].style.display = 'none';
}
}
}
function showAll() {
for(let i = 0; i<items.length;i++){
items[i].style.display = 'inline-block';
}
}
.box{
display: inline-block;
height: 25px;
width: 25px;
background: tomato;
margin-right: 4px;
}
<button onclick="show('50')">show 50</button>
<button onclick="show('100')">show 100</button>
<button onclick="showAll()">show all</button>
<div id="container"></div>
Good Day!
I'm having a unique problem where I have to create a HTML page which has 3 forms, in which the radio buttons are generated dynamically based on the input of the previous form. I'm using Python 3.6 and HTML.
Parts of my code:
from the app:
selection1 = sorted(list(Some_Table['var1'].unique()))
if request.method == 'POST':
if request.form['submit1']:
selection2 = sorted(list(pandas.DataFrame(Some_Table[Some_Table['var1'] == request.form['Header1']])['var2'].unique()))
return render_template('view.html', selection2 = selection2, selection1=selection1)
if request.form['submit2']:
selection3 = sorted(list(pandas.DataFrame(Some_Table[Some_Table['var2'] == request.form['Header2']])['var3'].unique()))
return render_template('view.html', selection3 = selection3, selection2 = selection2, selection1=selection1)
return render_template('view.html', selection1=selection1)
from the html script:
<div2>
<form action="" method="post">
<p> {% for c1 in selection1 %}
<input type="radio" name="Header1" value={{c1}}> {{c1}} </input><br>
{% endfor %} </p>
<p> <input type=submit name=submit1 value="Show Table1"> </p>
</form>
</div2>
<div2 style="margin-top: 250px; ">
<form action="" method="post">
<p> {% for c2 in selection2 %}
<input type="radio" name="Header2" value={{c2}}> {{c2}} </input><br>
{% endfor %} </p>
<p> <input type=submit name=submit2 value="Show Table2"> </p>
</form>
</div2>
<div2 style="margin-top: 500px; ">
<form action="" method="post">
<p> {% for c3 in selection3 %}
<input type="radio" name="Header3" value={{c3}}> {{c3}} </input><br>
{% endfor %} </p>
<p> <input type=submit name=submit3 value="Show Table3"> </p>
</form>
</div2>
JAVASCRIPT
for (i = 0; i < 20; i++) {
var radioBtn = $('<input type="radio" name="rbtnCount" />');
radioBtn.appendTo('#target');
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="target"></form>
I have a list of items. Each item has a checkbox. I want to be able to delete an item using a button that deletes all check item (ones that are ticked). I have some jscript which does half of the work, but removing the item from my database is proving a lot of problems. When I press the the delete button, it removes the item. But when I open up the form again, the item returns again.
Here is my view.
def edit_order(request, order_no):
#some code
items = models.StorageItem.objects.filter(orderservicelist__order__pk = order.pk)
#some more code including if POST
item = models.StorageItem.objects.get(pk = id)
if request.POST.get('delete'):
item.delete()
And my template
{% extends "base_popup.html" %}
{% block title %}
{{title}}
{% endblock %}
{% block script %}
<script type="text/javascript" src="{{MEDIA_URL}}ui/ui.datepicker.min.js"></script>
<script type="text/javascript">
$(function(){
$("#id_required_date").datepicker({dateFormat:"dd/mm/yy"});
$(":checkbox").css("width","auto");
});
$(function(){
$("#check_all").click(function(){
if(this.checked ==true)
$("tbody :checkbox").each(function(){
this.checked=true;
});
else
$("tbody :checkbox").each(function(){
this.checked=false;
});
});
});
</script>
<script>
function hideCheckedRows() {
var checkboxes = document.getElementsByName("item");
var checkboxes_to_remove = new Array();
var count = 0;
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked == true) {
checkboxes_to_remove[count++] = checkboxes[i];
}
}
for (var i = 0; i < checkboxes_to_remove.length; i++) {
cbx = checkboxes_to_remove[i];
// parentNode.parentNode.parentNode is the <tr>
// parentNode.parentNode is the <td> containing the checkbox
cbx.parentNode.parentNode.parentNode.removeChild(cbx.parentNode.parentNode);
}
}
</script>
{% endblock %}
{% block content %}
<div id="location_header">{{title}}</div>
<div id="form_container">
<form action="." method="post">
<fieldset class="model">
<p>
<span style="font-weight:bold;font-size:14px">Contact : {{order.contact}}</span>
</p>
<p>
<span style="font-weight:bold;font-size:14px">Cost : {{order.cost}}</span>
</p>
{{ form.as_p }}
</fieldset>
<fieldset class="model">
<legend>Items</legend>
<table id="items_table">
<thead>
<tr>
<td><input type="checkbox" id="check_all" checked="checked"></td>
<td>Tiptop no</td><td>Client no</td><td>Title</td><td>Item type</td>
<td>Format</td>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<td><input type="checkbox" name="item" value="{{item.pk}}" checked="checked"></td>
<td>{{item.tiptop_id}}</td><td>{{item.alternative_id}}</td><td>{{item.title}}</td>
<td>{{item.type}}</td><td>{{item.format}}</td>
</tr>
{% endfor %}
</tbody>
</table>
<p>
<form method="post" action="help">
<table width="60%">
<tr>
<td>
<select name="contact_id">
{% for contact in order.contact.client.contact_set.all %}
<option value="{{contact.pk}}">{{contact}}</option>
{% endfor %}
</select>
</td>
<td>
<select name="status_id">
{% for status in status_list %}
<option value="{{status.pk}}">{{status}}</option>
{% endfor %}
</select>
</td>
<td><input type="submit" name="save_status" value="set status for selected items"></td>
</tr>
</table>
</form>
</p>
</fieldset>
<div id="form_footer">
<span style="font-size:10px;font-weight:bold;margin-right:10px">
</span>
<input type="button" value="Add item" onclick="window.location.href='{% url tiptop.views.client_items name.pk %}'" />
<input type="submit" name="save_item" value="Save" onclick="validate_item(this.form)">
<input type="button" name="delete" value="Delete Items" onclick="hideCheckedRows()">
</div>
</form>
</div>
{% endblock %}
Your problem is that request.POST never contains the delete key.
Those type="button" elements need to be type="submit" to submit the form.
You're just hiding the elements with hideCheckedRows()