I have a php code with javascript function. the script is having "Add more" button, if we click on this button it will add one more row having 2 text box named "Pront ID:" and "Pronto Title:". the script is working fine. but i need the script that it should allow me to enter exact 12 characters to "Pronto ID" field. if it's more than/less than 12 characters, it should echo message to add exact 12 characters.
in HTML code we can use "pattern="\w{12}" title="Enter 12 characters" " line to echo "Enter 12 characters" but i need this in inside javascript function"add".
Please help me on this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.del').live('click',function(){
$(this).parent().parent().remove();
});
$('.add').live('click',function(){
var i = 1;
var appendTxt = "<tr><td>Pront ID:</td><td><input type='text' name='input_box_one[]' pattern='\w{12}' title='Enter 12 characters'></td><td>Pronto Title:</td> <td><input type='text' name='input_box_two[]' /></td> <td><input type='button' class='del' value='Delete' /></td></tr>";
$("tr:last").before(appendTxt);
var inputs = document.getElementsByTagName('input').length;
//alert(inputs);
if(inputs == 18){
document.getElementById("countButton").disabled = true;
}
$i++
});
});
</script>
</head>
<body>
<form name="form1" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<table id="options-table">
<tr>
<td>Pront ID:</td><td><input type="text" name="input_box_one[]" pattern="\w{12}" title="Enter 12 characters" /></td>
<td>Pronto Title:</td><td><input type="text" name="input_box_two[]" /></td>
<td><input type="button" class='del' value='Delete' /></td>
<input type="hidden" name="count" value="<?php $i; ?>">
</tr>
<?php
echo "<tr><td><input id=\"countButton\" type=\"button\" class=\"add\" value=\"Add More\"/></td><td><input type=\"submit\" name=\"submit\" value=\"submit\"></td></tr>";
?>
</table>
</form>
</body>
</html>
<?php
foreach ($_POST['input_box_one'] as $v) {
echo $v;
echo "\n";
}
foreach ($_POST['input_box_two'] as $p) {
echo $p . "\n";
}
?>
Related
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function hide_input_items()
{
var inputs=document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++)
{
if(inputs[i].type=='text')
{
inputs[i].disabled=1;
}
}
var updates = document.getElementById('update');
var cancels = document.getElementById('cancel');
for(var j=1;j<up;j++)
{
updates[j].style.visibility = "hidden";
cancels[j].style.visibility = "hidden";
}
}
</script>
</head>
<body>
<?php
$counter=0;
for($i=1;$i<10;$i++)
{
$counter++;
$name= "name".$counter;
$update="update".$counter;
$cancel="cancel".$counter;
$edit= "edit".$counter;
?>
<input type="text" name="name" id="name" id="<?php echo $name;?>" value="hi" />
<input type="button" name="edit" id="name" id="<?php echo $edit;?>" value="Edit" onclick="focuse('<?php //echo $id.",".$update.",".$cancel.",".$edit;?>')"/>
<input type="button" name="update" id="name" id="<?php echo $update;?>" value="Update" onclick="display('<?php //echo $cancel;?>');"/>
<input type="button" name="cancel" id="name" id="<?php echo $cancel;?>" value="Cancel" onclick="show()"/>
<br />
<?php
}?>
<input type="button" name="button" onclick="hide_all();" value="Hide all" />
</body>
</html>
I want to hide update and cancel button on page load but it does not working when i add second loop in page load function then then upper loop is also disable.Here above is my complete code please do give some suggestion if do you have. Thanks.
I have a page containing JavaScript named button.php. I use a button that behaves like a file upload button. When a user uploads a file, it redirects onto my next page form.php where I use another form. Here I want to pass that uploaded file using the file upload button on button.php After that, I use PHP code to store this data into my db. But this operation fails. Can you guys please help me find out my error? Or perhaps suggest some code which can perform the desired task?
Here is my code
button.php
<html>
<head>
<script>
function setup() {
document.getElementById('buttonid').addEventListener('click', openDialog);
function openDialog() {
document.getElementById('fileid').click();
}
document.getElementById('fileid').addEventListener('change', submitForm);
function submitForm() {
document.getElementById('formid').submit();
}
}
</script>
</head>
<body onLoad="setup()">
<form id='formid' action="form.php" method="POST" enctype="multipart/form-data">
<input id='fileid' type='file' name='filename' hidden/>
<input id='buttonid' type='button' value='Upload MB' />
<input type='submit' value='Submit' hidden="" />
</form>
</body>
</html>
form.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Upload Morning Briefing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="js/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#mydate").datepicker({
dateFormat: "dd-M-y",
onSelect: function(dateText, inst) {
$("#dt_title input[type='text']").val($("#dt_title input[type='text']").attr('data-title')+dateText);
}
}).datepicker("setDate", new Date());
});
</script>
</head>
<body>
<form action="action.php" method="POST" enctype="multipart/form-data">
<div style="margin:auto; width:auto" align="center">
<table width="547" class="tblbdr" >
<tr>
<td height="23" colspan="6" class="head"><p> Morning Briefing </p></td>
</tr>
<tr> <td height="10"></td></tr>
<tr><td class="celltext"><b>Date:</b> </td> <td><input name="mydate" type="text" id="mydate" style="width:300px" readonly> </td></tr>
<tr>
<td>
<input type="text" name="myfile" id="myfile" value="<?php
$filename = ""; // set var to avoid errors
if(isset($_POST['filename'])){
$filename = $_POST['filename'];
}
?>"/>
</td></tr>
<td><input type="submit" value="Save"/> </td> <td> </td>
<td width="151">
</td>
<tr>
<td height="12">
</td>
<td width="290">
</td> </tr>
</table>
</div>
</form>
</body>
</html>
action.php
<?php
$Date = isset($_REQUEST['mydate']) ? $_REQUEST['mydate'] : "";
$Date=date('Y-m-d h:i:s',strtotime($Date));
$title=$_POST['title'];
//$uploaddir = '../upload/';
$uploaddir = "../../../pages/upload/";
$uploadfile = $uploaddir . basename($_FILES['myfile']['name']);
if ($_FILES["myfile"]["name"]!="")
{
//$Filepath= "upload/" . str_replace('-','_',$_FILES["myfile"]["name"]);
$Filepath= "upload/" .($_FILES["myfile"]["name"]);
if (move_uploaded_file($_FILES['myfile']['tmp_name'], $uploadfile)) {
echo "File is valid, and was successfully uploaded.\n";
}
else {
echo "Upload failed";
}
}
echo $Filepath;
////creating connection//////
$db="pacra-daily";
$con = mysql_connect('localhost', 'root' , '');
if (! $con)
die(mysql_error());
mysql_select_db($db , $con) or die("Select Error: ".mysql_error());
$result=mysql_query("INSERT INTO mainentry(Entrydate, Filepath) VALUES ('$Date', '$Filepath')") or die("Insert Error: ".mysql_error());
Please find the below code to add new rows as well as delete row button. using that script we can enable only 5 rows after that "Add More" button automatically disable. Now the problem is, if I click on submit button php page should print all rows values. but I am not able to print all rows values as all rows name are same (input_box_one[] and input_box_two[] ). hence I am not able to get all rows.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.del').live('click',function(){
$(this).parent().parent().remove();
});
$('.add').live('click',function(){
var i = 1;
var appendTxt = "<tr><td>Pront ID:</td><td><input type='text' name='input_box_one[]' /></td><td>Pronto Title:</td> <td><input type='text' name='input_box_two[]' /></td> <td><input type='button' class='del' value='Delete' /></td></tr>";
$("tr:last").before(appendTxt);
var inputs = document.getElementsByTagName('input').length;
if(inputs == 17){
document.getElementById("countButton").disabled = true;
}
$i++
});
});
</script>
</head>
<body>
<form name="form1" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<table id="options-table">
<tr>
<td>Pront ID:</td><td><input type="text" name="input_box_one[]" /></td>
<td>Pronto Title:</td><td><input type="text" name="input_box_two[]" /></td>
<td><input type="button" class='del' value='Delete' /></td>
<input type="hidden" name="count" value="<?php $i; ?>">
</tr>
<?php
echo "<tr><td><input id=\"countButton\" type=\"button\" class=\"add\" value=\"Add More\"/></td><td><input type=\"submit\" name=\"submit\" value=\"submit\"></td></tr>";
?>
</table>
</form>
</body>
</html>
Could anyone please help on this.
thanks in advance.
Editing the question:
Hi,
In the script i need to enter Pronto ID exactly 12 character. if it's less/more than 12 it should echo the message to enter 12 character. what code should i add to this line? please help me.
var appendTxt = "<tr><td>Pront ID:</td><td><input type='text' name='input_box_one[]' /></td><td>Pronto Title:</td> <td><input type='text' name='input_box_two[]' /></td> <td><input type='button' class='del' value='Delete' /></td></tr>";
foreach ($_POST['input_box_one'] as $v) {
echo $v . '<--- i am your value<br>';
}
Result
------
inputboxvalue1
inputboxvalue2
inputboxvalue3
etc....
print the $_POST varaible on php page like
<?php print_r($_POST); ?>
Than you will get the idea of posted inputs.afterword you have use the foreach method.
I still can't get the right flow for this. I know it's simple and i think that my code is right but still the alert message is showing when i hit the buy button even if the input box is null. What i wanted is that no alert message will show if the input box is null but if the input box is filled then that;s the only time where the alert message will show when button is clicked. Here is my code:
<?php
require_once('auth.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Athan Motorcycle</title>
<style type="text/css">
<!--
.style1 {
color: #000000;
font-weight: bold;
font-size: 24px;
}
-->
</style>
<!--<script type="text/javascript">
function validateForm()
{
var a=document.forms["abc"]["qty"].value;
if ((a==null || a==""))
{
alert("Please specify the quantity.");
return false;
}
}
</script>-->
</head>
<body>
<form action="saveorder.php" name="abc" method="post">
<input name="id" type="hidden" value="<?php echo $_SESSION['SESS_MEMBER_ID']; ?>" />
<input name="transcode" type="hidden" value="<?php echo $_SESSION['SESS_FIRST_NAME']; ?>" />
<table width="400" border="0" cellpadding="0" cellspacing="0">
<?php
if (isset($_GET['id']))
{
include('config.php');
$id=$_GET['id'];
$result = mysql_query("SELECT * FROM athan_products WHERE product_id = $id and status='available'");
$row3 = mysql_fetch_array($result);
echo '<tr>';
echo '<td width="80"><img alt="Motor" src="images/motor/'.$row3['product_photo'].'" /></td>';
echo '<td width="200"><span class="style1">'.'</span></td>';
echo '<td width="120"></span></td>';
echo '</tr>';
echo '<tr>';
echo '<td width="80"><input name="name" type="text" value="'.$row3['partsname'].'" readonly/><input name="ingre" type="hidden" value="'.$row3['product_ingredients'].'"/> <input name="ids" type="hidden" value="'.$row3['id'].'"/></td>';
echo '<td width="120"></span></td>';
echo '</tr>';
}
?>
</table>
<br />
<label style="color:#000000;">Qty:
<input type="number" min="1" id="qty" name="qty" required = "required" />
</label>
<br />
<table width="400" border="0" cellpadding="0" cellspacing="0" style="color:#000000;">
<tr>
<!--<td width="179">Size</td>-->
<td width="128">Price</td>
<td width="179">Description</td>
<td width="93">Selection</td>
</tr>
<?php
if (isset($_GET['id']))
{
include('config.php');
$id=$_GET['id'];
$result = mysql_query("SELECT * FROM athan_products WHERE product_id = $id");
while($row3 = mysql_fetch_array($result))
{
$resultq = mysql_query("SELECT * FROM inventory WHERE product_id LIKE '%".$id."%'");
//$resultq = mysql_query("SELECT * FROM inventory WHERE product_id LIKE =$id");
while($rows = mysql_fetch_array($resultq))
{
$qwerty=$rows['qtyleft'];
}
if ($qwerty !=0){
echo '<tr>';
//echo '<td>'.$row3['product_size_name'].'</td>';
echo '<td>'.$row3['price'].'</td>';
echo '<td>'.$row3['description'].'</td>';
echo '<td>'.'<input name="but" type="image" value="'.$row3['id'].'" src="images/button.png" onclick="return myFunction()" />'.'</td>';
echo '</tr>';
}
else
{
echo '"This Item is not Available"';
//echo '<td>'.'<h1>'.'"not available"'.'</h1>'.'</td>';
}
}
}
?>
</table>
</form>
<script type="text/javascript">
function myFunction()
{
var a=document.forms["abc"]["qty"].value;
if (a!=null || a!= ""){
alert("Item has been successfully added to your Cart");
}
}
</script>
</body>
</html>
Your OR should be an AND:
if(a!=null && a!= "")
Since a is not equal to null, the condition is true
Instead of checking for null or empty, you should check if a.length is 0
if(a.length !== 0){
// do stuff
}
Problem:
Trying to automatically generate a form and submit it without user interference.
Complete code:
<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
$(document).ready(function()
{
var url = 'test.php';
var form = $('
<form action="' + url + '" method="post">' +
'<input type="text" name="Datafile" value="' + <?php echo "upload/".$_SESSION['txtfile'].""; ?> + '">' +
'<input type="text" name="Perspective" value="' + <?php echo implode(" ", $_SESSION['dimensions']); ?> + '">' +
'<input type="hidden" name="form_submitted" value="true">' +
'</form>
');
$('body').append(form);
$(form).submit();
});
</script>
</head>
<body>
</body>
</html>
It gives me first an error when looking at the source code that implode() parameters are wrong.
Desired solution:
The form should submit itself once it has been loaded.
Anyone who can spot what's wrong or why the form does not submit itself?
Since you are using jquery why aren't you just sending the data via post?
$.post( "test.php", { name: "<?php echo "upload/".$_SESSION['txtfile']; ?>" ,
Perspective: "<?php echo implode(" ", $_SESSION['dimensions']); ?>",
form_submitted : "true"} );
Can you try this,
<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function AutoSubmit(){
document.my_form.submit();
}
</script>
</head>
<body onLoad="AutoSubmit();">
<form action="test.php" name="my_form" id="my_form" method="post">
<input type="hidden" name="Datafile" value="<?php echo "upload/".$_SESSION['txtfile']; ?>">
<input type="hidden" name="Perspective" value="<?php echo implode(" ", $_SESSION['dimensions']); ?>">
<input type="hidden" name="form_submitted" value="true">
</form>
</body>
</html>
<?php session_start(); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
$(document).ready(function()
{
var url = 'test.php';
var form =
"<form action="+url+" method=\"post\"><input type=\"text\" name=\"Datafile\" value=\"<?php echo \"upload/\".$_SESSION[\'txtfile\'].\"; ?> \"><input type=\"text\" name=\"Perspective\" value=\" <?php echo implode(\" \", $_SESSION[\'dimensions\']); ?>\"><input type=\"hidden\" name=\"form_submitted\" value=\"true\"></form>";
$('body').append(form);
$(form).submit();
});
</script>
</head>
<body>
</body>
</html>
You forgot to load jQuery in document:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>