How to Check if other page field value is empty using jquery - javascript

I'm getting all contacts from Mysql db and then showing it on html row. Each row has onClick() method After click on each row it will show a details of contact to the right side of all contacts.
showing All contacts:
echo "<tr onclick='getDetails($cdid), showthirdbox($cdid), visited(this);'>";
echo "<td class='' valign='top' align='left' width='20'>$companyName</td>";
echo "<td class='' valign='top'>$family_name</td>";
echo "<td class='' valign='top'>$given_name</td>";
echo "<td class='' valign='top'>$department</td>";
echo "<td class='' valign='top'>$title</td>";
echo "</tr>";
This getDetails() call the getContactDetails.php (Contact Details) page. In this page I've a field called Note where user can enter notes.
So now I want to show a Confirm message to the user Only if user write something on Enter Note box but click other row (all contacts) without save this Enter Notes
Confirm mesaage will be : Do you want to save this Notes box before you go to other Contact ? Yes Or No. If Yes then saveNote() will be call otherwise it will load the new contact row.
I've no idea how can I do this using Jquery or Javascript ? Do you have any idea or solution ? Thank you.
getDetails() function:
function getDetails(id) {
id = id;
$.ajax({
type:"post",
url:"getContactDetails.php",
data:"id="+id,
success:function(res){
$('#visiable').show();
$('#notebox_visiable').show();
$('#thirdBox').show();
$('#all_contact_details').html(res);
showthirdbox(id);
//showNotexBox(id);
//showAllNotesBox(id);
}
});
}
getContactDetails.php page have Note field:
<tr>
<td colspan="2">Enter Note<p id="demo"></p></td>
</tr>
<tr>
<td colspan="2">
<center><img id="loading-image" src="images/loading-image.gif" style="display:none; margin-bottom:10px !important;"/></center>
<div id="Notesboxsuccess"></div>
<form action="" method="post" id="showNotesBox" name="notebox">
<input type="hidden" value="<?php echo $id; ?>" name="cdid" id="cdid"/>
<tr>
<td colspan="2"><textarea name="contentText" id="contentText" cols="35" rows="4" placeholder="enter note"></textarea></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Save" name="submit" class="submit" id="addNewNotes"/></td>
</tr>
</form>
Home page view after click on a row (All contacts) :

