I have index file where I load and show form. now I can not get values to other file where I process receivied values.
like this i get event fired but i dont get any value when i debug saveEdit.php file
HTML:
form name="formDetail" method="post" action="#" >
<table id="edittable" border="1" cellspacing="2" cellpadding="1">
<tbody>
<tr>
<td>
<label>Nimi:</label>
</td>
<td>
<input id="nimi" name="nimi" placeholder="Kappaleen nimi" type="text">
</td>
<td>
<label>Levy:</label>
</td>
<td>
<input id="levy" name="levy" placeholder="Levyn tunnus" type="text" width="10px">
</td>
</tr>
<tr>
<td>
<label>Artisti:</label>
</td>
<td>
<input id="artisti" name="artisti" placeholder="Kappaleen esittäjä" type="text">
</td>
<td>
<label>Kieli:</label>
</td>
<td>
<input id="kieli" name="kieli" placeholder="Alkuperäiskieli" type="text" width="20">
</td>
</tr>
<tr>
<td>
<label>Numero:</label>
</td>
<td>
<input id="numero" name="numeron" placeholder="Numero" type="text">
</td>
<td>
<input name="submit" class='save_button' type="button" value="Tallenna" />
<input name="delete" type="button" value="Poista" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="id_number" id="id_number" />
</form>
Javascript:
jQuery(document).ready(function ($) {
$('body').on('click', '.clickable-row', function () {
$('tr').removeClass('selected');
$(this).addClass('selected');
var selectedRow = $(this);
var td = $(selectedRow).children('td');
console.log(td);
$('#nimi').val(td[0].innerText);
$('#artisti').val(td[1].innerText);
$('#levy').val(td[2].innerText);
$('#kieli').val(td[3].innerText);
$('#numero').val(td[4].innerText);
$('#id_number').val(td[4].innerText);
console.log("test");
$('#edit').show();
});
$('#formDetail').on('click', '.save_button', function () {
$.post("saveEdit.php", $(this).serialize())
.done(function (data) {
console.log(data)
});
});
$('#pageContent').load('container.php');
});
Stay with the delegated submit listener since it appears you are loading the content using ajax.
But you also need to prevent the default browser form submit process:
$(document).on('submit', '#formEditeditBiisi', function(event) {
event.preventDefault();//prevent browser submitting form
$.post("saveEdit.php", $(this).serialize())
.done(function(data) {
console.log(data)
});
});
Try using a submit handler with a preventDefault() which stops the standard submit POST from processing :
$('#formDetail').on('submit', function (event) {
event.preventDefault();
$.post("saveEdit.php", $(this).serialize())
.done(function (data) {
console.log(data)
});
});
Related
I am building a form allowing people to download a PDF upon submission.
Problem is that I am not able to include a conditional redirection on the form.
Would you mind having a look at the code?
JS
function OnSubmitForm() {
if (document.download.Resource[doc1].checked == true) {
document.download.action = "url1";
} else if (document.download.Resource[doc2].checked == true) {
document.download.action = "url2";
} else if (document.download.Resource[doc2].checked == true) {
document.download.action = "url3";
}
return true;
}
HTML
<p><strong>To download this article, please, complete the fields below</strong>
<p>Resource:</p>
<table width="100px" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>Doc1</td>
<td>
<input id="Resource" value="doc1" name="Resource" type="radio" validatethis="radio" checked="true">
</td>
</tr>
<tr>
<td>Doc2</td>
<td>
<input id="Resource" value="doc2" name="Resource" type="radio" validatethis="radio">
</td>
</tr>
<tr>
<td>Doc3</td>
<td>
<input id="Resource" value="doc3" name="Resource" type="radio" validatethis="radio">
</td>
</tr>
</tbody>
</table>
<input value="Submit" type="submit">
http://jsfiddle.net/0z8hu7tv/3/
Thanks a lot!
The CRUD operations with AngularJS are working fine. On click of submit button values get submitted in db, but its not getting reflected on view with at the same time.
Either I required separate button for showing values from database or I need to click twice.
My view:
<div style="float:left; margin-left:50px;">
<div><label for="id">Update Records</label></div><br>
<table>
<tr >
<td><label for="id">Id:</label> </td>
<td><input type="text" name="id" ng-model="user.id"/></td>
</tr>
<tr >
<td><br><label for="uname">Name:</label> </td>
<td><input type="text" name="uname" ng-model="user.uname"/></td>
</tr>
<tr>
<td><br><label for="ucity">City:</label> </td>
<td><input type="text" name="ucity" ng-model="user.ucity"/></td>
</tr>
<tr>
<td>
<a ng-click="updatecust(user.id,user.uname,user.ucity)" class="btn btn-primary">Update</a>
</td>
</tr>
<!--<tr>
<td><br>
<a ng-click="viewtable()" class="btn btn-primary">View All</a>
</td>
</tr> -->
</table>
</div>
My controller:
var phonecatControllers = angular.module('phonecatControllers', ['templateservicemod', 'navigationservice','restservice']);
$scope.updatecust=function(id,name,city){
console.log("update is clicked");
$scope.user={id:id,uname:name,ucity:city};
RestService.update(id,name,city).success( RestService.vieww().success(viewdata));
};
REST API:
var restservice = angular.module('restservice', [])
.factory('RestService', function ($http) {
return{
update: function(id,name,city){
console.log(id+name+city);
return $http.get("http://localhost/code/index.php/demo/updatedemo?id="+id+"& uname="+name+"&ucity="+city,{});
}
}
});
RestService.update(id,name,city).success( RestService.vieww().success(viewdata));
this should be changed to
RestService.update(id,name,city).success(function(){
RestService.vieww().success(function(data){
$scope.viewdata = data.data;
}));
});
by considering that, you have RestService function vieww to get the data array.
and in your HTML, you need to do ngRepeat for viewdata to display the table.
I have this:
<table>
<tr id="firstaut">
<td>Author:</td>
<td>
<input class="auts" name="name" />
</td>
<td>
<button class="aut_button" type="button">delete</button>
</td>
</tr>
<tr>
<td colspan="2">
<a onclick="addmore()"> + add more name</a>
</td>
</tr>
</table>
$(function(){
$('.aut_button').on('click',function(){
alert('test');
});
});
function addmore(){
$("<tr id='firstaut'><td>Author:</td><td><input class='auts' name='name'/></td><td><button class='aut_button' type='button'>delete</button></td></tr>")
.insertAfter('#firstaut').delegate('.aut_button');
}
If i click on newly added delete button, it is not alerting. what am i doing wrong?
Try using on with the other overload,
$(function(){
$('table').on('click', '.aut_button' ,function(){
alert('test');
});
});
Please read here to know more about event delegation.
I just implemented tiptip and found it fantastic to use. Now i want to make a form and use it in tiptip tool tip so that user can fill and submit it.
I have created tiptip as
$('.div').tipTip({
maxWidth: 1000,
defaultPosition: 'right',
content: function (e) {
$.ajax({
url: 'tets.php',
datatype: JSON,
success: function (response) {
$('#tiptip_content').html(response);
$('body').append(response).fadeIn('1000');// the var e is the callback function data (see above)
}
});
return 'Please wait...'; // We temporary show a Please wait text until the ajax success callback is called.
}
});
I get a form in my tooltip. Now as soon as i take my mouse in it, it disappears (obviously, its a tooltip at the end). Is there any way to do what i am trying to achieve??
My html
<div class="div">Hover on Me</div>
tets.php
<form id = "testForm" method="post" action="newEmptyPHP.php">
<table width="400" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="150">Username</td>
<td width="250"><input name="username" type="text" class="textfield" /></td>
</tr>
<tr>
<td>Password</td>
<td><input name="password" type="password" class="textfield" /></td>
</tr>
<tr>
<td> </td>
<td><input name="remember" type="checkbox" value="d"> Remember me</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="login" value="Login" /></td>
</tr>
</table>
</form>
http://code.drewwilson.com/entry/tiptip-jquery-plugin
"keepAlive: true of false (false by default) - When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it."
Try adding this property and set it to true
Update:
Example here: http://jsbin.com/imeqes/2/
Appears to work fine when you hover over image, then hover over tip, it stays there.
I have search box and add and edit buttons in one page.i have to edit a detail after selecting radiobutton.The script for selecting radiobutton and redirecting to next page is given below.But only alert to 'Select resume' only works.rest of code is not working.Pls help
<script type="text/javascript">
$(document).ready(function () {
var which_button;
var rad;
$('input[type="image"]').click(function (event) {
process_form_submission(event);
if (which_button == "Edit") {
if (!$("input[name='rdoUserId']:checked").val()) {
alert('Select a Resume!');
return false;
}
else {
rad = $("input[name='rdoUserId']:checked").val();
var url = "Edit/" + rad;
$('#frmIndexResume').attr("action", url);
$('#frmIndexResume').submit();
}
}
return false;
})
function process_form_submission(event) {
event.preventDefault();
//var target = $(event.target);
var input = $(event.currentTarget);
which_button = event.currentTarget.value;
}
});
</script>
<form name="frmIndexResume" method="get"action="">
<table id="tblSearch">
<tr>
<td>Name:#Html.TextBox("Names")</td>
<td>From:#Html.TextBox("FromDate")</td>
<td>To:#Html.TextBox("ToDate")</td>
<td><input type="image" value="Search" src="#Url.Content("~/images/Search.png")" width="60px"height="40px" alt="Search"/></td>
</tr>
</table>
<table id="Createbtn">
<tr>
<td>
<a href="#Url.Action("Create", "Resume")" title="Create">
<img src="#Url.Content("~/images/Create.png")" width="40px" height="30px"alt="Create"/></a>
</td>
<td>
<input type="image" value="Edit" src="#Url.Content("~/images/Edit.png")" width="40px" height="30px" alt="Edit"/>
</td>
</tr>
</table>
<table id="tblResume">
<caption>Listings</caption>
<tr>
<th>Select</th>
<th>
Name
</th>
<th>
DOB
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
<input type="radio" value="#item.Id" name="rdoUserId" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.DOB)
</td>
</tr>
}
</table>
</form>
You have the radio button in a loop causing there to be duplicates of the radio button.
#foreach (var item in Model)
{
...
<input type="radio" value="#item.Id" name="rdoUserId" />
...
}
The 'name' attribute is not a unique identifier. My guess is the jQuery is picking either the last or first radio button in the form since there is more than one of them.
There may be more issues besides this with the form also.
Maybe window.location is what you are looking for.
You can easily redirect via:
window.location = url;
or via:
window.navigate(url);
Please note that the second approach maybe ie-specific.