$('.editimg').on('click',function(){
$("#myModel").modal("show");
var regionid = $(this).data('id');
$(".modal-body #id").val( regionid );
$("#region_id").val($(this).closest('tr').children()[1].textContent);
$("#region_name").val($(this).closest('tr').children()[2].textContent);
$("#description1").val($(this).closest('tr').children()[3].textContent);
$("#description2").val($(this).closest('tr').children()[4].textContent);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="editimg" href="#" id="<?php echo $reg_id;?>"><img src="../dmo_images/action_ico/sys_icon_edit.png" width="20" height="20" alt="Edit"></a>
<div class="modal-body" >
<form id="btnupdate" action="#" enctype="multipart/form-data" method="post" class="form-horizontal" role="form" >
<table class="table" width="200" border="0" cellpadding="0" cellspacing="0">
<tr class="FormData" rowpos="1">
<td class="CaptionTD">Name of Region</td>
<td><input type="text" id="region_name" class="FormElement ui-widget-content" role="textbox" name="region_name" required=""></input></td>
</tr>
<tr class="FormData" rowpos="2">
<td class="CaptionTD">Description 1</td>
<td><input type="text" id="description1" class="FormElement ui-widget-content" role="textbox" name="description1" required="" ></input></td>
</tr>
<tr class="FormData" rowpos="3">
<td class="CaptionTD">Description 2</td>
<td><input type="text" id="description2" class="FormElement ui-widget-content" role="textbox" name="description2" required="" ></input></td>
</tr>
<tr class="FormData" rowpos="4"></tr>
</table>
</form>
</div>
<div class="modal-footer">
<button type="submit" id="send" class="btn btn-danger" name="btnupdate" onClick="return validate_region()">Update</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
if(isset($_POST["btnupdate"]))
{
$id=$_REQUEST["region_id"];
$name=$_REQUEST["region_name"];
$desc1=$_REQUEST["description1"];
$desc2=$_REQUEST["description2"];
$query1="Update tbl_region set region_name='$name', description1='$desc1', description2= '$desc2', created_date='$date' where region_id=$id";
}
//validation.js
function validate_region()
{ if(get("region_name").value=="") {
return false; }
else if(get("description1").value== "") {
return false; }
else if(get("description2").value== "") {
return false; }
else {
return true; }
}
I have a table with two image buttons at each row as below.
When these icons are clicked, I show a bootstrap modal with data in the row.
I've done the validation, but when I clicked on the "update" button, no validation is shown and the button doesn't work at all.
I am the very beginner level one so I don't know where do I wrong or left to code. I've been browsing online for solutions but I still can't get it.
The updated value is needed to store in the database.
P.S when click on delete button at Delete Modal, it also needs to delete from the database, which is not working too.
Your help is much appreciated. Thank you!
Try the following working code
$('.editimg').on('click',function(){
$("#myModel").modal("show");
var regionid = $(this).data('id');
$(".modal-body #id").val( regionid );
$("#region_id").val($(this).closest('tr').children()[1].textContent);
$("#region_name").val($(this).closest('tr').children()[2].textContent);
$("#description1").val($(this).closest('tr').children()[3].textContent);
$("#description2").val($(this).closest('tr').children()[4].textContent);
});
function validate_region()
{
if($("#region_name").val() == ""){
return false; }
else if($("#description1").val() == "") {
return false; }
else if($("#description2").val() == "") {
return false; }
else
{
// HERE U SHOULD WRITE CODE TO WRITE IT TO DATABASE
$("#myModel").modal("hide");
return true;
}
}
<!DOCTYPE html>
<html>
<head>
<title>sas</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class='modal fade bs-example-modal-sm' id='myModel' tabindex='-1' role='dialog' aria-labelledby='gridSystemModalLabel'>
<div class='modal-dialog modal-sm' style='transform: translate(0px, 50%);' role='document'>
<div class='modal-content'>
<form id="btnupdate" action="#" enctype="multipart/form-data" method="post" class="form-horizontal" role="form" >
<div class="modal-body" >
<table class="table" width="200" border="0" cellpadding="0" cellspacing="0">
<tr class="FormData" rowpos="1">
<td class="CaptionTD">Name of Region</td>
<td>
<input type="hidden" id="region_id" class="FormElement ui-widget-content" role="textbox" name="region_id">
<input type="text" id="region_name" class="FormElement ui-widget-content" role="textbox" name="region_name" required=""></td>
</tr>
<tr class="FormData" rowpos="2">
<td class="CaptionTD">Description 1</td>
<td><input type="text" id="description1" class="FormElement ui-widget-content" role="textbox" name="description1" required="" ></td>
</tr>
<tr class="FormData" rowpos="3">
<td class="CaptionTD">Description 2</td>
<td><input type="text" id="description2" class="FormElement ui-widget-content" role="textbox" name="description2" required="" ></td>
</tr>
<tr class="FormData" rowpos="4"></tr>
</table>
</div>
<div class="modal-footer">
<button type="reset" id="send" class="btn btn-danger" name="btnupdate" onClick="return validate_region()">Update</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<table class="table">
<tr>
<th></th><th>Id</th><th>Name of Region</th><th>Description 1</th><th>Description 2</th>
</tr>
<tr>
<td><a class="editimg" href="#" id="1"><i class="glyphicon glyphicon-edit" style="font-size:20px"></i></a></td><td>1</td><td>val1</td><td>val2</td><td>val3</td>
</tr>
<tr>
<td><a class="editimg" href="#" id="2"><i class="glyphicon glyphicon-edit" style="font-size:20px"></a></td><td>11</td><td>val11</td><td>val21</td><td>val31</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Related
I want to achieve what is shown in this picture:
I have successfully retrieved data from a table and I want to calculate the values from textboxes. How can I achieve that?
My current source code:
<!doctype html>
<html>
<head>
<title>Lookup Modal Bootstrap 3</title>
<link rel="stylesheet" href="../css/bootstrap.css"/>
<link rel="stylesheet" href="../datatables/dataTables.bootstrap.css"/>
<script src="../js/jquery-ui 1.12.1.js"></script>
<script src="../js/bootstrap.js" ></script>
</head>
<body>
<div class="container"><br/><br/><br/>
<div class="panel panel-success">
<div class="panel-heading" >
<h3 class="panel-title"><strong> Purchase Order</strong> <strong> Back </strong></h3>
</div>
<div class="panel-body">
<form action="poSimpan.php" name="aku" id="aku">
<table align="left" class="table table-bordered table-hover ">
<tr valign="baseline">
<td nowrap align="right"><strong>No. PO:</strong></td>
<td><input type="text" id="poNo" name="poNo" size="32"></td>
<td><strong>No. PR:</strong></td>
<td><input type="text" name="prNo" id="prNo" placeholder="Request Number" readonly /> <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">. . .</button>
</tr>
<tr valign="baseline">
<td nowrap align="right"><strong>Supplier:</strong></td>
<td><select name="supplier" id="supplier" onChange="changeValue(this.value)" >
<option value=0>-Choose-</option>
<?php
$con = mysqli_connect('localhost', 'root', '', 'a.karat');
$result = mysqli_query($con,'select * from supplier ');
$result = mysql_query("select * from supplier");
$jsArray = "var kode = new Array();\n";
while ($row = mysqli_fetch_array($result)) {
echo '<option value="' . $row['supplierName'] . '">' . $row['supplierName'] . '</option>';
}
?>
</select></td>
<td><strong>Branch :</strong></td>
<td><input type="text" id="Branch" name="Branch" size="20"></td>
</tr>
<tr valign="baseline">
<td nowrap align="right"><strong> P.O Date</strong></td>
<td><input type="text" name="date_po" id="date_po" size="20"></td>
<td><strong>Delivery Date:</strong></td>
<td><input type="text" id="date_delivery" name="date_delivery" size="32"></td>
</tr>
<tr valign="baseline">
<td nowrap align="right"><strong></strong></td>
<td></td>
<td><strong>Note:</strong></td>
<td><input type="text" id="note" name="note" size="32"></td>
</tr>
</table>
<div class="row">
<div class="col-md-5">
</div>
</div>
<h4><strong>Product Detail </strong></h4>
<table class="table table-bordered table-hover table-striped" >
<thead>
<tr>
<th scope="row"> </th>
<th scope="row"><strong>Product Code</strong></th>
<th scope="row"><strong>Product Name</strong></th>
<th scope="row"><strong>QTY</strong></th>
<th scope="row"><strong>Price</strong></th>
<th scope="row"><strong>Discount</strong></th>
<th scope="row"><strong>Total</strong></th>
</tr>
</thead>
<tbody id="product_table">
</tbody>
</table>
<table width="400" border="0" align="right">
<tr>
<th scope="row">Tax 10%</th>
<td>:</td>
<td><input name="tax" id="taxt" type="text"></td>
</tr>
<tr>
<th scope="row">Grand Total</th>
<td>:</td>
<td><input name="grandtotal" id="grandtotal" type="text"></td>
</tr>
</table>
<input type="submit" value="Save" name="product_submit" id="product_submit" class="btn btn-primary" />
</form>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width:800px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Lookup </h4>
</div>
<div class="modal-body">
<table id="lookup" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>No. PR</th>
<th>branch</th>
</tr>
</thead>
<tbody>
<?php
$con = mysqli_connect('localhost', 'root', '', 'a.karat');
$sql = mysqli_query($con,'select * from pr ');
while ($r = mysqli_fetch_array($sql)) {
?>
<tr class="pick" no="<?php echo $r['prNo']; ?>", branch="<?php echo $r['branch'] ?>">
<td><?php echo $r['prNo']; ?></td>
<td><?php echo $r['branch']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="../js/jquery-1.11.2.min.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../datatables/jquery.dataTables.js"></script>
<script src="../datatables/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script type="text/javascript">
$(document).on('click', '.pick', function (e) {
document.getElementById("prNo").value = $(this).attr('no');
document.getElementById("branch").value = $(this).attr('branch');
var no=$(this).attr('no');
$.ajax({
type:"post",
data:"&product_id=1&prno="+no,
url:"POtabel.php",
success:function(result)
{
$("#product_table").html(result);
}
});
$('#myModal').modal('hide');
});
$(function () {
$("#lookup").dataTable();
});
</script>
</body>
</html>
and this is the target file
POtable.php
<?php
$con = mysqli_connect('localhost', 'root', '', 'a.karat');
if(isset($_POST['product_id']))
{
$prno=$_POST['prno'];
$i=1;
$sql = mysqli_query($con,"select * from detail_pr where prNo='$prno'");
while ($r = mysqli_fetch_array($sql)) {
echo '<tr>
<td><input type="checkbox" name="check[]" id="check'.$i.'" value="'.$i.'"></td>
<td><label for="productCode"></label>
<input type="text" name="productCode'.$i.'" id="productCode'.$i.'" readonly value="'.$r["productCode"].'" size="12"></td>
<td><label for="productName"></label>
<input type="text" name="productName'.$i.'" id="productName'.$i.'" readonly value="'.$r["productName"].'"size="35"></td>
<td><label for="qty"></label>
<input type="text" name="qty'.$i.'" id="qty'.$i.'" readonly value="'.$r["qty"].'" size="8"></td>
<td><input type="text" name="price'.$i.'" id="price'.$i.'" size="10"></td>
<td><input type="text" name="disc'.$i.'" id="disc'.$i.'" size="10"></td>
<td><input type="text" name="total'.$i.'" id="total'.$i.'" size="10"></td>
</tr>';
$i++;
}
}
?>
<script type="text/javascript">
function calculate(id){
var quantity = document.getElementById('qty'+id).value;
var price = document.getElementById('price'+id).value;
var sum = parseInt(quantity,10)*parseInt(price,10);
document.getElementById('total'+id).value = sum;
}
</script>
I have already seen the pages here for this error, but neither window.load nor putting script in the div block have solved it. If I write document.getElementById("fullname_error"), it is working, but it is not working with document.getElementById(ident) though the var ident is equal to the id of p , I have checked it.
<div class="most_page">
<div id="form_container" >
<form action="register.php" method="post" name="reg_doc">
<table class="table">
<tr>
<td>Full name</td>
<td><input type="text" name="fullname" value="Full name" ></td>
<td><p id="fullname_error" > hh</p></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address" onkeypress='validatename_degree(fullname.value,fullname_error.id);' value="Address"></td>
</tr>
</table>
<button class="button" id="submitreg" ><input id="submit" type="submit" value="submit"></button>
<script type="text/javascript">
function validatename_degree(x,ident) {
var iden='"'+ident+'"';
document.getElementById(iden).innerHTML=iden;
}
</script>
</form>
</div>
</div>
You don't require var iden='"'+ident+'"'; just use var iden=ident;. Please try this.
<!DOCTYPE html>
<html>
<body>
<div class="most_page">
<div id="form_container">
<form action="register.php" method="post" name="reg_doc">
<table class="table">
<tr>
<td>Full name</td>
<td>
<input type="text" name="fullname" value="Full name">
</td>
<td>
<p id="fullname_error"> hh</p>
</td>
</tr>
<tr>
<td>Address</td>
<td>
<input type="text" name="address" onkeypress='validatename_degree(fullname.value,fullname_error.id);' value="Address">
</td>
</tr>
</table>
<button class="button" id="submitreg">
<input id="submit" type="submit" value="submit">
</button>
<script type="text/javascript">
function validatename_degree(x, ident) {
var iden = ident;
document.getElementById(iden).innerHTML = iden;
}
</script>
</form>
</div>
</div>
</body>
</html>
Just pass the parameter ident to the document.getElementById property and use the your existing code,below is a working snippet
<div class="most_page">
<div id="form_container" >
<form action="register.php" method="post" name="reg_doc">
<table class="table">
<tr>
<td>Full name</td>
<td><input type="text" name="fullname" value="Full name" ></td>
<td><p id="fullname_error" > hh</p></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" name="address" onkeypress='validatename_degree(fullname.value,fullname_error.id);' value="Address"></td>
</tr>
</table>
<button class="button" id="submitreg" ><input id="submit" type="submit" value="submit"></button>
<script type="text/javascript">
function validatename_degree(x,ident) {
console.log(""+ident)
var iden='"'+ident+'"';
document.getElementById(ident).innerHTML=iden;
}
</script>
</form>
</div>
</div>
My HTML code is like this :
<form action="form2_action.php" method="post">
<table>
<tr>
<td>First Name </td>
<td>:</td>
<td><input type="text" id="first_name" name="first_name" required></td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" id="last_name" name="last_name" required></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><input type="text" id="age" name="age" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" value="Submit" id="submit"></td>
</tr>
</table>
</form>
<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
</div>
<div class="modal-body">
<table style="width:100%">
<tr>
<td style="width:30%">First Name</td>
<td height top="40" style="width:70%" id="first_name_modal"></td>
</tr>
<tr>
<td>Last Name</td>
<td height="40" id="last_name_modal"></td>
</tr>
<tr>
<td>Age</td>
<td height="40" id="age_modal"></td>
</tr>
</table>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
My Javascript code is like this :
$('#submit').on('click',function(e){
var first_name_modal = document.getElementById("first_name").value;
var last_name_modal = document.getElementById("last_name").value;
var age_modal = document.getElementById("age").value;
if(first_name_modal!="" && last_name_modal!="" && age_modal!=""){
$("#confirm-save").modal("show");
$('#first_name_modal').text(first_name_modal);
$('#last_name_modal').text(last_name_modal);
$('#age_modal').text(age_modal);
return false;
}
});
Demo is like this : http://jsfiddle.net/oscar11/xxx03c6z/
How to call action from modal bootstrap?
So, when clicking on the button "save changes" in the modal bootstrap, How to keep the system to call the action form2_action.php ?
Thank you very much
Give your form an id for referencing in the javaScript code.
<form id="form1">
Then define a function as below:
function formSubmit(){
$('#form1').submit();
}
Call formSubmit on click of Save button.
<button type="button" onClick="formSubmit();" class="btn btn-primary">
Form Submit
$("#modal-submit-btn").click(function(){
$('modal-dialog-id').modal('hide');
$('#form-id').submit();
});
check my script it is working fine.. just put the form tag in bootstrap mode and take values from input to bootstap model. here is the fiddle, you can check: https://jsfiddle.net/kriz1439/v5wpwcv9/
<table>
<tr>
<td>First Name </td>
<td>:</td>
<td><input type="text" id="first_name" name="first_name" required> </td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" id="last_name" name="last_name" required></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><input type="text" id="age" name="age" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td><button type="button" id="submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#confirm-save">Submit</button></td>
</tr>
</table>
<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form action ="action.php">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
</div>
<div class="modal-body">
<table style="width:100%">
<tr>
<td style="width:30%">First Name</td>
<td height top="40" style="width:70%" > <input type="text" id ="first_name_modal"></td>
</tr>
<tr>
<td>Last Name</td>
<td height="40" > <input type="text" id ="last_name_modal"> </td>
</tr>
<tr>
<td>Age</td>
<td height="40"> <input type="text" id ="age_modal"> </td>
</tr>
</table>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<input type="submit" />
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</body>
<script>
$('#submit').on('click',function(e){
document.getElementById("first_name_modal").value = document.getElementById("first_name").value;
document.getElementById("last_name_modal").value= document.getElementById("last_name").value;
document.getElementById("age_modal").value = document.getElementById("age").value;
if(first_name_modal!="" && last_name_modal!="" && age_modal!=""){
$("#confirm-save").modal("show");
$('#first_name_modal').text(first_name_modal);
$('#last_name_modal').text(last_name_modal);
$('#age_modal').text(age_modal);
return false;
}
});
</script>
Demo is like this : http://jsfiddle.net/oscar11/u4ynjkwa/2/
My html code is like this :
<form action="#">
<table>
<tr>
<td>First Name </td>
<td>:</td>
<td><input type="text" id="first_name" required></td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" id="last_name" required></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><input type="text" id="age" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" value="Submit" id="submit" data-toggle="modal" data-target="#confirm-save"></td>
</tr>
</table>
</form>
<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
</div>
<div class="modal-body">
<table style="width:100%">
<tr>
<td style="width:30%">First Name</td>
<td height top="40" style="width:70%" id="first_name_modal"></td>
</tr>
<tr>
<td>Last Name</td>
<td height="40" id="last_name_modal"></td>
</tr>
<tr>
<td>Age</td>
<td height="40" id="age_modal"></td>
</tr>
</table>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
My javascript code is like this :
$(document).on("click", "#submit", function () {
var first_name_modal = document.getElementById("first_name").value;
var last_name_modal = document.getElementById("last_name").value;
var age_modal = document.getElementById("age").value;
$('#first_name_modal').text(first_name_modal);
$('#last_name_modal').text(last_name_modal);
$('#age_modal').text(age_modal);
});
How to display html required before calling Bootstrap Modal?
Html required is like this :
So, Before calling Bootstrap Modal, the system display html required first if the data is empty
Thank you very much
First of all, you have to remove modal data attributes data-toggle="modal" data-target="#confirm-save" from submit button, otherwise modal will instantly open when click on submit button,
You can validate the inputs and if all valid, trigger the modal with JavaScript
$("#confirm-save").modal("show");
Example Code
$(document).on("click", "#submit", function() {
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
var age_modal = $("#age").val();
if (first_name == "") {
alert("FirstName Required");
return false;
} else if(last_name=="") {
alert("LastName Required");
return false;
} else if(age_modal=="") {
alert("Age Required");
return false;
} else {
$("#confirm-save").modal("show");
$('#first_name_modal').text(first_name);
$('#last_name_modal').text(last_name);
$('#age_modal').text(age_modal);
}
});
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<div class="row">
<form action="#">
<table>
<tr>
<td>First Name </td>
<td>:</td>
<td>
<input type="text" id="first_name" required>
</td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td>
<input type="text" id="last_name" required>
</td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td>
<input type="text" id="age" required>
</td>
</tr>
<tr>
<td></td>
<td></td>
<!-- <td><input type="submit" value="Submit" id="submit"></td> -->
<td>
<input type="submit" value="Submit" id="submit" class="btn">
</td>
</tr>
</table>
</form>
</div>
<div class="modal fade hide" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
</div>
<div class="modal-body">
<table style="width:100%">
<tr>
<td style="width:30%">First Name</td>
<td height top="40" style="width:70%" id="first_name_modal"></td>
</tr>
<tr>
<td>Last Name</td>
<td height="40" id="last_name_modal"></td>
</tr>
<tr>
<td>Age</td>
<td height="40" id="age_modal"></td>
</tr>
</table>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
Fiddle
First thing first, I am having a popup div, which contains a form
Here's is my div
<div class="addnewrule" id="add_message_0">
<form method="post" action="" id="frmadd">
<input type="hidden" name="filter" value="1">
<input name="rule_id" type="hidden" value="0">
<table class="table-responsive" width="100%" border="0" cellspacing="0" cellpadding="10" id="" style="text-align:center; margin-top:0px;">
<tr>
<td colspan="2" align="left"><div id="display_msg_0"></div></td>
</tr>
<tr>
<td width="40%" align="left">Name:</td>
<td width="60%" align="left"><input class="input_field" name="rule_name" type="text"></td>
</tr>
<tr>
<td align="left">Type:</td>
<td align="center">
<input type="radio" name="rule_type" value="0" style="display:none;" />
<input type="radio" name="rule_type" value="1" checked="checked" style="display:none;" />
<div class="btn-group equal_btn">
<button id="block_click" class="btn btn-default" type="button" onclick="setRules(0);">Block Clicks</button>
<button id="filter_click" class="btn btn-default active" type="button" onclick="setRules(1);">Filter Clicks</button>
</div></td>
</tr>
<tr>
<td align="left">Rule Active:</td>
<td align="center">
<input type="radio" id="active_0" name="active" value="1" checked="checked" style="display:none;" />
<input type="radio" id="inactive_0" name="active" value="0" style="display:none;" />
<div class="btn-group">
<button type="button" id="status_enb_0" class="btn btn-default active_btn active" onclick="setruleStatus(0,1);">Enable</button>
<button type="button" id="status_dis_0" class="btn btn-default inactive_btn" onclick="setruleStatus(0,0);">Disable</button>
</div></td>
</tr>
<tr>
<td align="left">Campaign ID:</td>
<td align="left"><input class="input_field" name="camp_id" type="text" /></td>
</tr>
<tr>
<td align="left" id="rRange">Filter IP Ranges:</td>
<td align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:0;" width="45%"><input class="input_field" name="start_ip" type="text" /></td>
<td width="10%" align="center">To</td>
<td style="padding:0;" width="45%" align="right"><input class="input_field" name="end_ip" type="text" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="left" id="rUAs">Filter users agents that contains:</td>
<td align="left"><input class="input_field" name="user_agent" type="text" /></td>
</tr>
<tr>
<td align="left" id="rRefs">Filter referers that contains:</td>
<td align="left"><input class="input_field" name="referer" type="text" /></td>
</tr>
<tr id="rUrl" style="display:none;">
<td align="left">Send Blocked Clicks to:</td>
<td align="left"><input class="input_field" type="text" id="rule_url" name="rule_url" value="" /></td>
</tr>
<tr>
<td align="left" colspan="2"><table class="copypaste" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Apply <a href="javascript:void(0)" class="btn orange_button tab2" onclick="cancel_popup('add_new_rule')" >Cancel</a></td>
</tr>
</table></td>
</tr>
</table>
</form>
</div>
Now, here is the jquery ajax function given below.. It checks for the validation and displays the validation message in a message div...
function submitRule(frmId,rule_id)
{
var data=$('#'+frmId).serializeArray();
$.ajax({
type:'POST',
url:'ajax/rule_update_process.php',
data: data,
dataType:'json',
success:function(jData)
{
if(jData.status==1)
{
$("#display_msg_"+rule_id).html(jData.error);
$("#display_msg_"+rule_id).addClass('error');
var child_div = $("#display_msg_"+rule_id);
var parent_div = $("#add_message_"+rule_id);
parent_div.scrollTop(parent_div.scrollTop() + child_div.position().top);
}
else
{
window.location.href='settings_rules.php';
}
}
});
}
Since the popup is a scrollable div, i want to scroll(only within the popup div) to the top so that i can show the message div with the error message..
here'sw how i am getting the screens,.
I used this piece if code to scroll to the top of the popup div to show the error message div,
but this piece of code doesn't seem to work..
What am i doing wrong??
$("#display_msg_"+rule_id).html(jData.error);
$("#display_msg_"+rule_id).addClass('error');
var child_div = $("#display_msg_"+rule_id);
var parent_div = $("#add_message_"+rule_id);
parent_div.scrollTop(parent_div.scrollTop() + child_div.position().top);
replace ur last line of code with this
parent_div.scrollTop(0,0);
I will suggest a very simple apprach:
$("#apply_button").click(function () {
var error_message = $("#your_error_message").css("display");
if (error_message != "none") {
$("#add_message_0").scrollTop(0);
};
});
Code speaks for itself.
BR
You can use css only brother. Example this is your form.
<div>
<form class="has-error">
<p>error</p>
<input name="" value="">
</form>
<div>
you can use the class .has-error to set a css codes. your css codes will only use if the error message is displayed.
div{ overflow-y: scroll; }
div .has-error{ height: 400px; }
height will defend your current section height with errors message.
Something like this on fiddle demo
if the message is not visible on button click, add this to your click function code
$( '#add_message_1' ).delay( 200 ).animate({scrollTop: 0 }, 300);}