Okay so I've searched multiple questions that are similar to mine, but aren't quite the same problem. All I'm trying to do is check each textbox in a table to see if it is a numerical value or not. This textbox has a quantity value, so it should only take numbers. Most of my code's in HTML and PHP.
The hidden input is a numerical value that creates the number of rows in the table that comes from the previous page.
I feel like I'm so close but yet so far away....
function validate() {
var submitOK = true;
var alertstring = "";
var x1 = document.getElementsByClassName('validate-it');
for(var i=0; i
" />
<?
$userinput = $_POST['productnumber'];
$count = 0;
do {
echo '<tr>'; ?>
<td>
<select name="product<?=$count?>" rel="cost<?=$count?>">
<option value="0"></option> <?
$sql1 = "select product_id, product_name from product";
$rs=mysqli_query($db,$sql1);
while($row=mysqli_fetch_array($rs)){ ?>
<option selected="selected" value="<?=$row[0] ?>"><?= $row[1] ?></option>
<?}?></select>
<? echo '<td> <input type="text" class="validate-it" name="quantity' .$count. '" value="" /> </td>';
echo '<td> <input type="text" id="cost'.$count.'" name="unitprice' .$count. '" value="" /> </td>';
echo '<td id="totalprice".$count> </td>';
echo '</tr>';
$count = $count + 1;
}
while($count < $userinput);
?>
I might be wrong, but I believe you should "register" new dynamic HTML elements you add on your page in order for jQuery to be aware of them.
Here are few useful links, in case everything else is working for you - then you just need to bind your new elements to these events and you'll be good to go:
Event binding on dynamically created elements?
Jquery how to bind click event on dynamically created elements?
Hope it helps! :)
Related
I have a table with dynamically generated rows, the first row is not dynamic and I want to show and print the values according to the choice made by the user from the dynamic dropdown list, I have jQuery and PHP code that only works in the first non-dynamic row and does not work in the rest of the new dynamic rows and I want to make the feature work In each new dynamic row that is generated, only the value associated with the user's selection appears (for example: the invoice system drop-down list contains the name of the product, and the price of the product appears in another text box when selecting any product from the drop-down list)
The problem is shown in the picture
php code:
`
<select class="form-control select_acount" name="account[]"required>
<option value="">--الحساب--</option>
<?php
$query = "select * from sah7atmain_acouts WHERE company like '".$multi."'";
$result = mysqli_query($con,$query);
$data = array();
if($result)
{
while($row = mysqli_fetch_assoc($result)){
$data[] = $row;
?>
<?php echo '<option value="'.$row['acount_mounte'].'">'.$row['acount_name'].'</option>'?>;
<?php
}
} else{
}
?>
</select>
jquery code:
$('.select_acount').on('change', function() {
$(this).closest('tr').find('.mount').val($(this).val());
});
Dynamic code generation using JaQuery"
var data = <?php echo json_encode($data); ?>;
var product_dd = "";
product_dd += '<select class="form-control select_acount" name="account[]"required>';
product_dd += '<option value="">--الحساب--</option>';
if(data.length > 0){
for(let i = 0; i < data.length; i ++) {
product_dd += `<option value="${data[i]['acount_mounte']}">${data[i]['acount_name']}</option>`;
}
}
product_dd += "</select>";
var i = 0;
$("#add-btn").click(function() {
++i;
$("#dynamicAddRemove").append('<tr><td class="td">'+product_dd+'</td> <td class="td"><input type="number" name="debtor[' + i + ']" id="fname"class="form-control debtor arabicNumbers" onkeydown="return event.keyCode !== 69" required></td> <td class="td"><input type="number" name="creditor[' + i + ']" id="james" class="form-control creditor arabicNumbers" onkeydown="return event.keyCode !== 69" required></td> <td class="td"><input type="text" name="description[' + i + ']" class="form-control" required></td> <td> <input type="text" name="mount[' + i + ']" class="form-control mount" required></td><td class="td2"><button type="button" name="add" class="btn btn-danger remove-tr"><i class="fas fa-trash" ></i></button></td></tr>');
});
$(document).on('click', '.remove-tr', function() {
$(this).parents('tr').remove();
});
`
Since you are using jQuery, I would recommend using a delegated event handler approach and add your event to the table/container element of your dynamic rows, so your event listener declaration would look like this:
$('#dynamicAddRemove').on('change', '.select_acount', function() {
$(this).closest('tr').find('.mount').val($(this).val());
});
This way your event will fire for every newly added row. More information on event delegation: jQuery-event-delegation
I'm with an e-learning project and working on the section of massive matriculation. I use a search box to look for students´ name, and add those values to a list. The problem appears when I try to look for other students' name and add those values to the existing list. This part reloads and all the previous values disappear. How can I display the result of new values and add them to the chosen list without removing the old one.
Code to display list (detail.php)
<p>
<label> <?php echo $string['LBL_PROGRAM_NAME']; ?>: </label>
<input type="text" id="program_name" name="program_name" class="tam1" maxlength="200" value="<?php echo $program_name; ?>" />
</p>
<br class="clear"/>
<center>
<input type="button" class="btn" name="buscar_programs" value="<?php echo $string['LBL_SEARCH_PROGRAMS']; ?>" onclick="javascript:loadPrograms();"/>
</center>
<p>
<label><b><?php echo $string['LBL_PROGRAMS_SELECT']; ?>: <span class="rojo">*</span></b></label>
<span id="area_programs">
<select id="programs" class="multiselect" multiple="multiple" name="programs[]">
</select>
</span>
</p>
Function loadPrograms() (detail.php):
function loadPrograms(){
$.ajax({
url: ruta_fichero_ajax+"loadProgramsItinerario.php?a1="+$('#program_name').val()+"&a2="+$('#center_id').val(),
dataType: 'json',
async: false,
success: function(datos){
var strHTML = '<select id="programs" name="programs[]" class="multiselect" multiple="multiple">';
if (datos.length>0){
$.each(datos, function(index, dato) {
strHTML += '<option value="' + dato.id + '">' + dato.name + '</option>';
});
}
strHTML += '</select>';
document.getElementById("area_programs").innerHTML = strHTML;
$("#programs").multiselect();
}
});
}
I'm a junior and still have many things to learn with Javascript. Thanks for your help.
To append new values to the options list, you can use below code(with jQuery cause you seem to be using jQuery)
$("#programs").append(new Option('TEXT', 'VALUE'));
Or using vanilla JS
selectElement = document.getElementById('programs');
selectElement.options[selectElement.options.length] = new Option('TEXT', 'VALUE');
Alternatively you can check this or w3schools for detailed explanation.
I am working on a very simple php page. The user picks how many numbers they would like to be added up, then enters the numbers on the new page, clicks a button, and then the sum is displayed.
I cannot figure out how to add up the numbers though since I can't just assign variables to each number because of the loop. I've tried this not using loops, assigning variables to each one, and simply making the button add those variables, but that required making the code for the inputs many many times, and I want this to work with a loop in case I wanted to integrate the choice to pick hundreds of numbers or something. If php isn't the best thing for this, please let me know what would be better, but anyways... how do I add up the numbers that the user inputs?
Index page:
<p>How many number would you like to add?</p>
2<br>
3<br>
4<br>
5<br>
Calculator page:
<?php
$inputs = $_GET['inputs'];
?>
<div>Enter the numbers<br>
<?php
for ($x=0; $x < $inputs; $x++) {
echo '<input type="number"><br>';
}
?>
</div>
<form action='' method='post'><input type='submit' value='Find value' name='findvalue'></form>
<?php
if (isset($_POST['findvalue'])) {
}
?>
for ($x=0; $x < $inputs; $x++) {
echo '<input type="number"><br>';
}
You cant use input without any name. You can use dynamic name, for example:
for ($x=0; $x < $inputs; $x++) {
echo '<input type="number" name="number_'.$x.'"><br>';
}
Or better way to use array names:
for ($x=0; $x < $inputs; $x++) {
echo '<input type="number" name="number[]"><br>';
}
After that, var_dump your $_POST variable.
But, best way to create dynamic fields is creating one and clone it with javascript, when user want to add next value. Example with jQuery:
<div class="myInputs"><input type="number" name="numbers[]"></div>
Add input
<script>
$('#Add').click(function(){
$('.myInputs input:first').clone().appendTo(".myInputs");
return false;
});
Try this:
<?php
$inputs = $_GET['inputs'];
?>
<form action='' method='post'>
<div>Enter the numbers<br>
<?php
for ($x=0; $x < $inputs; $x++) {
echo '<input name="numbers[]" type="number"><br>';
}
?>
</div>
<input type='submit' value='Find value' name='findvalue'>
</form>
<?php
if (isset($_POST['findvalue'])) {
print_r($_POST["numbers"]);
}
?>
There is currently no JavaScript on your page. To interact with the client, JavaScript would be the best choice since there is no need to go to the backend to create input fields unless you need to save the number before interacting with the user
window.onload = function() {
document.getElementById("nums").onchange = function() {
var fields = document.getElementById("fields"),
numberOfField = parseInt(this.value, 10),
inputs = [];
for (var i = 0; i < numberOfField; i++) {
inputs.push('<input type="text" class="calcField" name="number' + i + '" />');
}
fields.innerHTML = inputs.length > 0 ? inputs.join("<br/>") : "";
}
document.getElementById("calc").onsubmit = function() {
var total = 0,
fields = document.querySelectorAll(".calcField");
for (var i = 0; i < fields.length; i++) {
var val = parseInt(fields[i].value, 10);
total += isNaN(val) ? 0 : val;
}
document.getElementById("total").value=total;
return false; // stop submission - remove to submit the form
}
}
<p>How many numbers would you like to add?</p>
<form id="calc">
<select id="nums">
<option value="0">Please select</option>
<option value="2">Two numbers</option>
<option value="3">Three numbers</option>
<option value="4">Four numbers</option>
</select>
<div id="fields"></div><hr/>
<input type="submit" value="Find value" /> <input type="text" id="total" />
</form>
try adding a hidden field for the number of inputs then use it to loop
<?php
$inputs = $_GET['inputs'];
?>
<form action='' method='post'><input type='submit' value='Find value' name='findvalue'>
<div>Enter the numbers<br>
<input type="hidden" name="numberofinputs" value="<?php echo $inputs;?>"/>
<?php
for ($x=0; $x < $inputs; $x++) {
//Please note the $x
echo '<input type="number'.$x.'"><br>';
}
?>
</div>
</form>
<?php
if (isset($_POST['findvalue'])) {
$numberOfinputs = $_POST['numberofinputs'];
for($i=0; $i<numberOfinputs; $i++){
//You can access it here
echo $_POST['number'.$i];
}
}
?>
here is what i have so far :sql that gets data from the database, the data is passed through a loop and then displayed with the html code
$sql = "SELECT items_available.title,
items_available.item_number,
items_available.subtitle,
items_available.image_name,
users.username
FROM items_available
INNER JOIN users ON items_available.owner_id = users.user_id
WHERE items_available.status ='pending'
LIMIT $query_limit ;";
$query = mysql_query($sql);
while ($dbData = mysql_fetch_assoc($query)) {
$item_id = $dbData['item_number'];
$sel_title = $dbData ['title'];
$sel_Image = $dbData['image_name'];
$sel_subtitle = $dbData['subtitle'];
$sel_owner = $dbData['username'];
echo "<span style='display:inline-block;width:185px;margin:4px;'>
<a href='#'>
<img src='upload/$sel_Image' style='width:180px; height:160px;' />
<h5 style='display:inline;'>$sel_title </h5><br>
<h7 style='display:inline;'> $sel_subtitle</h7><br>
<h6 style='display:inline;'>Posted by $sel_owner</h6>
</a>|
<div style= \"display:inline-block;\">
<input type=\"checkbox\" id=\"check\" name='item_ids[]' value='1' />
</div>
</span>";
}/
the checkbox below the block of codes should grab the ids of each element so an update to the database is possible.Hope my description is clear enough to be aided
you did nt give any specfic so it is like a guide for what u asking
you need to create a form here with a hidden field
like
<div style= \"display:inline-block;\">
<form method=\"post\">
<input type=\"hidden\" name=\"value\" =". $item_id.">
<input type=\"checkbox\" name=\"update\" value = '1' />
</form>
</div>
php for that ll look like
if (isset($_REQUEST['value']))
{
//update after validation
}
P.S $_REQUEST Deals with both for GET or POST method
it actually depends what you want
You can make the VALUE of the checkbox into the id you want to get back in the $_POST['item_ids'] array.
<div style= \"display:inline-block;\"> ";
echo '<input type="checkbox" id="check" name="item_ids[]" value="' . $item_id . '" />';
echo "</div>
Now in your PHP code you can process them like this, remember checkboxes are only returned in the $_POST/$_GET array if they are actually checked.
I am assuming $_POST.
if ( isset($_POST['item_ids']) ) {
foreach ( $_POST['item_ids'] as $item_id ) {
// do whatever you want to with this information
}
}
Ok maybe I've overlooked something really simple here, but I can't seem to figure this out. I am trying to make my form dynamicly extendable.
My Problem is i can't get this code working:
<html>
<head>
<?php
$i = 1;
$p = 1;
$r = 1;
?>
<script language="javascript">
function add()
{
document.getElementById("groesse").innerHTML = document.getElementById("grosse").innerHTML+"<input type='text' name='groesse[<?php echo $i;?>]'>";
document.getElementById("preis_l").innerHTML = document.getElementById("preis_l").innerHTML+"<input type='text' name='preis_a[<?php echo $p;?>]'>";
document.getElementById("preis_a").innerHTML = document.getElementById("preis_a").innerHTML+"<input type='text' name='preis_l [<?php echo $r;?>]'><br>";
<?php
$i = $i + 1;
$p = $p + 1;
$r = $r + 1;
?>
}
</script>
</head>
<body>
<?php
if ($_REQUEST['Selected'] == 'Speisekarte')
{
echo '<br><br><br><br>';
echo '<input type="button" value="+" onClick="add()">';
echo '<form action="insert.php" method="submit">';
echo '<table border="1">';
echo '<tr><td>ID</td><td>Name</td><td>Beschreibung</td><td>Größe</td><td>Preis_L</td><td>Preis_A</td></tr>';
echo '<tr><td><input type="text" id="ID" name="ID"></td>';
echo '<td><input type="text" id="Name" name="Name"></td>';
echo '<td><input type="text" id="Beschreibung" name="Beschreibung"></td>';
echo '<td id="groesse"></td>';
echo '<td id="preis_l"></td>';
echo '<td id="preis_a"></td>';
echo '</tr></table><input type="hidden" value="Speisekarte">';
echo '<button type="submit">OK</button></form>';
}
?>
</body>
</html>
I want when someone klicks the +-Button my Form gets 3 Textfields more in the table with the specific ids. I also tried it with div-Tags but that didn't worked too.
I hope someone can help me.
You can't use php clientside, it is parsed on the server only when visitor requests the page by GET or POST, so using $i = $i + 1 will not work clientside. By the way, use $i++ instead.
You could solve this with only javascript or, as an alternative, submit the form and present the form again with the extra fields needed so you can do it with php.
I recommend you have a look at jQuery and check out this answer with demo:
How to use jQuery to add form elements dynamically
(credits to PSL)