I have this form on my Django 1.6 project:
<form action="/proyecto/" method="POST" id="myform">
{% csrf_token %}
<table>
<span class="Separador_Modulo"></span>
<span class="Sub-Titulo-Aplicacion">SiatPre</span>
<tr>
<td >Usuario: {{user}}</td>
</tr>
<tr><td>
<span class="Sub-Titulo-Aplicacion">Tipo de Proyecto: </span>
<input class="check-style" type="checkbox" name="curva" value="checkbox" >Petroleo</input>
</td></tr>
<tr><td>
<input class="check-style" type="checkbox" name="curva" value="checkbox" >Gas</input>
</td></tr>
<tr><td>
<span class="Sub-Titulo-Aplicacion">Proyecto: </span>
<input class="check-style" type="checkbox" name="tipo" value="checkbox" >Nuevo</input>
</td></tr>
<tr><td>
<input class="check-style" type="checkbox" name="tipo" value="checkbox" >Existente</input>
</td></tr>
<tr><td>
<div class="Contenedor-Elemento-Formulario">
<span class="Sub-Titulo-Formulario"> Nombre Proyecto:</span>
<input type="text" class="input-style" name="nombre_proyecto" style="width:96px;"/>
</div>
</td> </tr>
<td><div >
<div class="Principio-Boton"> </div>
<input name="Aceptar" class="Boton" type="submit" value="Aceptar" onclick="myclick()"/>
<div class="Final-Boton"></div>
<div class="Principio-Boton"> </div>
<input name="Cancelar" class="Boton" type="submit" value="Cancelar" />
<div class="Final-Boton"> </div>
</div></td>
</tr>
</table>
<table style="margin-bottom:45px; padding:15px 15px 15px 15px;">
<div> </div>
<div> </div>
<tr>
<td colspan="4" align="center">
<div class="Principio-Boton"> </div>
<input name="Datos" class="Boton" type="submit" value="Datos"/>
<div class="Final-Boton"></div></td></tr>
<tr>
<td colspan="4" align="center">
<div class="Principio-Boton"> </div>
<input name="Procesamiento" class="Boton" type="submit" value="Procesamiento"/>
<div class="Final-Boton"></div></td></tr>
<tr>
<td colspan="4" align="center">
<div class="Principio-Boton"> </div>
<input name="Reporte" class="Boton" type="submit" value="Reporte"/>
<div class="Final-Boton"></div></td></tr>
</table>
</form>
This code is on my base.html file, however, this form is obviously inherited on other templates by block content tag.
I need to hide specifically this form from other pages when user clicks <input name="Aceptar" class="Boton" type="submit" value="Aceptar" onclick="myclick()"/> not there is an onclick function I declared earlier on this html, the function being like this:
<script>function myclick() {$('#myform').hide().fadeOut(2000); }
</script>
And on <form action="/proyecto/" method="POST" id="myform"> I reference the function by using an id (id="myform"), however, when I click on Aceptar, it does some hiding for a second or so, then when it loads a new template, by POST request to server, I still see this form there, no matter what.
Is this the correct way to achieve what I'm looking for? Or maybe it has to do with POST requests to server?
Any ideas?
Thanks in advance!
You have to pass a variable from views.py a = True when you need to display the form, and do the if condition in template,
{% if a %}
<form action="/proyecto/" method="POST" id="myform">
................
</form>
{% endif %}
Related
the script works and shows me the div, but only for one record, and I have 10 more records where it does nothing to select the check.
look:
It only works with the first check, but the rest is not possible, any solution?
the script
<script type="text/javascript">
function showContent() {
element = document.getElementById("content");
check = document.getElementById("check");
if (check.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
</script>
the view
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Nombre del Ingrediente</td>
<td>Proveedor</td>
<td>Agregar</td>
<td>Cantidad</td>
</tr>
</thead>
<tbody>
#foreach($ingredientes as $ingrediente)
<tr>
<td>{{$ingrediente->id}}</td>
<td>{{$ingrediente->nombre}}</td>
<td>{{$ingrediente->proveedor}}</td>
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent()" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" id="content" style="display:none;">
<input class="dvs" id="ex1" type="number" />
</div>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
The attribute id must be unique in a document. You can pass this object to the function by which you can target the relevant div element by class.
function showContent(el) {
var element = el.parentNode.parentNode.nextElementSibling.querySelector('.dv');
if (el.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Nombre del Ingrediente</td>
<td>Proveedor</td>
<td>Agregar</td>
<td>Cantidad</td>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>mnl</td>
<td>Test.....</td>
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent(this)" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" style="display:none;">
<input class="dvs" type="number" />
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>222</td>
<td>xyz</td>
<td>Test..</td>
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent(this)" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" style="display:none;">
<input class="dvs" type="number" />
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
the problem with your code at the moment is that you are trying to bind everything to the same ID, IDs should be unique identifiers, meaning there should be no duplication of them in your code on any given page.
You are binding the event to the first box and then subsequently, the content to first instance of the id content and check, subsequent bindings are not taken into account.
To remedy this, you must either select by class (not recommended) or instead, select by ID but dynamically generate the ID, you could do this by replacing the line
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent()" />
with
<input type="checkbox" name="check" id="check-{{$ingrediente->id}}" value="" onchange="javascript:showContent('{{$ingrediente->id}}')" />
and again for the line <div class="dv" id="content" style="display:none;">
you can change this to
<div class="dv" id="content-{{$ingrediente->id}}" style="display:none;">
and then changing your showContent method to accept a parameter.
<script type="text/javascript">
function showContent(id) {
element = document.getElementById('content-' + id);
check = document.getElementById('check-' + id);
if (check.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
</script>
Good luck :)
You are using duplicate id for checkbox and div content for all row.
You should add more specific info for div's id and pass argument for showConent() function
<td>
<label>
<input type="checkbox" name="check" id="check" value="" onchange="javascript:showContent({{$ingrediente->id}})" />
</label>
</td>
<td>
<div class="form-group row">
<div class="col-sm-4">
<div class="dv" id="content-{{$ingrediente->id}}" style="display:none;">
<input class="dvs" id="ex1" type="number" />
</div>
</div>
</div>
</td>
<script type="text/javascript">
function showContent(id) {
element = document.getElementById(id);
check = document.getElementById("check");
if (check.checked) {
element.style.display='block';
}
else {
element.style.display='none';
}
}
</script>
I am making a shopping cart.
This is the code where a user clicks on a dd to cart button to add items to the cart table:
<div class="container">
<a class="addToCart" href="#" data-name="Java" data-price="150"><a/>
<img src="1.jpeg" id="book1" width="200" height="175" />
<div class="center">Java Basics</div>
<p> 150 SAR </p>
<div>
<label for="qty-1">Quantity</label>
<input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/>
</div>
<p><input id="addToCart" type="submit" value="Add to cart" class="btn"/></p>
</div>
<div class="container1">
<a class="addToCart" href="#" data-name="PHP" data-price="100"><a/>
<img src="1.jpeg" id="book1" width="200" height="175" />
<div class="center">PHP Basics</div>
<p> 100 SAR </p>
<div>
<label for="qty-1">Quantity</label>
<input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/>
</div>
<p><input id="addToCart" type="submit" value="Add to cart" class="btn"/></p>
</div>
<div class="container2">
<a class="addToCart" href="#" data-name="PHP" data-price="100"><a/>
<img src="1.jpeg" id="book1" width="200" height="175" />
<div class="center">JavaScript Basics</div>
<p> 200 SAR </p>
<div>
<label for="qty-1">Quantity</label>
<input type="text" name="qty-1" id="qty-1" class="qty" value="1" size="5"/>
</div>
<p><input id="addToCart" type="submit" value="Add to cart" class="btn"/></p>
</div>
with this jQuery script:
and I have javascript file that contains function of the cart like add to cart, remove from car and calculating total.
<script src="js/functions.js"></script>
<script>
// some jQuery function added to the links
$("#totalCart").html();
$(".addToCart")click(function(event){
eventpreventDefault(); //prevent the links from doing the default behaviour when they are clicked
var name= $(this).att("data-name"); //this represents the link that you click on / attr to access one of the attributes
var price= Number($(this).att("data-price"));
addItemtoCart(name, price, 1);
displayCart();
});
function displayCart() { //display cart content into the page as a list
var cartArray = listCart();
var output = "" ;
for ( var i in cartArray) {
output += "<li>" +cartArray[i].name+" "+cartArray[i].quantity+"</li>"
}
$("#showCart").html(output); //html(output) to replace everything in showCart with text we want
$("#totalCart").html(total Cart());
}
and this the cart.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form id="shopping-cart" action="cart.html" method="post">
<table style="width:80%">
<tr>
<th> Item </th>
<th> Quantity </th>
<th> Price </th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
my question is that I want to link add to cart button to the cart.html page with implementing the functions, I do not know how to glue them all together. Using only HtML, JavaScript and a little bit of jQuery.
PS: no database is used.
I have three different forms in the fancybox, when i click the button for any of the forms, all three forms will be submitted and the fancybox will be closed.
But the form is being resubmitted when fancybox closes.
Javascript for buttons.
function submitForms() {
groupRoleMapping();
parent.jQuery.fn.fancybox.close();
return false;
}
function groupUserMapping() {
//loop to find checked checkbox
en_Method_PostWithURL(formAction, {id: ${group.id}, rowId: array3, update: "group"});
}
function groupUpate() {
var formAction = $("#updateGroup").attr("action");
en_Method_PostWithURL(formAction, {id: ${group.id}, update: "group", status: "yes", groupName: document.getElementById('groupName').value, description: document.getElementById('description').value});
}
function groupRoleMapping() {
groupUpate();
groupUserMapping();
en_Method_PostWithURL(formAction, {id: ${group.id}, rowId: array3, update: "groupToRole"});
}
Form in jsp
<form method="POST" action="${contextPath}/updateGroup.htm" id="updateGroup" >
<input type="hidden" id="id" name="id" class="form-control" type="text" value="${group.id}" required/>
<div class="form-group">
<label for="userName">Group:</label>
<input id="groupName" name="groupName" class="form-control" type="text" value="${group.group}" required/>
</div>
<div class="form-group">
<label for="userName">Description:</label>
<input id="description" name="description" class="form-control" type="text" value="${group.description}" required/>
</div>
<button type="submit" id ="sendUpdate" onclick="return submitForms();" class="btn btn-default" >Submit</button>
</form>
</div>
<div id="tabs-2">
<form id="groupUserMapping" method="POST" action="${contextPath}/updateUserToGroup.htm">
<table id="examplee" class="hover" width="100%">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
<button type="submit" id ="sendUpdate" onclick="return submitForms()" class="btn btn-default" >Submit</button>
</form>
</div>
<div id="tabs-3">
<form id="groupRoleMapping" method="POST" action="${contextPath}/updateRoleToGroup.htm">
<table id="examples" class="hover" width="100%">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-default" onclick="return submitForms()" >Submit</button>
</form>
As I have almost no knowledge of HTML and I had no idea where to ask, I decided to come here. I am trying to edit HTML Weebly web editor generated and add a "contact us" form which will direct messages to my email. I found some source code on the web and tried to incorporate it with the form Weebly generated for me, however I have not had any success. My code is below:
<div>
<form enctype="multipart/form-data" name="contactform" method="post" action="" onsubmit="myFunction()">
<div id="466589977852666939-form-parent" class="wsite-form-container" style="margin-top:10px;">
<ul class="formlist" id="466589977852666939-form-list">
<h2 class="wsite-content-title" style="text-align:left;">SEND US AN EMAIL</h2>
<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
<label class="wsite-form-label" for="Email_Address">Email <span class="form-required">*</span></label>
<div class="wsite-form-input-container">
<input id="Email_Address" class="wsite-form-input wsite-input wsite-input-width-370px" type="text" name="Email_Address" maxlength="100" />
</div>
<div id="instructions-270584481949385592" class="wsite-form-instructions" style="display:none;"></div>
</div></div>
<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
<label class="wsite-form-label" for="Your_Message">Your Message <span class="form-required">*</span></label>
<div class="wsite-form-input-container">
<textarea id="Your_Message" class="wsite-form-input wsite-input wsite-input-width-370px" name="Your_Message" style="height: 200px"></textarea>
</div>
<div id="instructions-137987539423347553" class="wsite-form-instructions" style="display:none;"></div>
</div></div>
</ul>
</div>
<div style="text-align:left; margin-top:10px; margin-bottom:10px;">
<input type='submit' style='position:absolute;top:0;left:-9999px;width:1px;height:1px' /><a class='wsite-button' ><span class='wsite-button-inner'>Submit</span></a>
</div>
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
</div>
It obviously has something to do with the button click not being registered, so I made my own much simpler form to test it out.
<form name="contactform" method="post" action="" onsubmit="myFunction()">
<table width="400px" class="contactform">
<tr>
<td valign="top">
<label for="Email_Address" class="required">Email Address<span class="required_star"> * </span></label>
</td>
<td valign="top">
<input type="text" name="Email_Address" id="Email_Address" maxlength="100" style="width:230px">
</td>
</tr>
<tr>
<td valign="top">
<label for="Your_Message" class="required">Your Message<span class="required_star"> * </span></label>
</td>
<td valign="top">
<textarea style="width:230px;height:160px" name="Your_Message" id="Your_Message" maxlength="2000"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center" >
<br /><br />
<input type="submit" value=" Submit Form " style="width:200px;height:40px">
<br /><br />
</td>
</tr>
</table>
</form>
<script>
function myFunction() {
alert("The form was submitted");
}
</script>
And in this case, the function actually fired! So now I am unsure as to what the difference is between my first example, and my second much simpler piece of code. Could anyone help me out?
You could add an onclick() to the submit <a> tag to submit the form.
Like so, change...
<a class='wsite-button' ><span class='wsite-button-inner'>Submit</span></a>
To...
<a class="wsite-button" onclick="document.contactform.submit(); return false;"><span class="wsite-button-inner">Submit</span></a>
This is because in your simplified example you used a Submit button.
Where as in you original form the button is moved out of the screen using CSS and only the text 'Submit' is left there. And your function triggers when the input is clicked, not the text.
This is the CSS style attributes that are hiding the button:
position: absolute;
top: 0;
left: -9999px;
width: 1px;
height: 1px;
Replace this:
<input type="submit" style="position:absolute;top:0;left:-9999px;width:1px;height:1px">
By this:
<input type="submit" />
The button will reappear and clicking on it will trigger your message box.
Here is the JSFiddle demo
I have create one HTML with the help of AngularJS.
<form name="target" ng-submit="createAllKeywordsJSON(codeMasterList)"><!-- createAllKeywordsJSON() -->
<input type="submit" value="Save" class="myButton" name="submit" style="margin: 0px;float:right;">
<div class="category-placer2" style="width:100%">
<div class="category-header-keywords">
<div class="icon-add"><img src="images/icon-add.png" alt="Add" border="0" title="Add phone Number" /></div>
<div class="category-header-text" ><span ng-bind="dispName"></span></div>
</div>
<div class="category-base">
<div class="keywordplacer">
<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0" class="keywordsList">
<tr>
<th width="60%" colspan="2">Code Master Name</th>
<th width="30%" colspan="2">Status</th>
</tr>
<tr ng-repeat="type in codeMasterList">
<td width="1%" class="">
<input type="hidden" name="codeMasterId" value="{{type.codeMasterId}}" />
</td>
<td width="60%" class="">
<input type="text" name="keywordName" value="{{type.name}}" alt="Name of Keyword" size="60" >
</td>
<td width="30%" class="">
<input type="radio" value="1" name="{{type.codeMasterId}}" alt="Name of Keyword" ng-checked="{{(type.activeInd == 1) && ('true') || ('false')}}" />Active
<input type="radio" value="0" name="{{type.codeMasterId}}" alt="Name of Keyword" ng-checked="{{(type.activeInd == 0) && ('true') || ('false')}}" style="margin-left:50px;" />Inactive
</td>
</tr>
</table>
</div>
<center>
<hr style=" background-color: #ABBFC6; height: 2px; width: 90%;">
<input type="submit" value="Save" class="myButton" style="margin: 0px;"/>
</center>
<!-- <div class="table-index">P - Primary</div> -->
</div>
</div>
</form>
It will show value in editable mode.
I want to save all the list at a single click on save button. how can i do such thing using angularjs ?
Can you please help me to generate JSON data for the name as well as for radio button value ?
below is my controller:
keywordModule.controller('keywordTypeController',['$scope', '$http', 'keywordService',
function($scope, $http, keywordService) {
$scope.createAllKeywordsJSON = function() {
//alert($scope.codeMasterList.codeMasterId);
var tempItemList = [];
angular.foreach($scope.codeMasterList,function(item,index){
tempItemList.push(item);
});
alert(tempItemList);
/*keywordService.createAllKeywordsJSON().query(codeMasterList,
//Success Handler handler
function(data) {
},
//Failure handler
function(error) {
}
);*/
//alert(codeMasterList);
};
}
]);
$scope.codeMasterList would be the JSON data for your list.
You can update the value of the form fields by using ng-model instead of value. This also will bind the input values right back to the item in the list. So then you can just save $scope.codeMasterList
HTML Sample
<input type="text" ng-model="type.name" alt="Name of Keyword" size="60" >
Working Fiddle