autofill textbox with database values when 1st value is entered - javascript

Here i am linking the question and it is the continuation of that question LINK IS HERE
Actually i have made that work by changing the script like this
my javascript
<script type="text/javascript">
$(document).ready(function()
{ var ac_config = { source: "fill_patient_info.php", select: function(event, ui){ $("#p_name").val(ui.item.p_name); $("#p_dob").val(ui.item.p_dob) }, minLength:1 }; $("#p_name").autocomplete(ac_config); });
</script>
and in fill_patient_info1.php
$p_name = $_GET['p_name'];
$result = mysql_query("SELECT patient_id, patient_name, dob from patient WHERE patient_name LIKE '".$p_name."%'");
$myrow = mysql_fetch_array($result);
if(mysql_num_rows($result))
{
$p_name = $myrow["patient_name"];
$p_dob = $myrow["dob"];
$textout = $p_name.','.$p_dob;
echo $textout;
}else
{
echo "Sorry This Patient Does Not Exist";
}
It is not working properly. If i have more than 1 name with the same letter, i cannot type in the 1st textbox. As soon as i enter the 1st letter it just fills up both the name and dob with the 1st patient name starts with that letter. after that i cannot delete and change that too.
Here is my input box for patient name and dob, which should be filled automatically(form)
<form name="consult" method="post" action="consult_submit.php" enctype="multipart/form-data" onsubmit="return validate()">
<table class="selection">
<tr><td>Patient Name :</td><td><input type="text" name="p_name" id="p_name" onkeyup="return filldetail()" /></td></tr>
<tr><td>DOB :</td><td><input type="text" name="p_dob" id="p_dob" class="tcal" /></td></tr>
please suggest how to correct it

Instead of onkeyup you need to use onblur. If you use onkeyup event, the javascript function is called whenever you complete entering a charecter with keyboard. If you use onblur, the function will be called when you finish entering the text and change focus from the text field.
<form name="consult" method="post" action="consult_submit.php" enctype="multipart/form-data" onsubmit="return validate()">
<table class="selection">
<tr><td>Patient Name :</td><td><input type="text" name="p_name" id="p_name" onblur="return filldetail()" /></td></tr>
<tr><td>DOB :</td><td><input type="text" name="p_dob" id="p_dob" class="tcal" /></td></tr>

Related

HTML5 validation executes before custom validation

I have a form which asks user to give some input values. For some initial inputs i am doing custom validation using javascript. At the end of form one field is validated using "html required attribute". But when user clicks on submit button, input box which have required attribute shows message first instead of giving chance to previous ones i.e. not following order of error display. Below i added code and image , instead of showing that name is empty it directly jumps to location input box. This just confuses the end user. Why this problem occurs and how to resolve it?
<html>
<head>
<script>
function validate(){
var name = document.forms['something']['name'].value.replace(/ /g,"");
if(name.length<6){
document.getElementById('message').innerHTML="Enter correct name";
return false;
}
}
</script>
</head>
<body>
<form name="something" action="somewhere" method="post" onsubmit="return validate()">
<div id="message"></div>
Enter Name : <input type="text" name="name" /> <br/> <br/>
Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/>
<input type="submit" name="submit" />
</form>
</body>
</html>
This is probably just the HTML5 form validation triggered because of the required attribute in the location input.
So one option is to also set the required attribute on the name. And or disable the HTML5 validation with a novalidate attribute. See here for more information: https://stackoverflow.com/a/3094185/2008111
Update
So the simpler way is to add the required attribute also on the name. Just in case someone submits the form before he/she entered anything. Cause HTML5 validation will be triggered before anything else. The other way around this is to remove the required attribute everywhere. So something like this. Now the javascript validation will be triggered as soon as the name input looses focus say onblur.
var nameElement = document.forms['something']['name'];
nameElement.onblur = function(){
var messageElement = document.getElementById('message');
var string = nameElement.value.replace(/ /g,"");
if(string.length<6){
messageElement.innerHTML="Enter correct name";
} else {
messageElement.innerHTML="";
}
};
<form name="something" action="somewhere" method="post">
<div id="message"></div>
Enter Name : <input type="text" name="name" required="required" /> <br/> <br/>
Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/>
<input type="submit" name="submit" />
</form>
Now the above works fine I guess. But imagine you might need that function on multiple places which is kind of the same except of the element to observe and the error message. Of course there can be more like where to display the message etc. This is just to give you an idea how you could set up for more scenarios using the same function:
var nameElement = document.forms['something']['name'];
nameElement.onblur = function(){
validate(nameElement, "Enter correct name");
};
function validate(element, errorMessage) {
var messageElement = document.getElementById('message');
var string = element.value.replace(/ /g,"");
if(string.length < 6){
messageElement.innerHTML= errorMessage;
} else {
messageElement.innerHTML="";
}
}
<form name="something" action="somewhere" method="post">
<div id="message"></div>
Enter Name : <input type="text" name="name" required="required" /> <br/> <br/>
Enter Location : <input type="text" name="location" required="required" /> <br/> <br/><br/> <br/>
<input type="submit" name="submit" />
</form>

