I have a form, which I'm using autofill using jquery in the first textfield. This textfield is called "producto1".
What I want is that when user write the information in "producto1" automatically load the content in "marca1", the content in this field will be loaded from my database.
This is my code:
<table width="100%" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="545"><div align="center">
<input name="producto1" type="text" class="textfield4" id="producto1" value="" size="65" />
</div></td>
<td width="385"><div align="center">
<input name="marca1" type="text" class="textfield5" id="marca1" size="10" maxlength="5" onKeyPress="return handleEnter(event);">
</div></td>
<td width="385"><input name="cantidad1" type="text" class="textfield5" id="textfield2" size="10" maxlength="5" onKeyPress="return handleEnter(event);"></td>
</tr>
</table>
The information that will be displayed at the "marca1" field will be loaded from my database, but my problem is that I don't know how to populate automatically this second field using ajax.
// JS File
$(document).ready(function(){
$("#producto1").keyup(function(){
$.post('/path-to/marca.php',
{
text: $(this).val()
},
function(data) {
$('#marca1').val(data.returns);
},
'json');
});
});
// PHP File
$sql = $mysqli->query("SELECT marca_name
FROM marca
WHERE marca_name
LIKE '%" . $mysql->real_escape_string($_POST['text']) . "%'");
while($row = $sql->fetch_assoc($sql))
$returns[] = $row['marca_name'];
echo json_encode("returns" => implode(",", $returns));
Related
In my project it has an interface(designation.php) which has a form. When a user enters a 'designation code'(which is a primary key) and click the 'update' button, the
remaining fields should be filled accordingly. I understand that Ajax will be needed for this.
but the problem is, i'm done with retrieving the result only as a single row from the database by using following query. but, this is not my objective.
while($row = mysqli_fetch_assoc($run1)) {
echo "<tr id='tr'>";
foreach($row AS $cell) echo "<td>$cell</td>";
echo "</tr>\n";
}
Following is the 'designation.php'..
<form action="crud.php" method="post">
<table>
<th >DESIGNATION</th>
<tr>
<td >Designation Code</td>
<td ><input type="text" name="des_code" /></td>
</tr>
<tr>
<td >Designation</td>
<td><input type="text" name="desig" /></td>
</tr>
<tr>
<td >Salary Code</td>
<td><input type="text" name="s_code" /></td>
</tr>
<tr>
<td >Salary Scale</td>
<td><input type="text" name="s_scale" /></td>
</tr>
<tr>
<td >Salary point </td>
<td><input type="text" name="s_point" /></td>
</tr>
<tr>
<td>Date</td>
<td > <input type="date" name="date" /></td>
</tr>
<tr>
<td><input type="submit" name="update" value="Update" /></td>
</tr>
</table>
I attempted many solutions but have not gotten the intended result. Any help is appreciated.
$(document).ready(function(){
("#form1").submit(function({
var id=<?php echo $_POST['des_code']; ?>;
$.ajax({
url: 'update.php',
type:'POST',
data: {id:id},
success : function (data)
{
var a=data.split('[BRK]');
$("#s_scale").val(a[0]);
// like wise store all your fields..
}
})
})
upadte.php will contain
$id=$_POST['id']; //designation id from jqyery
$q=mysqli_query("your goes here..");
while($row = mysqli_fetch_array($q))
{
$cell=$row[0];
$cell.="[BRK]".$row[1];
$cell.="[BRK]".$row[2];
}
echo $cell;
give id to your text field so from jquery you can add value directly.. and give form id also so you can fire onsubmit event...
i didn't try this code but hope it will work fine...
To transfer more than one value use json!
Jquery Code::
$(function(){
id="XXXX";
$("form").on("submit",function(e){
e.preventDefault();
$.getJson("update.php",{"id":id},function(response){
$("#value1").val(response.value1);
$("#value2").val(response.value2);
// like wise store all your fields..
})
})
})
Update.php::
$q=mysqli_query("your query");
$row = mysqli_fetch_array($q);
echo json_encode($row);
$row will be an array containing value1, value2 and so on!!
I have a "little" big problem with my web application.
First, I must confess, that I am not so good in english :).
I have realize very simple html+css-Tabs based on ajax (powered by jquery) and each Tab request a separate PHP-site. Every site includes min. one form with php-values and other jquery-effects/-plugins.
The primary problem is the form-view in every tab. The ajax-loaded forms were shown not complete and other form were complete blank. I locate the problem and delete PHP-code in one of some fieldsets and finaly I show this one fieldset and the rest of the form were blank.
If I use only css-based tabs and without ajax functionality the forms loaded completely.
What is the problem with ajax? I dont understand it :P
Here is a part of one of the forms:
<form action="#" method="post" name="form_project" class="form_project mainform">
<input type="hidden" name="uid" value="<?= issetGlobals('uid') ?>" />
<table border="0" id="tbl-projects" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2"><input type="checkbox" name="cb_newProject" onclick="actFieldset('#fs-newProject')" /> <label for="cb_newProject">Projekt erstellen</label></td>
</tr><tr>
<td>
<fieldset id="fs-newProject" disabled="disabled"><legend>Projektverzeichnis erstellen</legend>
<table border="0">
<tr>
<td><label for="projectName">Projektname</label></td>
<td><input type="text" name="projectName" value="" /></td>
</tr><tr>
<td><label for="projectManager">Projektleiter</label></td>
<td><select size="1" name="projectManager" id="projectManager">
<?php
foreach($DBma->getEmployees() as $value) {
if($value['uid'] == issetGlobals('uid'))
echo '<option value="'.$value["uid"].'" selected="selected">'. convertString($value["name"]) .'</option>';
else
echo '<option value="'.$value["uid"].'">'. convertString($value["name"]) .'</option>';
}
?>
</select>
</td>
</tr>
And here the "converted" JS-Code:
$('#tabs-nav li').each(function(i) {
$(this).click(function(event){
event.stopPropagation();
Tab($(this).attr('id'));
});
});
function Tab(key){
$('#tabs-nav li').each(function() {
$(this).removeClass('active');
})
$(key).addClass('active');
$.ajax({
url: 'tab-content.php?tab=' + key,
type: 'get',
beforeSend: function() {
$(key + '-loading').html('<img src=\'images/ajax-loader.gif\' width=\'16\' height=\'16\' alt=\'Loading\' />');
}
}).done(function(responseText) {
$(key + '-loading').html("");
$('#tabs-content').html(responseText);
});
}
In this code javascript function is taking from[1] as argument in displayDatePicker('from[1]', false, 'dmy', '-'). When I clone this (second) row using jquery, all my input and select names get incremented but javascript function is still taking from[1] as argument. I want to ask how to change this from[1] to from[2] and so on
<tr>
<td width="19%" align="right" ><input type="text" id="roomcat" name="roomcat[1]" value="Deluxe" /></td>
<td width="1%" align="center" > </td>
<td width="15%" align="left" ><select class="f" name="roomtype[1]" id="roomtype">
<option value="">Please Select</option>
<option value="Single">Single</option>
<option value="Double">Double</option>
<option value="Triple">Triple</option>
<option value="Extra">Extra</option>
</select></td>
<td width="7%" align="left" ><input type="text" id="cfit" name="cfit[1]" /></td>
<td width="8%" align="left" ><input type="text" id="cgit" name="cgit[1]" /></td>
<td width="7%" align="center" ><input type="text" id="rfit" name="rfit[1]" /></td>
<td width="8%" align="center" ><input type="text" id="rgit" name="rgit[1]" /></td>
<td width="10%" align="center" >
<input class="f" style="width:70px" type="text" size="12" name="from[1]" id="from" value="<?php if($mode==1)
{
echo $from;
}
else
{
echo "From";
}?>" readonly="readonly" />
<i.m.g alt="Pick a date" src="js/date.g.i.f" border="0" width="17" height="16" />
</td>
<td width="10%" align="center" >
<input style="width:70px" class="f" type="text" size="12" name="to[1]" id="to" value="<?php if($mode==1)
{
echo $to;
}
else
{
echo "To";
}?>" readonly="readonly" />
<i.m.g alt="Pick a date" src="js/date.g.i.f" border="0" width="17" height="16" />
</td>
<td width="15%" align="left" > </td>
</tr>
Jquery Code is
$(document).ready(function() {
$("#addrow").click(function() {
var row = $('#table2 tbody>tr:last').clone(true);
row.find("input:text").each(function(){
this.name = this.name.replace(/\[(\d+)\]$/, function(str,p1){
return '[' + (parseInt(p1,10)+1) + ']';
});
})
row.find("select").each(function(){
this.name = this.name.replace(/\[(\d+)\]$/, function(str,p1){
return '[' + (parseInt(p1,10)+1) + ']';
});
})
row.insertAfter('#table2 tbody>tr:last');
return false;
});
});
Drop the id attributes in your <input>s, you don't need them and having duplicate ids just leaves you with invalid HTML and strange problems. If you're using them for styling, use classes instead. If you need them for something else, then you'll have to fix them when you copy so that you don't end up with duplicate ids.
Now we can clean up your cloning a little bit. When you're cloning your row, you don't need to parse the number in brackets, you can just ask the table how many rows it has and add one to get the new number:
var n = $('#table2 tbody>tr').length + 1;
then your replace calls simplify to this:
this.name.replace(/\[(\d+)\]$/, '[' + n + ']');
Also, you can use a multiple-selector to iterate through the <input>s and the <select>s at the same time:
row.find('input:text, select').each(...)
You're changing the same attribute in both cases so there's no need for two identical loops.
Using javascript:displayDatePicker(...) in your <a> isn't necessary. You can use jQuery to bind to clicks on those <a>s by adding a class to them:
<a class="datepicker">...</a>
and then binding a callback to them using click and a closest/find combination inside the callback will let you find the corresponding <input>:
$('a.datepicker').click(function() {
var $input = $(this).closest('td').find('input[type=text]');
displayDatePicker($input.attr('name'), false, 'dmy', '-'));
});
You're using clone so the event handlers on the cloned elements will be copied so you don't have to mess around with delegate or the dynamic versions of on.
Here's a demo with simplified HTML: http://jsfiddle.net/ambiguous/yEaw6/
From what I have understood from the first paragraph in your question..
Will this help?
var cells = $('td'); //Select row/cells here
$.each(cells, function(index, cell){
//index corresponds to index of current cell in set of matched cells
});
I have a table with a column on prices and the next column is a check box to mark whether that item was paid. I was wondering how I could populate the text box with the amount when the check box is clicked.
Code:
<table>
<tr>
<td>Procedure</td>
<td>Amount</td>
<td align="center"><input type="checkbox"></td>
<input type="text" size="20" value="" class="currency">
</tr>
</table>
HTML
<table>
<tr>
<td>Procedure</td>
<td>Amount</td>
<td align="center">
<input type="checkbox">
</td>
<td>
<input type="text" size="20" value="" class="currency">
</td>
</tr>
</table>
JavaScript/jQuery:
$(function() {
$('table input[type="checkbox"]').change(function() {
var input = $(this).closest('td').next('td').find('input');
if ($(this).is(':checked')) {
var amount = $(this).closest('td').prev('td').text();
input.val(amount);
} else {
input.val('');
}
});
});
See a working example at: http://jsfiddle.net/KTQgv/2/.
Some code you can expand on:
<input type="checkbox" rel="textbox1" name="banana"/>
<textarea id="textbox1" ></textarea>
JS/jQuery:
$('input:checkbox').click(function(){
var tb = "#"+$(this).attr('rel');
if($(this).is(":checked"))
$(tb).append(this.name + "\n");
});
Fiddle: http://jsfiddle.net/maniator/hxkX3/
Semantically, a checkbox isn't really the best control to choose to initiate an action. I would have an edit or pay (something actionable) button/icon which initiates the action of allowing the user to enter a value.
However for the purposes of your example, the click event of the checkbox is enough to be able to change the contents of your table cell from the displayed text (if any) to a textbox.
Given
<td id="row_1">Unpaid</td>
Using
$('#row_1').html('<input type="text" name="txtRow1" />');
is simplistic, but enough to enable the user to type in a value which could then be posted to the server during a save action.
Here's the concept. The users will input the data from the text bar.. And when click the submit button, the data will be saved to the "VIEW HISTORY" menu bar. View history is where the data's inputted from the home.php are being made.
E.g:
Home.php
(data1)
Enter Name: (I type..)Black Cat
Age: (I type..)21
Job: (I type..)Spy
(data2)
Enter Name: (I type..)Black Dog
Age: (I type..)24
Job: (I type..)Cook
Submit Button (I click it) and it says the data is submitted to my database.
Then when I click the "View History Menu Bar".. The ff will be shown:
DATA1
DATA2
<Click next to view next page.. etc>
When I click data1, the whole name, age and job from data1 will appear. And so is from data2.. and so on.. :)
That's my only problem.. I can't show those data :( Please help! I have some codes in here.. But I dunno how to fix it :( I hope you can give some samples so I can imitate the moves, or better if we help on fixing this. :( THANKS Y'ALL!
<?php
$cfccon = include("E:/xampp/conn1/cfmscsd.php");
//This is about the localhost, username, password stuff
$query="SELECT * FROM contents";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close();
$i=0;
while ($i < $num) {
$B1=mysql_result($result,$i,"B1");
$B2=mysql_result($result,$i,"B2");
$B3=mysql_result($result,$i,"B3");
$B4=mysql_result($result,$i,"B4");
$B5=mysql_result($result,$i,"B5");
$B6=mysql_result($result,$i,"B6");
$B7=mysql_result($result,$i,"B7");
$B8=mysql_result($result,$i,"B8");
$B9=mysql_result($result,$i,"B9");
$B10=mysql_result($result,$i,"B10");
$i++;
}
?>
<html>
<tr>
<td bgcolor="#bfb9a7"><span class="style77">CCC</span></td>
<td bgcolor="#CCCCCC"><div align="center" class="style66"><input name="B1" type="text" size="18" id="B1" value="<?php echo $B1;?>" disabled="disabled"/></div></td>
<td bgcolor="#CCCCCC"><div align="center" class="style66"><input name="B2" type="text" size="18" id="B2" value="<?php echo $B2;?>" disabled="disabled"/></div></td>
<td bgcolor="#CCCCCC"><div align="center" class="style66"><input name="B3" type="text" size="18" id="B3" value="<?php echo $B3;?>" disabled="disabled"/></div></td>
<td bgcolor="#CCCCCC"><center><div class="style66"><input type="button" onclick="tbsp1()" value="<?php echo $tbsp1;?>add" disabled="disabled"/></center></td>
<td bgcolor="#FEEDD8"><div align="center" class="style66"><input name="B4" type="text" size="18" id="B4" value="<?php echo $B4;?>" disabled="disabled"/></div></td>
</tr>
<tr>
<td><span class="style77">SCC</span></td>
<td><div align="center" class="style66"><input name="B5" type="text" size="18" id="B5" value="<?php echo $B5;?>" disabled="disabled"/></div></td>
<td><div align="center" class="style66"><input name="B6" type="text" size="18" id="B6" value="<?php echo $B6;?>" disabled="disabled"/></div></td>
<td><div align="center" class="style66"><input name="B7" type="text" size="18" id="B7" value="<?php echo $B7;?>" disabled="disabled"/></div></td>
<td><center><input type="button" onclick="tbsp2()" value="<?php echo $tbsp2;?>add" disabled="disabled"/></center></td>
<td bgcolor="#FEEDD8"><div align="center"><input name="B8" type="text" size="18" id="B8" value="<?php echo $B8;?>" disabled="disabled"/></div></td>
</tr>
<tr>
<td bgcolor="#bfb9a7"><span class="style77">NCC</span></td>
<td bgcolor="#CCCCCC"><div align="center" class="style66"><input name="B9" type="text" size="18" id="B9" value="<?php echo $B9;?>" disabled="disabled"/></div></td>
<td bgcolor="#CCCCCC"><div align="center" class="style66"><input name="B10" type="text" size="18" id="B10" value="<?php echo $B10;?>" disabled="disabled"/></div></td>
</tr>
</html>
First of all, I recommend that you rename your table columns, B1, B2, B3 etc are very very bad names, instead use something descriptive like name, age, email, etc. That will make your code a lot easier to read and debug.
To achieve what you're asking for, do something like this:
1) When the user clicks the submit button, do a form post to a script on your site, e.g
<form method=post action=home.php>
Enter data: <input type=text name=data>
<input type=submit value=Submit />
</form>
2) When the user clicks the submit button, you could get the data he posted in $_POST, e.g $_POST['data']. Save this to a mysql database. You should give the user a unique user ID. Each row in your table should have these fields:
dataId (int,primary, auto_increment)
userID (int)
name (varchar 255)
age (int)
etc...
Then you should have a different table for users, called a user table. Each user who visits the website should have a unique userId. You can store this userId in $_SESSION, I recommend you read about session handling.
Then whenever the user submits his form, you add a new row to your data table with his info, and the userId field with the given user's id.
3) When the user clicks 'next' to see the data, you would do something like this:
$userId = $_SESSION['userId'];
$sql = "SELECT * FROM data WHERE userId='$userId'";
$result = mysql_query($sql) or die(mysql_error());
$history = array();
while ($row = mysql_fetch_assoc($result))
{
$history[] = $row;
}
4) Then simply loop through the $rows using foreach and display the history.