I am trying to save a large string as a value in an javascript variable, the problem is that can only save the first word of the string in the javascript variable, my source code is the following :
The JS function is called when a button is clicked by the user, then the value of the button("The value of the variable is the large string") is stored in the javascript variable, and then is been displayed in an html form. The source code of the html form is the following:
var input; //prepare var to save large string
$(function() {
// contact form animations
$('button[id="contactbutton"]').click(function() {
input = $(this).val(); //set var input to value of the pressed button
document.getElementById("someInput").value = input;
console.log('input : ' + input);
$('#contactForm').fadeToggle();
})
$(document).mouseup(function (e) {
var container = $("#contactForm");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.fadeOut();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contactForm" >
<p><h4><i>First Choose the clients and then the file which will be uploaded in order to proced</i></h4></2>
<hr>
<input type="text" id="someInput" name="someInput" readonly></input>
<hr>
</div>
The buttons are displayed in an html table, the table drags the data using mysql queries and display them in the website. Then an addition column is created consisting only of buttons, each button is given a different value, the source code of the table is the following:
$con = mysql_connect("localhost","root",'');
if(!$con){
die("Cannot Connect" . mysql_error());
}
mysql_select_db("client_app",$con);
$get_notifications= "SELECT * FROM `notifications history` ";
$notifications = mysql_query($get_notifications,$con);
echo "<table class=table table-condensed>
<thead>
<tr>
<th>Recipient</th>
<th>Title</th>
<th>Message</th>
<th>Time Sended</th>
</tr>
</thead>";
while($record = mysql_fetch_array($notifications)){
echo "<action=usersfiles.php method=post>";
echo "<tr>";
echo "<td>".$record['recipient']." </td>";
echo "<td>".$record['title']." </td>";
echo "<td>"."<button value=".$record['content']." id=contactbutton>Content</button>"." </td>";
echo "<td>".$record['received']." </td>";
echo "</tr>";
echo "</form>";
}
echo "</table>";
mysql_close();
Can anyone please help me?
Related
I have a table of customers. Each customer has a first and a last name. The two text fields of the table are editable. So users can update the information when they press Save. The problem is that I cannot get the specific row information,I only get the first row results
I tried to match to the names with the input field but I had no success.
<?php foreach($customer as $each){ ?>
<td class="first_name" id="first" contenteditable="true"><?php echo
$each['first_name']; ?></td>
<td class="last_name" id="last" contenteditable="true"><?php echo
$each['last_name']; ?></td>
<td > <button type="button" onclick="save('<?php echo $each['first_name'];?
>','<?php echo $each['last_name'];?>');" >Save</button></td>
<? } ?>
<script type="text/javascript">
function save(first,second) {
<?php foreach($customer as $each){?>
var first_name = "<?php echo $each['first_name']?>";
var last_name = "<?php echo $each['last_name']?>";
if (first_name==first && last_name == second){
var fname = document.querySelectorAll(".first_name");
console.log(fname[0]);
}
<?php } ?>
}
</script>
You would have to use a different query selector. Assign a classname or an attribute to the elements you want to select (e.g name for querying with .name) then querySelectorAll method will return an array of the elements that matched your query.
The main problem that I see is that you create unnecessary foreach loop inside a javascript function using php.
You can dynamically create your table and the contents inside it, that's fine. But the javascript does not care about that and you should not create javascript with php. So I would do it this way.
I wrap the td's in tr's cause i'm assuming you are putting that data in tr.
<?php foreach($customer as $each){ ?>
<tr class="customer-row">
<td class="first_name" contenteditable="true"><?php echo
$each['first_name']; ?></td>
<td class="last_name" contenteditable="true"><?php echo
$each['last_name']; ?></td>
<td><button type="button" class="save">Save</button></td>
</tr>
<? } ?>
Then outside the php foreach loop i would create my script.
<script type="text/javascript">
var saveBtn = document.querySelectorAll(".save");
for(var i = 0; i < saveBtn.length; i++) {
// attach click event to every button.
saveBtn[i].addEventListener("click", function() {
var _this = this;
var _tr = _this.closest(".customer-row");
var fname = _tr.querySelector(".first_name").innerText;
var lname = _tr.querySelector(".last_name").innerText;
console.log("Name: ", fname + " " + lname");
// below you can implement your check name logic...
}
}
</script>
I'm not 100% sure if my js will not throw errors, but it should give you an indication that you should separate your server-side from client-side logic.
The goal is to clear a field using a ON CLICK event which calls the java script function clear field(this.id)The clear field can then receive a new value. When the UPDATE button is pressed the database is updated with the new value. The clear field function succeeds in clearing the field, how can a new value be entered ?
<html>
<head>
<script src="JavaScript/getVal.js" type="text/javascript"></script>
</head>
<body>
Poll
<?php
$connection = mysqli_connect("localhost", "root", "");
mysqli_select_db($connection, "ukelection2015");
$rs = mysqli_query($connection, "select * from poll");
?>
<hr>
<table border=1 id="myTable">
<tr>
<th>Name</th>
<th>Value</th>
<th>Color</th>
<th></th>
<th> </th>
</tr>
<?php
$id = 0;
while ($row = mysqli_fetch_array($rs)) {
print("<form method= 'post' action= 'updatePoll.php'>");
for ($x = 0; $x <= 2; $x++) {
if ($x == 0) {
print("<tr>");
} else {
print("<td>" . $row['name'] . "</td>" . "<td id= '".$id."' value = '" . $row['value'] . "' onclick = 'clearField(this.id)'>" . $row['value'] . "</td>" . "<td>" . $row['color'] . "</td>" . "<td><a href = ''>Update</a></td>");
$x++;
if ($x == 1) {
print "</tr>";
}
$id++;
}
}
// this hidden field is used in updatePoll.php to get the party name to update (i.e. $name=$_POST['name'];)
/* print("<input type='hidden' name ='name' value={$row['name']}>"); */
print("<tr>");
// name
// value
// color
/* print("<td><input type='submit' value='Update' onclick='alertMsg()'/></td>"); */
print("</tr>");
print("</form>");
}
mysqli_close($connection);
?>
</table>
</body>
</html>
This is the javascript function
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
function clearField(anId) {
document.getElementById(anId).innerHTML = 0;
}
You can pass the new value as a parameter while calling the clearField function. Then rather than setting the innerHTML to 0 in the function definition, you can set the innerHTML to the new value as document.getElementById(anId).innerHTML = newValue
This may be helpful
<script type="text/javascript>
function clearField(anId) {
document.getElementById(anId).innerHTML = 0;
}
</script>
Given that you create a for four each row, you can add the ID of the element that you want to modify as an hidden input and make the field that you want to change an textbox number. When you click update, just submit the form and update In the database.
I am creating a form for inserting data which technologies are being used by which customers.
I get data of customer's ID and name and select a customer in an drop-down list, and i get data from technologies id and description and display description in a table + it creates a textbox (ID='box-". $row1['ID_T']."') for every technology entry in a DB.
So now i would like to check this dynamically created textboxes with jquery for value (if empty or filled with data) (getelementbyid) but i can not find a way to check theese DYN textboxes.
The ID_T and ID_C will be loaded into another table containing these two PK's and add string from textbox to value.
i would appreciate your help so much!
<HTML>
<HEAD>
<SCRIPT>
function update_tech(id,description)
{
var x = confirm('Do you want to edit technology '+description);
if (x == true)
{
document.getElementById('update_id').value = id;
//document.getElementById('description').value = description;
//document.form_update.submit();
}
}
</SCRIPT>
</HEAD>
<?php
include "connection.php";
$sql = "SELECT ID_C, Name FROM empresa";
$rs = mysql_query($sql, $conn);
$sql2 = "SELECT ID_T, description FROM technologies";
$rs2 = mysql_query($sql2, $conn);
while($row = mysql_fetch_array($rs2))
{
if (isset($_POST["box-".$row["ID_T"]]))
if ($_POST["box-".$row["ID_T"]] != "")
echo "INSERT ....".$_POST["box-".$row["ID_T"]]."<br>";
}
$rs2 = mysql_query($sql2, $conn);
mysql_close($conn);
?>
<BODY>
<SELECT NAME="customers" ONCHANGE="showCustomer(this.value)">
<?php
if (mysql_num_rows($rs))
{
while($row = mysql_fetch_array($rs))
{
?>
<option value='<?php echo $row['ID_C'] ?>'><?php echo $row['Name']?></option>
<?php
}
}
else {
echo "<option value=\"0\">No customers</option>";
}
?>
</SELECT>
<FORM METHOD="POST">
<?php
echo "<table border='0'>";
while($row1 = mysql_fetch_array($rs2))
{
echo "<tr>";
echo "<td><INPUT TYPE='text' name='box-". $row1['ID_T']."' ID='box-". $row1['ID_T']."'></td>";
echo "<td>" . $row1['description'] . "</td>";
echo "</tr>";
}
echo "</TABLE>";
?>
<INPUT TYPE="SUBMIT">
</FORM>
</BODY>
</HTML>
You can either maintain an array of input box ids or use the jquery partial selector to identify all the input boxes.
jQuery approach is something like:
$('input[id^="box-"]').each(function(e, i) { console.log(e); };
I am new to php so please bear my lack of knowledge.
I am developing a simple shopping cart. I have the screen divided in three framset. The left one is a imagemap where the user can click the desired item. The topRight is a php page that retrieve and displays in a table the details of the item clicked in theleftFrame. The last cell of this table has a textfield and a button to submit the order.
The goal of bottomRight frame is to display the shopping cart, showing the user how many products are already chosen.
My problem is that so far I can display only the current order submitted. In other words I display only the details of the last item "ordered" from the topRigt frame.
How can I keep on adding a second item, instead of replacing it?
Here is the code for topLeft
<html>
<head>
<title>Top Right</title>
<style type="text/css">
<!--
#import url("style.css");
-->
</style>
</head>
<body bgcolor = "#E0E6F8">
<h2>ITEMS</h2>
<?php
session_start();
// get the id from the left frame
$id = $_GET['var'];
// variable to connect to db
$user_name = "name";
$password = "password";
$server = "server";
$link = new mysqli($server,$user_name,$password,'poti');
if(!$link)
die("Could not connect to databse");
$result = $link->query("SELECT * FROM products WHERE product_id = '$id';");
while($row = $result->fetch_array())
{
$id = $row['product_id'];
$name = $row['product_name'];
$unit_price = $row['unit_price'];
$unit_quantity = $row['unit_quantity'];
$in_stock = $row['in_stock'];
$arrayName = array('id' => $id, 'name' => $name);
// store values in session
$_SESSION['cart'] = $arrayName;
// display details in a table (code needs to be refactored)
if(!empty($row)){
print "";
print "<form method='post' name='add' id='add' action='' target=''>";
print "<table id='hor-minimalist-a' border = '0' width = '100%'>";
print "<thead>
<tr>
<th scope='col'>ID</th>
<th scope='col'>Name</th>
<th scope='col'>Price</th>
<th scope='col'>QTY</th>
<th scope='col'>In Stock</th>
<th scope='col'>Order</th>
</tr>
</thead>";
print "<tr>\n";
print "<td>";
print($id);
print "</td>";
print "<td>";
print($name);
print "</td>";
print "<td>";
print($unit_price);
print "</td>";
print "<td>";
print($unit_quantity);
print "</td>";
print "<td>";
print($in_stock);
print "</td>";
print "<td>
<input type='text' name='qty_ordered' size='4'><input type='submit' name='submit' value='Submit' onclick='checkQty()'>
</td>";
print "</tr>";
}
print"</table>";
print "</form>";
}
?>
<script type="text/javascript">
function checkQty()
{
if(document.add.qty_ordered.value > 0 && document.add.qty_ordered.value <= 20)
{
document.add.action = "bottomRight.php";
document.add.target = "BottomRight";
document.add.submit();
}
else
{
//document.add.action = "topRight.php";
//document.add.target = "TopRight";
alert("Quantity must be between 1 and 20, please enter a value between 1 to 20");
//document.add.submit();
}
}
</script>
</body>
</html>
and for bottomRight:
<html>
<head>
<title>Bottom Right</title>
<style type="text/css">
<!--
#import url("style.css");
-->
</style>
</head>
<body>
<h2>Shopping Cart</h2>
<?php
session_start();
// doing this I keep on displaying only the last item "ordered"
if (isset($_POST['submit'])===true) {
if(isset($_SESSION['cart'])===true) {
$array = array($_SESSION['cart']);
print_r($array);
// not working
/*foreach($array as $a)
{
echo "<table><tr>";
echo "<td width='150px'><span style='color:white'>" . $a['id'] ."</span></td>";
echo "</tr></table>";}*/
}
}
?>
</body>
</html>
Check out the video tutorial given by Adam Khoury on youtube. He has used mysql_* (I know its deprecated) functions but you can use your own code and get your problem solved out. The video is just for your reference.
Here's the youtube playlist link: https://www.youtube.com/playlist?list=PL442E340A42191003
Here's the specific video link to solve your query: https://www.youtube.com/watch?v=WXqbQy9fOp8
Hope this helps you.
I want to do something like this..
I have a update form in PHP, which contains around 15 fields,
I want to show some data in tabular manner while you open the page for update..
Senario:
If you want to update a record of a person on day to day basis, I have the feature with me to search out that person form database, and when you click on update data..
it should show in a manner that,
field1.....----------
field2.....----------
field3.....----------
and now,
for field4,5,6,7
if these fields contain the data then show in a table manner with fields 4,5,6,7 as coloums and no of rows depending upon the number of entries (should be non editable)(assume the case of multiple input)
then form will continue.
field4.....--------
field5.....--------
field6.....--------
field7.....--------
typically these field(4,5,6,7) gets their value update frequently and I have to maintain the previous inputs also.
help me out with some solution, as I am unable to figure out how to do this?
before that i was using this.. here i was having a form field which can generate 5 options, and will populate the fields with data if u have entered before, now i want to change the display as I don't want user to play with the old data, so I want to show old data into a table and enter new data via a simple text field,
as their is no point to keep these multiple input form field as user is updating only one value at a time.
<script>
function Submitted_Date(value,object)
{
value = document.getElementById("subdate_num").value;
if (value > -1) {
var input= new Array(value);
var p;
//alert("Enter The fields You Know ");
var ele = document.getElementById("subdate");
if(ele.hasChildNodes())
{
var len = ele.childNodes.length;
while(ele.childNodes.length - value > 1)
{
ele.removeChild(ele.lastChild);
}
}
for (var i=len-1;i<value;i++)
{
p= i+1;
input[i] = document.createElement('div');
input[i].innerHTML = 'Submitted_Date' + p + ': <input type="text" value="" name="subdate' + p + '" id="subdate' + p +'" size = 25 onclick="javascript: showCalendar("Submitted_Date'+ p +'")"/>';
document.getElementById("subdate").appendChild(input[i]);
var subdate = 'subdate' + p;
}
}
document.getElementById("subdate1").focus();
}
</script>
<tr>
<td> Submitted Date :
<select name="subdate_num" id="subdate_num" onChange="return Submitted_Date(this.value,this.form)">
<?php
for ($i=0;$i<=5;$i++)
{
if ($i==0) { $temp = "<option value=$i> - </option>"; echo $temp; }
else { $temp = "<option value=$i>$i</option>";
echo $temp; }
}
?>
</select></td>
</tr>
</table>
<table>
I think this is what you want, this will show the information in a table with as many (or few) columns as you want
$query = "SELECT * FROM announcements ORDER BY announceid";
$result = mysql_query($query);
echo "<table border='1'>
<tr>
<th>Announcement ID</th>
<th>Announcement Name</th>
<th>Announcement Category</th>
<th>Approved?</th>
<th></th>
</tr>";
if ($result && mysql_num_rows($result) > 0) {
$x = 0;
while ($row = mysql_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['announceid'] . "</td>";
echo "<td>" . $row['title'] . "</td>";
echo "<td>" . $row['category_name'] . "</td>";
echo "<td>" . $row['status'] . "</td>";
echo '<td>Edit</td>';
echo "</tr>";
$x ++;
};
echo "</table>";
Let me know if that is what you are looking for, or if there is any other way I can help. Thanks!