Onclick copy input text to another location

I am making a admin panel. When users input data into a text field i want to copy the data in the text field to another text field.
My problem is the code works until i added a insert into database function to the same button.
How do i get the button to perform both functions. is there a better way to do the onclick function. As i am using two text fields but i really want one to be the product title. Like in the image below:
Code is
<?php
$add_product_errors = array();
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// price validate - must be decimal(float)
if (empty($_POST['price']) || !filter_var($_POST['price'], FILTER_VALIDATE_FLOAT) || ($_POST['price'] <= 0)) {
$add_product_errors['price'] = "Please enter a product price";
}
// item name validate
if (empty($_POST['item_name'])) {
$add_product_errors['item_name'] = "Please enter a name";
}
// item name description
if (empty($_POST['desc'])) {
$add_product_errors['desc'] = "Please enter a product description";
}
//add to database
//if (empty($add_product_errors)) {
$q = 'INSERT INTO Product (Product_Name,Product_Desc,Product_Price) VALUES (?,?,?)';
$stmt = mysqli_prepare($dbc, $q);
//debugging
$stmt = mysqli_prepare($dbc, $q) or die(mysqli_error($dbc));
mysqli_stmt_bind_param($stmt, 'sss', $item_name, $desc, $price);
$item_name = strip_tags($_POST['item_name']);
$desc = strip_tags($_POST['desc']);
//100 - changes the way the decimal displays in database
$price = strip_tags($_POST['price'] * 100);
//execute the query
mysqli_stmt_execute($stmt);
printf("%d Item Added.\ ", mysqli_stmt_affected_rows($stmt) === 1); {
mysqli_stmt_close($stmt);
}
}
?>
HTML
<form name="product_form" enctype="multipart/form-data" action="admin_p.php" method="post" accept-charset="utf-8" >
<input type="textfield" id="title" name="title" value="">
<input type="textfield" id="item_name" name="item_name" placeholder="item name" value="" <?php $add_product_errors ?>/><br>
<textarea id="desc" name="desc" value="" placeholder="Item description" rows="3" maxlength="200" required ><?php $add_product_errors ?></textarea><br>
<input type="textfield" id="price" name="price" value="" placeholder="£" maxlength="30" required <?php $add_product_errors ?>/><br>
<input type="submit" name="add" value="add" value="add" class="btn" onclick="myFunction()">
<!-- copy item_name to page title -->
<script>
function myFunction() {
document.getElementById("title").value = document.getElementById("item_name").value;
}
</script>
Consider changing the submit input to a regular button so that you can control the control flow entirely. It might also make the control flow clearer for you to understand.
<form name="product_form" enctype="multipart/form-data" action="admin_p.php" method="post" accept-charset="utf-8" onsubmit="myFunction()">
... your HTML here ...
<input type="button" name="add" value="add" value="add" class="btn" onclick="myFunction()">
</form>
<script>
function myFunction() {
// Update your field value
document.getElementById("title").value = document.getElementById("item_name").value;
// Submit your form.
document.forms["product_form"].submit();
}
</script>
You can bind the copying of the text on the onsubmit event like this:
<form name="product_form" enctype="multipart/form-data" action="admin_p.php" method="post" accept-charset="utf-8" onsubmit="myFunction()">

