I have one textbox called main_textbox when user enter any number i call javascript
function on the onblur event of textbox and by this code
function generate_bale(){
var bale=document.getElementById("number_of_bale").value;
var boxes = "<p>";
for (var i=0;i<`bale`;i++){
boxes+="<input type='text' name='bale_numbers[]'><br><br>";
}
document.getElementById("bale_box").innerHTML = boxes;
}
I genereate number of textbox which enter in main_textbox
now suppose if i want to generate number like
1.textbox
2.textbox
3.textbox
so how to print this number in front textbox so i can identify from all generated textbox which number of textbox is
THANX in advance
for (var i=0;i<bale;i++){
boxes+= i + ". <input type='text' name='bale_numbers[]'><br><br>";
}
document.getElementById("bale_box").innerHTML = boxes;
}
Did you ment to something like that?
function generate_bale(){
var bale=document.getElementById("number_of_bale").value;
var boxes = "<p>";
for (var i=0;i<bale;i++){
boxes+="<label for='bale_"+i+"'>"+i+"</label><input id='bale_"+i+"' type='text' name='bale_numbers[]'/><br/><br/>";
}
boxes+="</p>";
document.getElementById("bale_box").innerHTML = boxes;
}
You may change the code that used to generate textbox as following:
boxes+="<label>"+ i + "<label><input type='text' name='bale_numbers[]'><br><br>";
Assuming that the following is the answer you expected,
Try this
function generate_bale(bale){
var bale=document.getElementById("number_of_bale").value;
var boxes = "<p>";
for (var i=0;i<bale;i++){
textboxNo = i+1;
boxes+=textboxNo+".textbox<input type='text' name='balue_"+textboxNo+"'><br><br>";
}
document.getElementById("bale_box").innerHTML = boxes;
}
Check the fiddle here
function generate_bale(){
var bale=document.getElementById("number_of_bale").value;
var boxes = "<p>";
for (var i=0;i<`bale`;i++){
boxes+=+i+1+".textbox <input type='text' name='bale_numbers[]'><br><br>";
}
document.getElementById("bale_box").innerHTML = boxes;
}
Related
I have a form that asks a user to give a device type a name and say how many attributes they would like to assign to that device type. That form calls the below php files which uses a loop to create the desired number of attributes.
I have used the name="attribute".$i in order to be able to identify each attribute on the next php page to send the information to a database.
<?php echo $_POST['device-name']; ?>
<?php
$num=$_POST['number-of-attributes'];
$num=intval($num);
for($i=0; $i<$num; $i++) {
newAttribute($i);
}
function newAttribute($i) {
echo ("<div id=\"new-attribute\">");
echo ("<h3>New Attribute</h3>");
echo ("<label for=\"attribute".$i."\">Name</label>");
echo ("<input id=\"attribute\" type=\"text\" name=\"attribute".$i."\">");
echo ("</div>");
}
?>
However I also want the user to be able to click for example:
<div id="small-button">New Attribute</div>
and create another set of fields to define an attribute.
How would I do this?
Thanks in advance
Using javascript/jquery on the client-side:
var template = "<div class=\"new-attribute\">"
+ "<h3>New Attribute</h3>"
+ "<label for=\"attribute\">Name</label>"
+ "<input id=\"attribute\" type=\"text\" name=\"attribute\">"
+ "</div>";
$(document).ready(function() {
// The DOM has loaded
$("#small-button").on('click', function() {
// The user clicked your 'New Attribute' button
// Append a new attribute to the <body> with `template` we defined above:
$(body).append(template);
});
});
Note: I changed id="new-attribute" to class="new-attribute" since there will be more than 1.
You would need JavaScript for said job. In your HTML document, at the end of the body element add the following script element:
<script type="text/javascript">
var numberOfAttributes = 1;
function newAttributeFields(e) {
// Creates the div
var div = document.createElement('div');
div.id = 'new-attribute';
// Appends the fields
div.innerHtml = '<h3>New attribute</h3><label for="attribute' + numberOfAttributes + '">Name</label><input id="attribute" type="text" name="attribute' + numberOfAttributes + '">';
// Appends it to the body element
document.getElementsByTagName('body')[0].appendChild(div);
// Increments the number of attributes by one
numberOfAttributes = numberOfAttributes + 1;
}
var smallButton = document.getElementById('small-button');
// When the 'small button' is clicked, calls the newAttributeFields function
smallButton.addEventListener('click', newAttributeFields, false);
</script>
I am creating a form which fetches the value from the database and stores the value dynamically into a table. I have a button named add which adds a row dynamically when a user press it and I have a hidden counter which counts the rows added.
The problem is, when I fetch the record, the counter shows the number of rows present and when I add a new row it goes back to 1.
If there are two rows in the table, the counter will show 2 but when I try to add a new row the counter shows 1.
Is there any way to set the value from the counter text into the JavaScript variable and increment it?
Here is my JavaScript code:
<script language="javascript" type="text/javascript">
var jj= 1;
alert(jj);
function addRow()
{
//alert(jj)
var tbl = document.getElementById('zimtable');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'zimname_' + jj;
el.id = 'zimname_' + jj;
el.size = 40;
el.maxlength = 40;
firstCell.appendChild(el);
var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'zimmob_' + jj;
el2.id = 'zimmob_' + jj;
el2.size = 13;
el2.maxlength = 13;
secondCell.appendChild(el2);
// alert(i);
//$('#hh').val(jj);
jj++;
makhtab.hh.value=jj;
alert(jj);
}
</script>
Here is my php code to show the table:
<?php
$zim = mysql_query("SELECT * FROM `makhzim` WHERE makhcode='$newsid' ORDER BY srno")or die(mysl_error());
$ctrzim = 0;
while ($zrow = mysql_fetch_array($zim)){
$ctrzim++;
print '<script type="text/javascript">';
print "alert('$i')";
print '</script>';
echo "<tr>";
echo "<td><input name='zimname_$ctrzim' type='text' size='40' maxlength='20' value=$zrow[name] /></td>";
echo "<td><input name='zimmob_$ctrzim' type='text' size='13' maxlength='20' value=$zrow[mobile] /></td>";
echo "</tr>";
}
echo "</table>";
echo "<input type=\"button\" value=\"Add\" onclick=\"addRow();\" /><input id=\"hh\" name=\"hh\" type=\"text\" value= '$ctrzim'/>";
?>
In your php code put the value of the counter to a hidden element
<input type = "hidden" id = "hiddenElementId" value = "your php counter value"/>
In your javascript
<script>
var count;
window.onload=function(){
count = = document.getElementById("hiddenElementId").value;
};
function addRow() {
alert(count);
..
..
count++;
}
<script>
I'm having a problem... when a user clicks submit - the error message shows, but the jQuery doesn't seem to stop on Return False;
See code below:
function validateSubmit(){
// this will loop through each row in table
// Make sure to include jquery.js
$('tr').each( function() {
// Find first input
var input1 = $(this).find('input').eq(0);
var qty1 = input1.val();
// Find Second input
var input2 = $(this).find('input').eq(1);
var qty2 = input2.val();
// Find third input
var input3 = $(this).find('input').eq(2);
var qty3 = input3.val();
// Find select box
var selectBx = $(this).find('select');
var selectVal = selectBx.val();
if(qty1 === '' && selectVal != 'Please Select...') {
alert("You've chosen an option, but not entered a quantity to dispute, please check your inputs.");
return false;
}
if(qty1 != '' && selectVal === 'Please Select...') {
alert("You've entered a quantity, but not chosen why, please check your reasons.");
return false;
}
if (qty1 > qty2) {
alert("For one of your entries, the disputed quantity is larger than the shipped quantity.");
return false;
}
});
}
HTML where it's called
<table>
<thead>
<tr><th>Item ID</th><th>Description</th><th>Dispute Quantity</th><th>Shipped Quantity</th><th>Ordered Quantity</th><th>Reason</th></tr>
</thead>
<tbody>
<?php
$data = mysql_query("SELECT * FROM `artran09` WHERE `invno` = '$invoiceno'") or die(mysql_error());
echo "<center>";
$i = -1;
echo "<form action=\"submitdispute.php?invno=".$invoiceno."&ordate=".$placed."\" method=\"POST\" onsubmit=\"return validateSubmit();\">";
while ($info = mysql_fetch_array($data)) {
$i += 1;
echo "<tr>";
echo "<td>".$info['item']."</td>";
echo "<td>".$info['descrip']."</td>";
echo "<td><input type=\"text\" input name=".$i." onKeyPress=\"return numbersonly(this, event)\" maxLength=\"3\"></td>";
echo "<td><input type=\"text\" value=".$info['qtyshp']." name = \"ship$i\" onKeyPress=\"return numbersonly(this, event)\" maxLength=\"3\" disabled=\"disabled\"></td>";
echo "<td><input type=\"text\" value=".$info['qtyord']." onKeyPress=\"return numbersonly(this, event)\" maxLength=\"3\" disabled=\"disabled\"></td>";
echo "<td><select name = \"reason$i\">";
echo "<option>Please Select...</option>";
echo "<option>Short/Not received</option>";
echo "<option>Damaged Goods</option>";
echo "<option>Product Not Ordered</option>";
echo "</select></td>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
</div>
<p><input type = "submit" value = "Dispute" name ="Submit">
</form>
Any ideas?? Help massively appreciated
The return currently will leave the each(), not validateSubmit() (validateSubmit currently doesn't return anything)
Define a variable at the begin of validateSubmit(), e.g.
var r=true;//default returnValue
and put this at the end of validateSubmit():
return r;
Now, when you want to leave validateSubmit() , call inside the each:
r=false;return;
This will leave the each() and also validateSubmit() with the returnValue r(what will be false now)
Add a preventDefault call to your code. Change the line:
function validateSubmit(){
to the following
function validateSubmit(e){
e.preventDefault();
...
Ensure that your button uses 'return' also to return the returned value:
<input type="submit" onClick="return validateSumbit();" />
Also you should remove the onsubmit handler from the form tag.
Your validateSubmit() function doesn't seem to return a value. Only the callback function of the each() method returns a value, but your actual submit handler does not. In essence, your validation code runs as expected, displaying the error messages but not returning any value to indicate of failure.
You should define a variable within the scope of validateSubmit() which the each() method can modify and return that.
For example:
function validateSubmit() {
var form_is_valid = true;
$('tr').each( function() {
// Validation goes here
if (something_is_invalid) {
form_is_valid = false;
return;
}
});
return form_is_valid;
}
I have come about quite a problem while programming an order submitting page, the aim of the page is to submit a dispute for an order - providing two fields are filled in, but only if one field is less than another one.
Basically, one is a drop down and the other is a disputes box, the queries are as follows:
If DisputesTextBox = "" and a drop down box = "Please Select..."
Everything is fine - submit button enabled
If DisputesTextBox != "" and dropdown box = "Please select..."
Error ( and vice versa, so if disputes is populated but dropwn = please select...) - submit button disabled
If DisputesTextox != "" and dropdown box = "Other"
Everything is fine - submit button enabled
If DisputesTextBox > shippedbox
Error - submit button disabled
<table>
<thead>
<tr><th>Item ID</th><th>Description</th><th>Dispute Quantity</th><th>Shipped Quantity</th><th>Ordered Quantity</th><th>Reason</th></tr>
</thead>
<tbody>
<?php
$data = mysql_query("SELECT * FROM `artran09` WHERE `invno` = '$invoiceno'") or die(mysql_error());
echo "<center>";
$i = -1;
echo "<form action=\"submitdispute.php?invno=".$invoiceno."&ordate=".$placed."\" method=\"POST\" onsubmit=\"return confirm('Are you sure you are ready to dispute your order?');\">";
while ($info = mysql_fetch_array($data)) {
$i += 1;
echo "<tr>";
echo "<td>".$info['item']."</td>";
echo "<td>".$info['descrip']."</td>";
echo "<td><input type=\"text\" input name=".$i." onKeyPress=\"return numbersonly(this, event)\" maxLength=\"3\"></td>";
echo "<td><input type=\"text\" value=".$info['qtyshp']." onKeyPress=\"return numbersonly(this, event)\" maxLength=\"3\" disabled=\"disabled\"></td>";
echo "<td><input type=\"text\" value=".$info['qtyord']." onKeyPress=\"return numbersonly(this, event)\" maxLength=\"3\" disabled=\"disabled\"></td>";
echo "<td><select name = \"reason$i\">";
echo "<option>Please Select...</option>";
echo "<option>Short/Not received</option>";
echo "<option>Damaged Goods</option>";
echo "<option>Product Not Ordered</option>";
echo "</select></td>";
echo "</tr>";
}
?>
</tbody>
</table>
</div>
</div>
<p><input type = "submit" value = "Dispute" name ="Submit">
</form>
Thanks, hope anyone can help!
Edited for Wolf/anyone who can help - what's up with this code here:
-- code i edited --
function validateSubmit(){
// this will loop through each row in table
// Make sure to include jquery.js
$('tr').each( function() {
// Find first input
var input1 = $(this).find('input').eq(0);
var qty1 = input1.val();
// Find Second input
var input2 = $(this).find('input').eq(1);
var qty2 = input2.val();
// Find third input
var input3 = $(this).find('input').eq(2);
var qty3 = input3.val();
// Find select box
var selectBx = $(this).find('select');
var selectVal = selectBx.val();
// Add your validation code here for the inputs and select
// Return true if all validations are correct
// Else return false
if(qty1 = "" && selectVal = "Please Select...") {
return true;
alert("You have an error somewhere, please check over your quantites.");
break;
}
if (qty1 > qty2) {
return false;
alert("You have an error somewhere, please check over your quantites.");
break;
}
});
}
Change the following line
onsubmit=\"return confirm('Are you sure you are ready to dispute your order?');\"
to
onsubmit=\"return validateSubmit();\"
Then write the function
function validateSubmit(){
// this will loop through each row in table
// Make sure to include jquery.js
$('tr').each( function() {
// Find first input
var input1 = $(this).find('input').eq(0);
// Find Second input
var input2 = $(this).find('input').eq(1);
// Find third input
var input3 = $(this).find('input').eq(2);
// Find select box
var selectBx = $(this).find('select');
// Add your validation code here for the inputs and select
// Return true if all validations are correct
// Else return false
});
}
Note that your submit button will be enabled all the time. But submit will work only if your validations are success.
i have a javascript function like this:
function addfamily(divName){
var newdiv = document.createElement('div');
newdiv.innerHTML = '<input type="text" name="family[]" size="16">';
document.getElementById(divName).appendChild(newdiv);
}
which dynamically adds textbox to the form and a php script like this:
<?php
$result_family = mysql_query("SELECT * FROM family_member where login_id='$_SESSION[id]'");
$num_rows_family = mysql_num_rows($result_family);
if ($num_rows_family>0) {
while($row_family = mysql_fetch_assoc($result_family)){
echo "<script language=javascript>addfamily('family');</script>";
}
}
having this code the textboxes are added fine.
i just need to know how can i set a dynamic value as the textbox value by passing the php variable $row_family[name] to the function and the value of the textbox???
please help
Since you want to pass the name of the Div along with $row_family['name'] your javascript function should look like
function addfamily(divName,familyName){
var newdiv = document.createElement('div');
newdiv.innerHTML = "<input type='text' name='family[]' size='16' value=" + familyName + ">";
document.getElementById(divName).appendChild(newdiv);
}
and then the call from PHP should be like
echo "addfamily('family',$row_family['name']);";
HTH