I'm new here and a super noob in programming. I'm having trouble with my project. My problem is that I'd like hide the form after submit and retain the data input in it.
Here's my code:
<?php
$displayform = true;
if (isset($_POST['trck']))
{
$track = addslashes(strip_tags($_POST['tracknumber']));
$ord = $_POST['id'];
$displayform = false;
if (!$track)
echo "Please enter your tracking number!";
else
{
mysql_query("update `orderdetails` set `trackno`='$track' where `id`='$ord'");
}
if ($row2['id']==$ord)
echo $_POST['tracknumber'];
}
if ($displayform)
{
?>
<form method="post" action="">
<input type="text" name="tracknumber" id="tracknumber" size="30" maxlength="30" placeholder="Enter your track number here." />
<input type="hidden" name="id" value="<?php echo $row2['id']; ?>">
<input type="submit" name="trck" id="trck" value="Save" onclick="return confirm(\'Are you sure you want to save this tracking number?\');" />
</form>
</td>
</tr>
<?php
}
}
?>
This code was inside a while loop and my problem with this is that after I submit all the form is hidden. All I want is to hide the form with the specific ID on a query.
Simplest way is to use jQuery hide
Include the jquery as
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$("#buttonid").click(function(){
$("#formid").hide();
});
You are looking for something like this in your <form> tag:
<form method="post" action="" id="awesome_form" onSubmit="document.getElementById('awesome_form').style.display = 'none';">
use the jQuery and use :
$("#submitButtonId").click(function(){
$('#formId').hide();
});
or else in pure javascript use
<input type="submit" value="submit" onClick="hideIt()"/>
<script type="text/javascript" >
function hideIt() {
document.getElementById('formId').style.display = 'none';
}
</script>
its better not to use inline javascript
Related
I am using php_self to submit a form. Once the data has been posted, I want to pass a calculated value to another form field on the same page, original form.
The $title_insurance field stays blank. Any ideas on why? Thanks!
<?php
if(isset($_POST['submit']))
{
$sale_price = $_POST['sale_price']; // posted value
$title_insurance = ($sale_price * 0.00575) + 200;
?>
<script type="text/javascript">
document.getElementById("title_insurance").value='<?php echo $title_insurance ; ?>';
</script>
<?php } ?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<input name="sale_price" type="text" id="sale_price" size="15">
<input name="title_insurance" type="text" id="title_insurance" size="15" value="<?php echo $title_insurance; ?>" />
<input name="submit" type="submit" class="bordered" id="submit" value="Calculate" />
</form>
The submit button is called button, also if you are outputting a javascript to amend the value it need to be run after the DOM has created the element title_insurance.
if(isset($_POST['button']))
{
$sale_price = $_POST['sale_price']; // posted value
$title_insurance = ($sale_price * 0.00575) + 200;
}
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<input name="sale_price" type="text" id="sale_price" size="15">
<input name="title_insurance" type="text" id="title_insurance" size="15" value="<?php echo $title_insurance; ?>" />
<input name="button" type="submit" class="bordered" id="button" value="Calculate" />
</form>
<script type="text/javascript">
document.getElementById("title_insurance").value='<?php echo $title_insurance ; ?>';
</script>
A better way in this case would be to forget about the javascript as it is unnecessary and do this
// I am assuming you have initialized $title_insurance
// somewhere above here to its default value!!!!
$title_insurance = isset($_POST['button']) ? ($_POST['sale_price'] * 0.00575) + 200 : $title_insurance;
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<input name="sale_price" type="text" id="sale_price" size="15">
<input name="title_insurance" type="text" id="title_insurance" size="15" value="<?php echo $title_insurance; ?>" />
<input name="button" type="submit" class="bordered" id="button" value="Calculate" />
</form>
You have an extra space in your getElementById parameter:
// VV
document.getElementById("title_insurance ").value='<?php echo $title_insurance ; ?>';
What you want to do is best done by AJAX. The <form> construction is outdated and not useful unless you are transferring the user to another page and sending some data along with it - or, if you are finished getting user data and just want to process what was entered and display a completion message.
If you wish to continue processing on the same page, then AJAX is the way to go. And the best way to use AJAX is to have a separate processor file (PHP) that receives the data, processes it, and sends it back.
To convert a <form> construct to AJAX, you really just need to remove the <form></form> tags and convert the submit button from type="submit" to type="button" id="mybutton", and use the IDs on the button and on the other elements to grab the data they contain and feed them to the AJAX code block. The examples in the link at bottom shows what you need to know - they are simple, helpful examples.
To conserve resources, you can use the same PHP processor page for multiple AJAX requests -- just send a variable (eg. 'request=save_to_db&first_name=bob&last_name=jones', ) and test for what "request" is received, that will determine what your PHP processor file does and echoes back.
This post, and the examples it contains, will help.
try this first
In you coding you missed this $_POST['button']
and
<?php
if(isset($_POST['button']))
{
$sale_price = $_POST['sale_price']; // posted value
$title_insurance = ($sale_price * 0.00575) + 200;
?>
<script type="text/javascript">
document.getElementById("title_insurance ").value='<?php echo $title_insurance ; ?>';
</script>
<?php } ?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<input name="sale_price" type="text" id="sale_price" size="15">
<input name="title_insurance" type="text" id="title_insurance" size="15" value="<?php echo $title_insurance; ?>" />
<input name="button" type="submit" class="bordered" id="button" value="Calculate" />
</form>
and also refer this FIDDLE it will more helpful to you..
I have 2 FORMS on a single page, One below the other.
I would like to have such that second form should be always in disable mode.
and Once the first form submit button is pressed and validated second should get activated to enter the data in it.
Is there anything in PHP which can help me on this
You have 2 ways:
1) send validation of first form using ajax, and, if you receive 'true', enable second form.
2) make a POST from first form, if everything is good, set "validated" to 'true' and reload the same page. In the second form "enabling" must be only if you have $validated = true;
The logic below should help you out as a starting point:
<form method="post">
<input type="text" name="name" />
<input type="submit" name="form1" value="Proceed" />
</form>
<form method="post">
<input type="text" name="email"<?php if(!isset($_POST['form1'])) { echo ' disabled="disabled"'; } ?> />
<input type="submit" name="form2" value="Submit"<?php if(!isset($_POST['form1'])) { echo ' disabled="disabled"'; } ?> />
</form>
Of course, it would be much more reliable to use either AJAX to validate the first form, or to have the forms appear on separate pages.
<?php
if(isset($_POST['next'])) {
if($_POST['name']!="") {
$disabled = "";
$val = $_POST['name'];
} else {
$disabled = " disabled='disabled'";
$val="";
}
} else {
$disabled = " disabled='disabled'";
$val="";
}
?>
<html>
<head>
<title></title>
</head>
<body>
<form id="frm1" name="frm1" method="POST" action="">
<label>Name</label><input type="text" id="name" name="name" value="<?php echo $val;?>"/>
<input type="submit" name="next" id="next_frm" value="Next"/>
</form>
<form name="frm2" id="frm2" method="POST" action="">
<label>Address</label><input type="text" name="address" id="address" value="" <?php echo $disabled;?>/>
<input type="submit" name="save" id="save" value="Save" <?php echo $disabled;?>/>
</form>
</body>
</html>
This is somewhat you were looking for ,I hope
You can do it by setting a class on all inputs within second form and set them as disabled of course someone who knows a bit of javascript will be able to change it.
So you can do it as your visual layer, but then check in PHP as well if second form can be passed in case someone wanted to sneak something in.
More complicated approach would be to show images that look like form fields and only change them to inputs where the first form is submitted. That can be done on client or server side
So in reality you will have 3 forms, but one would be "fake"
Thats simple just use if else condition.
// this if condition checks whether the form 1 is submitted or not. If form1 is submitted than form 2 is displayed else form1 wil only be displayed
if(isset($_POST['submit']))
{
//Display your form 2.
}
else
{
//Display your form1.
}
I have a form in PHP which looks like this:
<?php
$txtVal1 = "value1";
?>
<script type="text/javascript">
function post_data(){
alert(document.getElementById("text1").value);
}
</script>
<form method="post" action="">
<input type="text" value="<?php echo $txtVal1;?>" id="text1"/>
<input type="button" value="Post" onclick="post_data()"/>
</form>
My question is whenever I click "Post" button I get an alert message as "value1". This is fine. But now if I change the text box value to something else from the UI I still get the old value. Is there any solution to get the changed value?
Try this. this works. check if your php value is putting value correctly or not
<script type="text/javascript">
function post_data(){
alert(document.getElementById("text1").value);
}
</script>
<form method="post" action="">
<input type="text" id="text1"/>
<input type="button" value="Post" onclick="post_data()"/>
</form>
<pre>
<?php <br/>
$txtVal1 = "value1";<>
?>
<script type="text/javascript">
function post_data(){
alert(document.getElementById("text1").value);
}
function test(val){
document.getElementById("text1").value = val;
}
</script>
<form method="post" action="">
<input type="text1" value="<?php echo $txtVal1;?>" onChange="test(this.value)" id="text1"/>
<input type="button" value="Post" onclick="post_data()"/>
</form>
Try this jQuery fiddle
It may be overkill but it works. StackOverflow doesn't like links to jsfiddle?
$("#submit").click(function(){
alert($("#text1").val());
});
Your page when ever load the first php value assign and after that run all value that is the problem for that. You change to assign value for the above one $txtVal1 = "value1";
I have a page with several forms which are dynamically generated using PHP. I am validating them using the jQuery Validation plugin. The forms are all the same, but relate to different items so I have given all of the forms the same class so they can be validated by one function (each form also has a unique ID). But I'm having some problems:
I would like the error messages to appear by the correct form items, but if I'm just using the form's class, the validator won't know which form the item is from.
I have a hyperlink to submit the form (and a regular submit button in <noscript> tags), and would usually use jQuery to submit the form, but again, how will jQuery know which submit link I've clicked, and which form to submit?
The easiest thing I can think of is to pass the form ID to the validate some how. Is that possible?
The forms look like this:
<?php while($row= pg_fetch_row($groups)) { ?>
<p class="error" id="error-<?php echo $row[0] ?>"></p>
<form action="../scripts/php/groups-process.php" method="post" id="editgroup-<?php echo $row[0] ?>" class="editgroup">
<label for ="edit-<?php echo $row[0] ?>" >Edit group name:</label>
<input type="text" class="text" size="20" maxlength="30" name="edit" id="edit-<?php echo $row[0] ?>" value="<?php echo $row[1] ?>" />
<noscript><input type="submit" name="editgroup" value="Submit" /></noscript>
<div id="submitcontainer-<?php echo $row[0] ?>"></div>
</form>
<?php } ?>
I would normally validate the form like this:
$(document).ready(function(){
$("#editgroup").validate({
rules: {edit: {required: true, maxlength: 30}},
messages: {edit: {required: 'Please enter a group name', maxlength: 'Please enter a shorter group name'},
errorContainer: "p#error",
});
$("#submitcontainer").html('<a class="button" href="javascript:void();" id="submitlink" name="submit">Submit</a>');
$("#submitlink").click(function() {
$("#editgroup").submit();
});
});
give the same class to all the form than try this,
<form id="1" class="common" method="post" action="page.php">
<input type="text" class="common_input_class" size="20" maxlength="30" name="edit" id="whatever" value="whatever" />
<input type="submit" name="submit" class="submit_this_form" value="submit" />
</form>
<form id="2" class="common" method="post" action="page.php">
<input type="text" class="common_input_class" size="20" maxlength="30" name="edit" id="whatever" value="another value" />
<input type="submit" name="submit" class="submit_this_form" value="submit" />
</form>
<script type="text/javascript">
$(".common").submit(function(){
var form_id = $(this).attr('id');
var input_val = $(this).children('.common_input_class').val();
if (input_val == '')
{
alert("input field is required");
return false;
}
});
</script>
I ended up iterating through my result twice, so I create a form validator for each form dynamically, and then dynamically create the forms. This was the best way I could think of to give me the control I wanted, although obviously it's slower and produces more code - not an ideal solution but it will do for this situation.
what is the code if I have checkbox and by choosing it(without any submit button) showing me a submit button
<html>
<head>
<title>test</title>
<form method="post">
<?php
//what will be the code here?
?>
<input type='checkbox' name='cb'>
</form>
</html>
Simply CAN'T DO without Javascript. With Javascript?
Easy, quick, sweet and approachable
<script>
function openinput() {
document.getElementById('submit').style.visibility = "visible";
}
</script>
<form>
<input type="checkbox" onclick="openinput()" />
<input type="submit" id="submit" value="go" style="visibility: hidden" />
</form>
Not a JS guy but something simple like this should work (untested code):
<script>
function showHide(obj){
if(obj.checked==true){
document.getElementById('submit_btn').style.display = 'inline';
}else{
document.getElementById('submit_btn').style.display = 'none';
}
}
</script>
<form method="post">
<input type='checkbox' name='cb' onclick="showHide(this)">
<input type="submit" id="submit_btn" value="submit" style="display:none" />
</form>
Ofcourse there are more elegant solutions using frameworks like JQuery
Something like this, but this will only work if you indeed submit the form but don't do anything with the post values other than this check. JavaScript would be the better option.
<?php
if(isset($_POST['cb'])) {
?>
<input type="submit" value="go power rangers" />
<?php
};
?>
raw code: (in jQuery v1.6)
$('input[type="checkbox"]').change(function() {
var $input = $(this);
if($input.prop('checked')){
alert('checked');
$('input[type="submit"]').show();
}
else
$('input[type="submit"]').hide();
});
DEMO