change only triggers on blur, so as long as the user stays in the textbox there is nothing to do.
jQuery change()
Attach a change event handler:
$("#contentText").change(function() {
$("#contentText").attr("ididwritesomething","yep");
}
In the save button remove the attribute jQuery removeAttr()
$("#contentText").removeAttr("ididwritesomething");
In the click handler for your contact list, check if the attribute is set (from this question):
var attr = $("#contentText").attr("ididwritesomething");
if (typeof attr !== typeof undefined && attr !== false && attr=="yep"){
//do you want to save?
}

Here you can use jQuery Change function to do this.
For example,
<input id="field" type="text" value="abcd">
<a id="pid" href="#">Link</a>
For the above html code the jQuery code is following
$(document).ready(function(){
$("#pid").click(function(){
$("#field").change(function(){
alert("The text has been changed.");
});// end of change
});// end of click function
});//end of document

Related

how to make a form tag disappear after clicking submit

I want to make this form tag disappear after i hit the submit button.
I tried using "formaction" but it doesn't let me add my data to database. I am thinking of using JavaScript but have no idea how to make this form disappear.
<form id ='eventdetail' name='eventform' method='POST' action="<?php $_SERVER['PHP_SELF']; ?>?month=<?php echo $month;?>&day=<?php echo $day;?>&year=<?php echo $year; ?>&v=true&add=true">
<table width='400px' border='0'>
<tr>
<td width='150px'>Date</td>
<td width='250px'><input type='text' name='txttitle' value ='<?php echo $month?>/<?php echo $day?>/<?php echo $year?>'></td>
</tr>
<tr>
<td width='150px'>Title</td>
<td width='250px'><input type='text' name='txttitle'></td>
</tr>
<tr>
<td width='150px'>Detail</td>
<td width='250px'><textarea name='txtdetail'></textarea></td>
</tr>
<tr>
<td colspan='2' align='center'><input type='submit' name='btnadd' value='Add Event'></td>
</tr>
</table>
</form>
using javaScript you can create an event and than bind it to a submit button,
var hideForm = function() {
// to hide
var form = document.getElementById('eventdetail');
form.style.display = 'none';
};
In your from you can do somthing like that.
<input type="submit" name="btnadd" value="Add Event" onclick="hideForm()">
On most sites the submit button links to another page (it could be the same page just without the form), you can read more about submit buttons and how they are generally used here http://www.w3schools.com/html/html_forms.asp scroll down to the "The Submit Button" section!
Hope that helped!
If you want to stay on the same page without a refresh, you can use AJAX to send the form's data.
After that, use JavaScript to make your form disappear : the function is removeChild().

how to post data from php while loop with ajax

I am trying to create a friend button like fb.I have a while loop that echos the name and some other data i need to save into a table in my database for every user request seperatly.My problem is that i don't know how to pass them with ajax because i have same id on textboxes buttons.I tried to pass them with same ids but this passed 3 times the same data or only one of them.So i tried to use the id="something$row[id]" to define every textbox and button but i don't know how to trigger the jquery function and post them with ajax.a picture of what i am trying
my php file
echo "<div class='col-xs-12'>
<div class='row fixed-table'>
<div class='table-content'>
<table class='table table-striped text-muted' id='mytable'>
<tbody>";
while($row = mysqli_fetch_array($requests)){
$username=("SELECT * FROM users WHERE user_id=".$row['patient']);
$found=mysqli_fetch_array(mysqli_query($sql_link,$username));
echo "<tr>
<td class='text-center'>
<p>
$found[username]
<p>
</td>
<td class='text-center'>";
$patient_username=$found['username'];
$patient_id=$found['user_id'];
echo"<input type='text' id='patient_id$row[id]' class='hidden' value='$patient_id'>
<input type='text' id='patient_username$row[id]' class='hidden' value='$patient_username'>
<input type='text' id='doctor_id$row[id]' class='hidden' value='$doctor_id'>
<input type='text' id='doctor_fname$row[id]' class='hidden' value='$doctor_fname'>
<input type='button' id='accept_btn$row[id]' class='btn btn-primary' value='Accept'>
</td>
</tr>";
}
echo "</tbody>
</table>
</div>
</div>
</div>";
my js file
function decision(){
var patient_id = $('#patient_id').val();
var patient_username = $('#patient_username').val();
var doctor_id = $('#doctor_id').val();
var doctor_fname = $('#doctor_fname').val();
$.ajax({
type:"post",
url:"php/add.php",
data: {"patient_id": patient_id,"patient_username": patient_username,"doctor_id": doctor_id,"doctor_fname": doctor_fname},
success:function(data){
$("#decision").html(data);
}
});
$('#accept_btn').click(function(){
decision();
});
This is easy with JQUERY as you dont even need to know the IDs within the form. However first you will need to wrap all your inputs into a form and assign an ID to the form and a name to each input.
var data = $("#myForm").serialize();
$.post('myPHPFILEURL.php', data,function(retData){
//CODE THAT HANDLES SERVER RESPONSE
});
echo "<div class='col-xs-12'>
<div class='row fixed-table'>
<div class='table-content'>
<form id='myForm'>
<table class='table table-striped text-muted' id='mytable'>
<tbody>";
while($row = mysqli_fetch_array($requests)){
$username=("SELECT * FROM users WHERE user_id=".$row['patient']);
$found=mysqli_fetch_array(mysqli_query($sql_link,$username));
echo "<tr>
<td class='text-center'>
<p>
$found[username]
<p>
</td>
<td class='text-center'>";
$patient_username=$found['username'];
$patient_id=$found['user_id'];
echo"<input type='text' name='patient_id$row[id]' id='patient_id$row[id]' class='hidden' value='$patient_id'>
<input type='text' id='patient_username$row[id]' name='patient_username$row[id]' class='hidden' value='$patient_username'>
<input type='text' id='doctor_id$row[id]' name='doctor_id$row[id]' class='hidden' value='$doctor_id'>
<input type='text' id='doctor_fname$row[id]' name='doctor_fname$row[id]' class='hidden' value='$doctor_fname'>
<input type='button' id='accept_btn$row[id]' name='accept_btn$row[id]' class='btn btn-primary' value='Accept'>
</td>
</tr>";
}
echo "</tbody>
</table>
</form>
</div>
</div>
</div>";
Simply select your form and serialize() the data then pass the new serialized string into the data argument of your AJAX function.
You could add data-id="userID"
attribute to your input instead of having it in the ID
<input type='button' id='accept_btn$row[id]' class='btn btn-primary' value='Accept'>
So your input would look something like this:
<input type='button' id='accept_btn' data-id='$row[id]' class='btn btn-primary' value='Accept'>
And then in you jquery/javascript code use like this:
$("#accept_btn").on("click", function(){
var userID = $(this).data("id"); //this will get the value from data-id from the clicked button
//rest of your code here...
});
You can also add this for all of your input fields and retrieve data from them as well.
$("#patient_username").data("id")
Hope this helps. You can check this sample jsfiddle https://jsfiddle.net/Lz3k1he1/
I finally made it. It took me hours but it works and i wanto thank you all for your help and specially Igor Ilic.
The solution
php
<tbody>";
while($row = mysqli_fetch_array($requests)){
$username=("SELECT * FROM users WHERE user_id=".$row['patient']);
$found=mysqli_fetch_array(mysqli_query($sql_link,$username));
echo "<tr>
<td class='text-center'>
<p>
$found[username]
<p>
</td>
<td class='text-center'>";
$patient_username=$found['username'];
$patient_id=$found['user_id'];
echo"<buuton id='accept_btn$row[id]' class='btn btn-primary' data-patient_id='$patient_id' data-patient_username='$patient_username' data-doctor_id='$doctor_id' data-doctor_fname='$doctor_fname'
href='#' onclick='decision(this);'>
Accept</button>
</td>
</tr>";
}
echo "</tbody>
and js
function decision(p){
var patient_id = $(p).data('patient_id');
var patient_username = $(p).data('patient_username');
var doctor_id = $(p).data('doctor_id')
var doctor_fname = $(p).data('doctor_fname');
$.ajax({
type:"post",
url:"php/add.php",
data: {"patient_id": patient_id,"patient_username": patient_username,"doctor_id": doctor_id,"doctor_fname": doctor_fname},
success:function(data){
$("#decision").html(data);
}
});
}

How can I get the data from hidden field in jQuery? (hidden field has class in place of id)

I am getting data from the database:
<table>
<?php
$select_data = mysql_query(" select * from `data_table` ") or die(mysql_error());
while($data_row = mysql_fetch_array($select_data))
{
?>
<tr>
<td>
<img src="../Stuff-site_data_images/<?php echo$data_row['data_image_name']?>" width="100" height="100" />
</td>
<td> <?php echo $data_row['data_image_name'];?> </td>
<td> <?php echo $data_row['data_description'];?> </td>
I want to get data from here:
<td align="center" class="row_id">
<input class="inner_row_id" type="hidden" value="<?php echo $data_row['data_id'];?>" name="show_detail_button" id="show_detail_button"> Show All
</td>
I want to get data from here:
</tr>
<?php
}
?>
</table>
so as far as I know jQuery will conflict when there is more than 1 id so that's why I used CSS class names "row_id" & "inner_row_id".
When I click on "row_id" I want the value of "inner_row_id"
and for that I have written the code below:
$(".row_id").click(function(e){
var row_id = $(".inner_row_id").val();
alert("Le click thyuu....");
});
Is there any one who suggest me what to do in this...
This should work
$(".row_id").click(function(e){
alert($(this).find('.inner_row_id').val());
})
The "click" function gives you access to this, which is the element that you clicked on. Find then looks for any decedents of the element which have class .inner_row_id.
Link to jsFiddle
As I see you are creating the input dynamically so use below JS:
$(".row_id").on('click',function(e){
var row_id = $(this).children('.inner_row_id').val();
alert("Le click thyuu....");
});
DEMO.

Getting data from a input textfield then use it in MySQL statement on the same page

sorry for the bulk of code :)
I need to input a client name in the input textfield name clientname then i need to output the client information from my database when i click a button name loadcliinfo. But the problem is i don't know how will i get the data inputted in clientname? so I used $_POST['clientname']. The code is not working.
the code i pasted below is located on the same file.
<tr>
<td width="6"></td>
<td width="155">Client Name<font color="#990000">*</font></td>
<td width="218"><input type="text" name="clientname" id="clientname" required= "required" class="forinput" value="<?php echo $clientname ?>"/></td>
<td width="148"><input type="button" name="loadcliinfo" value="Load Client Info" onClick="loadclientinfo()"/></td>
</tr>
<tr>
<td width="6"></td>
<td width="155">Client Address<font color="#990000">*</font></td>
<td width="218"><p id="clientadd" class="readonly"></p></td>
<td width="148">Contact Name<font color="#990000">*</font></td>
<td width="230"><p id="clientcontactname" class="readonly"></p></td>
<td width="8"></td>
</tr>
<tr class="shade">
<td width="6"></td>
<td width="155">Email Address<font color="#990000">*</font></td>
<td width="218"><p id="clientemail" class="readonly"></p></td>
<td width="148">Contact No<font color="#990000">*</font></td>
<td width="230"><p id="clientaddcontact" class="readonly"></p></td>
<td width="8"></td>
</tr>
my php code
<?php
$name=isset($_POST['clientname'])? $_POST['clientname'] : '';
I get the data using this statement isset($_POST['clientname'])? $_POST['clientname'] : '' and store it in the variable $name but when i output the variable its empty.
$csql="Select address, email, contactperson, contactno from client where name='$name'";
$result=$db->prepare($csql);
$result->execute();
while($resu= $result->fetch(PDO::FETCH_ASSOC))
{
echo '<input type="hidden" id="add" value="'.$resu['address'].'"/>';
echo '<input type="hidden" id="email" value="'.$resu['email'].'"/>';
echo '<input type="hidden" id="contactperson" value="'.$resu['contactperson'].'"/>';
echo '<input type="hidden" id="contactno" value="'.$resu['contactno'].'"/>';
}
?>
My loadclientinfo function
<script>
function loadclientinfo()
{
var add=document.getElementById("add");
var email=document.getElementById("email");
var contactperson=document.getElementById("contactperson");
var contactno=document.getElementById("contactno");
document.getElementById("clientadd").innerHTML = add.value;
document.getElementById("clientemail").innerHTML = email.value;
document.getElementById("clientcontactname").innerHTML = contactperson.value;
document.getElementById("clientcontact").innerHTML = contactno.value;
}
</script>
I think getting data from clientname is the problem. Is there any way i could get the data from clientname on the same page?
thanks :D
$_POST and $_GET get their information from an html form (for the most part). You have the input fields, but no form. You need to have something along the following:
<form method="post" action="myphpscript.php">
<input type="text" .... >
<input type="submit" .... >
</form>
That method attribute is important because that determines what gets put into $_POST and what gets put into $_GET. Then your action will be the php script that it goes to. And lastly, those variables don't get stored into the local POST session (assuming your method is "post") until the submit button is hit. Now if you want to do this whole thing without refreshing the page, then you'll have to do a bit of AJAX work to call the PHP script when the "submit" button is hit.
But that's basically the problem. Nothing is getting put into local storage. Simply having a misc. input field doesn't do anything. If you don't want to use a form, then you'll have to figure out how to get the data some other way, without $_POST. You cooouulldd contruct a GET url then use $_GET but that's not typically recommended as the user can plainly see the variable values in the address bar like: (your url)?clientname=foobar.
More on PHP with POST and GET

How do i get the javascript dynamic row values in php?

jsfiddle
I'm trying to print the input text field values on nextpage (postdata.php). But it always print the first row result only. I didn't get the remaining row values on next page. I've posted my full codes on jsfiddle.. How do i get the remaining js dynamic row values in php (postdata.php page)?
JS
$(document).ready(function(){
$("span").click(function(){
$("#container").append('<tr><td>Email : </td><td><input type="text" name="email[]" placeholder="Email id" /></td> <td>Name : </td><td><input type="text" name="name[]" placeholder="Your Name "/></td> <td><a title="Delete this row" href="javascript:void(0);" class="remove">Del</a></td></tr>');
});
$("#container").on('click','.remove',function(){
$(this).parent().parent().remove();
});
});
Php
<?php
echo "
<table>
<tr>
<td>
Email :
</td>
<td>
$_POST[email]
</td>
<td>
Name :
</td>
<td>
$_POST[name]
</td>
</tr>
</table>";
?>
Since name of fields you declared is array the $_POST becomes multidimensional array.So try like this
<?php
$size = sizeof($_POST['email']);
echo "<table>" ;
for($i=0; $i<$size;$i++)
{
echo "
<tr>
<td>
Email :
</td>
<td>
".$_POST['email'][$i]."
</td>
<td>
Name :
</td>
<td>
".$_POST['name'][$i]."
</td>
</tr>
";
}
echo "</table>";
?>
also in your html change names of Name and Email field to name[] and email[] respectively.Also you have misplaced the form tag. It starts after <table> and ends after <table>. which was not correct. so place form tag before table tag
When you add square brackets to the name of an input field, PHP will receive it's value as an array. Your JS code is fine, but the PHP code doesn't handle arrays at all. Look at the following:
echo "
<table>";
if(!is_array($_POST['email'])) {
$_POST['email'] = array($_POST['email']);
$_POST['name'] = array($_POST['name']);
}
foreach($_POST['email'] as $key => $email) {
// get the corresponding name to the email
$name = $_POST['name'][$key];
echo "<tr>
<td>
Email :
</td>
<td>
$email
</td>
<td>
Name :
</td>
<td>
$name
</td>
</tr>";
}
echo "</table>";
Note: This code will check whether multiple values were submitted or not and will work in both scenarios.

Categories