Input fields get (readonly) after hit submit button

I have a script which is coded in PHP and smarty and I want to make some changes in this script like in user profile setting when a user click on profile setting and fill the profile data like (full name , email , bank account number , bank name , branch code , tile etc) after fill this information and click the save button the script save all setting but I want to make some of form input fields (readonly) after user submitted his/her data I want make this data (readonly) (bank name , account number , branch code , title) I mean about readonly that after user fill this and save it in profile its show to user (readonly) user can't change it only I can change it from database .
Below is the form code
<form id="settingsform" onsubmit="return submitform(this.id);">
<input type="hidden" name="a" value="submit" />
Bank Name:
</td>
<td><input type="text" name="bank" id="bank" value="{$user_info.bank}"></td>
</tr>
<tr>
<td align="right" width="50%">
Bank Account Number:
</td>
<td><input type="text" name="baccount" id="baccount" value="{$user_info.baccount}"></td>
</tr>
<tr>
<td align="right" width="50%">
Bank Account Title:
</td>
<td><input type="text" name="btitle" id="btitle" value="{$user_info.btitle}"></td>
</tr>
<tr>
<td align="right" width="50%">
Bank Branch Code:
</td>
<td><input type="text" name="bcode" id="bcode" value="{$user_info.bcode}"></td>
</tr>
<input type="submit" name="btn" value="{$lang.txt.send}" class="orange" />
also i am already trying like this below
<script>
function hide(){
document.getElementById("bank").disabled = true;
document.getElementById("baccount").disabled = true;
document.getElementById("btitle").disabled = true;
document.getElementById("bcode").disabled = true;
}
</script>
and
<input type="button" onClick="hide()" value="save">
<input type="text" name="country" value="Norway" readonly>
http://www.w3schools.com/tags/att_input_readonly.asp
Then simply do a check if the POST/GET is set for the field you want to have readonly on ->
<input type="text" name="country" value="Norway" <?php isset($_POST['country']) ? echo 'readonly' : ''; ?> >
UPDATE
<input type="text" name="country" value="Norway" <?php isset($user_info.bank) ? echo 'readonly' : ''; ?> >
Just replace the variable inside of the isset() with the variable of the field, depending on how you initialize the variables you might need to use
empty()
instead, to do so just simply replace isset() with !empty()
The reason for the ! sign is to tell the code to execute the first bit (the echo part) if the variable ISN'T empty
UPDATE 2
<input type="text" name="country" value="Norway" {if isset($user_info.bank) } readonly {/if} >
Above code should work with smarty how ever, the idea is simple, simply have a "if" sentence that checks whether the variable is set/have data, and if it does, then echo 'readonly' in the input field
Try to use attr() in submitform() like,
function submitform(id){
....
....
$('#bank,#baccount').attr('readonly','readonly');
return false;
}
Updated,
function hide(){
$("#bank,#baccount,#btitle,#bcode").prop('disabled', true);
}
Or try,
function hide(){
$("#bank,#baccount,#btitle,#bcode").attr('disabled', 'disabled');
}

Get the values of the form and replace variables in textarea

