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>
Related
So I've been trying to build a website using Meteor and am quite new with it. I am trying to have javascript that will make use of the values on the page and then create a download from those values. These values differ depending on which page the user is on as the meteor template is loaded with specific information. The way I would think is would work is:
var thing = document.getElementById("tcpout").value;
but when I test this I get "undefined". Now if I don't do .value then do something like
console.log(document.getElementById("tcpout"));
the output in the console is this:
<td id="tcpout"> 50443</td>
where 50443 is the value that I want. Yet I can't seem to figure out how to get that into the javascript. I am using meteor and have tried a few things through meteor's project .js file, but can't seem to figure out how to incorporate dynamic fields into javascript. Essentially I just want to figure out the easiest and best way to work with the mongodb data on the client-side with javascript. Here is the template and the meteor js file.
<template name="profile">
{{#each iotdevice}}
<div class="container" style="margin-top:10px">
<div class="starter-template" align="center">
<h1>{{model}} {{manufacturer}} {{type}}</h1>
<p class="lead"></p>
<table class="table table-bordered">
<thead>
<tr>
<th>Ports</th>
<th>Outgoing</th>
<th>Incoming</th>
</tr>
</thead>
<tbody>
<tr>
<td>TCP</td>
<td id="tcpout"> {{tcpout}}</td>
<td id="tcpin"> {{tcpin}}</td>
</tr>
<tr>
<td>UDP</td>
<td id="udpout"> {{udpout}}</td>
<td id="udpin"> {{udpin}}</td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead>
<tr>
<th colspan="2">Domains</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{domains}}</td>
</tr>
</tbody>
</table>
</div>
<h4 align="center">Select Firewall</h4>
<div align="center">
<button style="margin-bottom:15px" type="button" class="btn btn-outline-danger" onclick="vyosformshow()">
VyOS
</button>
<button style="margin-bottom:15px" type="button" class="btn btn-outline-danger"
onclick="download('test.sh','hello\nworld')">IPTables
</button>
<button style="margin-bottom:15px" type="button" class="btn btn-outline-danger">FreePBX</button>
<button style="margin-bottom:15px" type="button" class="btn btn-outline-danger" onclick="dthings()">IPFire
</button>
<button style="margin-bottom:15px" type="button" class="btn btn-outline-danger">IPCop</button>
</div>
<div id="vyosform" style="display:none">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="exampleInputEmail1">firewall in name</label>
<input class="form-control" id="firein" placeholder="">
</div>
<div class="form-group col-md-6">
<label for="exampleInputPassword1">firewall out name</label>
<input class="form-control" type="text" id="fireout" placeholder="">
</div>
<div class="form-group col-md-6">
<label for="exampleInputPassword1">rule number</label>
<input class="form-control" id="rulenum" placeholder="">
</div>
<div class="form-group col-md-6">
<label for="exampleInputPassword1">device IP address</label>
<input class="form-control" id="ip" placeholder="">
</div>
<div align="center">
<button id="dostuff" class="btn btn-primary" style="margin-bottom:30px">Submit</button>
</div>
</div>
</form>
</div>
</div>
{{/each}}
</template>
JS
if (Meteor.isClient) {
//this code only runs on the client
var directory = Iron.Location.get().path;
var start = directory.lastIndexOf("/");
var stop = directory.search(".html");
var parseddir = directory.slice(start + 1, stop);
var search = directory.slice(start + 1);
var regexsearch = new RegExp(["^", search, "$"].join(""), "i");
console.log(search);
Template.iotprofiler.helpers({
'device': function () {
return DeviceList.find();
}
});
Template.profile.helpers({
'iotdevice': function () {
return DeviceList.find({model: parseddir});
}
});
Template.search.helpers({
'results': function () {
return DeviceList.find({$or: [{model: regexsearch}, {manufacturer: regexsearch}, {type: z}]});
}
});
}
I have a html form with two buttons on it:-
[1] One button is used to upload an image file (.jpg)
[2] and the second one is to submit the form.
The problem is that the upload image button seems to be refreshing the page after the method for uploading the image has completed. Below is my html:-
<div class="m-b-18px">
<div class="col-m-12">
<a (click)="readRecipes()" class="btn btn-primary pull-right">
<span class="glyphicon glyphicon-plus"></span>Read Recipes
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form [formGroup]="create_recipe_form" (ngSubmit)="createRecipe()">
<table class="table table-hover table-responsive table-bordered">
<tr>
<td>
Name
</td>
<td>
<input name="name" formControlName="name" type="text" class="form-control" required />
<div *ngIf="create_recipe_form.get('name').touched && create_recipe_form.get('name').hasError('required')"
class="alert alert-danger">Name is required
</div>
</td>
</tr>
<tr>
<td>
Description
</td>
<td>
<textarea name="description" formControlName="description" class="form-control" required>
</textarea>
<div *ngIf="create_recipe_form.get('description').touched && create_recipe_form.get('description').hasError('required')"
class="alert alert-danger">
Description is required
</div>
</td>
</tr>
<tr>
<td>
Image
</td>
<td>
<input name="selectFile" id="selectFile" type="file" class="form-control btn btn-success" />
<button type="button" class="btn btn-primary" (click)="uploadImage($event)" value="Upload Image">Upload Image</button>
<input type='hidden' id='image_id' name='img_id' value="6" formControlName="image_id" />
</td>
</tr>
<tr>
<td></td>
<td>
<button class="btn btn-primary" type="submit" [disabled]="!create_recipe_form.valid">
<span class="glyphicon glyphicon-plus"></span> Create
</button>
</td>
</tr>
</table>
</form>
</div>
</div>
My code for the uploadImage method is below:-
uploadImage(e) {
let files = this.elem.nativeElement.querySelector('#selectFile').files;
let formData = new FormData();
let file = files[0];
formData.append('selectFile', file, file.name);
this._imageService.uploadImage(formData)
.subscribe(
image => {
console.log(image);
this.addImageIdToHtml(image)
e.preventDefault();
e.stopPropagation();
},
error => console.log(error)
);
}
As soon as the above method has finished running the page appears to refreshing causing my app to go back to the land page. This is not the behaviour I want. What I actually want is the form page to be retained until the Submit form button is pressed. Can anyone help me please?
Use div tags instead of form tag.
Change the button type as button.
<button type="button">Upload Image</button>
Modify the code as follows.
<div class="m-b-18px">
<div class="col-m-12">
<a (click)="readRecipes()" class="btn btn-primary pull-right">
<span class="glyphicon glyphicon-plus"></span>Read Recipes
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div [formGroup]="create_recipe_form" (ngSubmit)="createRecipe()">
<table class="table table-hover table-responsive table-bordered">
<tr>
<td>
Name
</td>
<td>
<input name="name" formControlName="name" type="text" class="form-control" required />
<div *ngIf="create_recipe_form.get('name').touched && create_recipe_form.get('name').hasError('required')"
class="alert alert-danger">Name is required
</div>
</td>
</tr>
<tr>
<td>
Description
</td>
<td>
<textarea name="description" formControlName="description" class="form-control" required>
</textarea>
<div *ngIf="create_recipe_form.get('description').touched && create_recipe_form.get('description').hasError('required')"
class="alert alert-danger">
Description is required
</div>
</td>
</tr>
<tr>
<td>
Image
</td>
<td>
<input name="selectFile" id="selectFile" type="file" class="form-control btn btn-success" />
<button type="button" class="btn btn-primary" (click)="uploadImage($event)" value="Upload Image">Upload Image</button>
<input type='hidden' id='image_id' name='img_id' value="6" formControlName="image_id" />
</td>
</tr>
<tr>
<td></td>
<td>
<button class="btn btn-primary" type="button" [disabled]="!create_recipe_form.valid">
<span class="glyphicon glyphicon-plus"></span> Create
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
You should not upload files on Angular folders like (Assets) , cuz it will recompile every time new file added to Angular environment and that will cause you the page refreshment you didn't want.
If you are using button tag inside the form tag, add type="button" inside the button tag.
<button type="button"></button>
This will work perfectly
I am working on a piece of code and since I dont have too much experience with jquery or javascript I need your help. I want to take the data from the row when button EditBtn is clicked and set those values to modal. I tried the code below but It was not working.
Below is my code
Table :
<table id="example" class="table table-bordered table-hover">
<thead>
<tr>
<th>Ödeme Türü</th>
<th>Ödeme Başlığı</th>
<th>İçerik</th>
<th>Son Ödeme Tarihi</th>
<th>Tutarı</th>
<th>Ödeme Durumu</th>
<th>Düzenle</th>
</tr>
</thead>
<tbody>
#foreach (OdemeList item in Model)
{
<tr id="#item.Odeme.OdemeID">
<td>#item.Odeme.OdemeType</td>
<td>#item.Odeme.OdemeTitle</td>
<td>#item.Odeme.OdemeContent</td>
<td>#item.Odeme.SonOdemeTarih</td>
<td>#item.Odeme.OdemeTutar</td>
#if (#item.KullaniciOdeme.isPay == true)
{
<td>Odendi</td>
}
else
{
<td>Odenmedi</td>
<td>
<form>
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
data-amount="#item.Odeme.OdemeTutar"
data-name="#item.Odeme.OdemeTitle"
data-image="/Content/LoginCssJs/pay.png"
data-locale="auto">
</script>
</form>
</td>
#*<td>
<a data-toggle="modal" data-target=".bootstrapmodal3"><button class="btn btn-success">Öde</button></a>
</td>*#
}
<td>
<a data-toggle="modal" id="EditBtn" class="btn edit" data-target=".bootstrapmodal"><img src="#Url.Content("~/Content/Icons/edit.png")" alt="Düzenle" /></a>
</td>
<td>
<a data-toggle="modal" data-target=".bootstrapmodal2"><img src="#Url.Content("~/Content/Icons/Delete.png")" alt="Sil" /></a>
</td>
</tr>
}
</tbody>
</table>
My modal:
<div class="modal fade bootstrapmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close"><span>×</span></button>
<div class="modal-title">
<h3>Ödeme Düzenle</h3>
</div>
</div>
<div class="modal-body">
<form>
<label>Ödeme Türü</label>
<select class="form-control" id="OdemeTuru">
<option>Aidat</option>
<option>Isınma</option>
<option>Bina Gideri</option>
</select><br />
<div class="form-group">
<label for="odemebasligi">Ödeme Başlığı</label>
<input type="text" class="form-control" id="odemebasligi" placeholder="OdemeTitle">
</div>
<div class="form-group">
<label for="comment">Ödeme içeriği</label>
<textarea class="form-control" rows="5" id="comment" placeholder="-OdemeContent"></textarea>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Tutar</label>
<div class="input-group">
<div class="input-group-addon">TL</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="OdemeTutar">
<div class="input-group-addon">.00</div>
</div>
</div>
<div class="form-group">
<label for="odemetarihi">Son Ödeme Tarihi</label>
<input type="text" class="form-control" id="odemetarihi" placeholder="SonOdemeTarih">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Kaydet</button>
<button class="btn btn-danger" data-dismiss="modal"> Vazgeç</button>
</div>
</div>
</div>
</div>
Script:
<script>
$('a.edit').on('click', function() {
var myModal = $('.bootstrapmodal');
//// now get the values from the table
//var OdemeTuru = $(this).closest('tr').find('td.OdemeType').html();
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
var OdemeIcerik = $(this).closest('tr').find('td.OdemeContent').html();
var OdemeTutar = $(this).closest('tr').find('td.SonOdemeTarih').html();
var SonOdemeTarihi = $(this).closest('tr').find('td.OdemeTutar').html();
//// and set them in the modal:
//$('#', myModal).val(OdemeTuru);
$('#odemebasligi', myModal).val(OdemeBaslik);
$('#comment', myModal).val(OdemeIcerik);
$('#exampleInputAmount', myModal).val(OdemeTutar);
$('#odemetarihi', myModal).val(SonOdemeTarihi);
// and finally show the modal
myModal.modal({ show: true });
return false;
});
</script>
In script you are targeting <td> class .find('td.OdemeTitle') and in table there are no class defined <td>#item.Odeme.OdemeTitle</td> what you only need is define class which you are targeting e.g
For
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
HTML
<td class="OdemeTitle">#item.Odeme.OdemeTitle</td>
follow above example and set all <td> classes and you will be all set.
minimal fiddle example
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 %}
I need to collect the data from the display div on click of edit button and pass it to the form div and populate corresponding inputs using jquery.
HTML Form Div
<form class="form-horizontal" name="editform" id="editform" action="include/abc.php" method="post">
<fieldset>
<div class="form-group">
<label for="username" class="col-lg-2 control-label">User Name </label>
<div class="col-lg-4">
<input class="form-control" name="username" placeholder="User Name" type="text" id="username" value="" >
</div>
<label for="email" class="col-lg-2 control-label">User Name </label>
<div class="col-lg-4">
<input class="form-control" name="email" placeholder="Email" type="text" id="uemail" value="" >
</div>
</div>
<div class="form-group">
<button type="submit" id="editdata" class="btn btn-success">Edit and Update </button>
</div>
</fieldset>
</form>
Display Div
<div class="well">
<div id="formdisplay">
<table>
<tr>
<td> User Name:</td><td id="u_name"> Paul </td>
</tr>
<tr>
<td> Email :</td><td id="u_email"> paul#abc.com</td>
</tr>
</table>
</div>
<button type="button" id="edit" class="btn btn-info">Edit</button>
<button type="button" id="delete" class="btn btn-danger">Edit</button>
</div>
Jquery
<script type="text/javascript">
$(function()
{
$("#edit").click(function(e) {
$("#username").val($("#u_name").text());
$("#uemail").val($("#u_email").text());
});
});
</script>
You are missing # in the id selector.
Try,
$(function()
{
$("#edit").click(function(e) {
$("#username").val($("#u_name").text());
$("#uemail").val($("#u_name").text());
});
});