Hi i'm currently stuck with a task: I've to create a form on a page with fields and texarea.
i have to put info in fields and a text in textarea with variables : "hi my name is $name and i live at #adress...."
The values of these variables comes from fields of the form.
when i press on button it should change the $name by the value. So i'll get "hi my name is john".
And the idea would be to stay on same page.
This an example :
<html>
<form action="values.php" method="get">
Name: <input id="name" type="text" name="name"><br>
Adress<input id="name" type="text" name="adress"><br>
Phone<input id="name" type="text" name="phone" ><br>
Textarea<input id="textarea" type="text" name="textarea"> Hi my name is $name and you can call me on this number : $phone<br>
<input type="submit">
</form>
/Result after clicking a button/
Hi my name is John and you can call me on this number : 77665555544 // Result i want to obtain whithout leaving the page
My code in values.php is :
<?php
$description= $_GET["textarea"];
$description = str_replace( '$name',$_GET["name"],$description);
$description = str_replace( '$adress',$_GET["adress"],$description);
$description = str_replace( '$phone',$_GET["phone"],$description);
echo "<textarea>$description</textarea>";
?>
This is quite simple to be done, if I understood correctly. You can see a working version here: http://jsfiddle.net/ah9qp/
After the user has clicked on submit, you need to stop the form from actually submitting. This can be done by using the following: e.preventDefault();
After this, you need to grab all the values you want to output from the input boxes. You can do that by using the jquery .val(); This will get the value of the input. In order to get this though you have to have a specific ID associated with each input element. Below is your form modified to hear and interact with Jquery:
<form action="" method="get" id="formit">
Name: <input id="name" type="text" name="name" value="John"><br>
Adress<input id="address" type="text" name="adress"><br>
Phone<input id="phone" type="text" name="phone" value="77665555544"><br>
Textarea<textarea id="textarea" rows="5">Hello my name is $name and you can call me at this: $phone</textarea><br>
<input type="submit" id="textit">
</form>
Once you form is set up correctly, all you need to do is add in the jquery file:
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
and last you need to create the code using jquery that will achieve what you need:
$("#textit").click(function(e){
//prevents the form from submitting
e.preventDefault();
//get variables from input
var name = $("#name").val();
var phone = $("#phone").val();
//set var to textarea for output
var textarea = $("#textarea");
textarea.val("Hi my name is "+name+" and you can call me on this number: "+phone);
});
You will see the id's in the form are being called by jquery and outputted. Hope this helps! Let me know if you have any questions.
Use event.preventDefault(); to prevent submiting the form (refreshing the page), and fill the textarea with the values.
Example:
$('form').submit(function(event) {
/* rest of the script */
event.preventDefault();
});

Display Counter Number for Pre-Populated Input Field

I have a PHP page that pulls data from a database and auto-populates an input box. The code below is of a counter that displays how many characters are in a field upon typing.
However, when the PHP page is pulled up with the field populated, the counter says "0" until I type something in. How can I change the code so the counter displays how many characters are in the auto-populated field without me having to type something in? And then of course it should update when I do type something in.
<script language="JavaScript">
function textCounter(field, countfield, maxlimit) {
if (field.value.length > maxlimit) {
field.value = field.value.substring(0, maxlimit);
countfield.value = 'max characters';
// otherwise, update 'characters left' counter
}else {
countfield.value = field.value.length;
}
}
</script>
<center>
<form name=myform action="#">
<font size="1" face="arial, helvetica, sans-serif">
( You may enter up to 125 characters. )<br>
<input type="text" name="message" id="message"
onKeyDown="textCounter(this.form.message,this.form.remLen,125);"
onKeyUp="textCounter(this.form.message,this.form.remLen,125);"
>
<br>
<input readonly type=text name=remLen size=3 maxlength=3 value="0"> characters total</font>
</form>
</center>
Use window.document.onload to call your textCounter function
something like
<script>
window.document.onload=function(){
var form = document.getElementsByName('myform')[0];
textCounter(form.message,form.remLen,125);
};
....
Or just call your function on the onchange event like
<input type="text" name="message" id="message"
onchange="textCounter(this.form.message,this.form.remLen,125);" >

Categories