HTML display=none doesn't work - javascript

My code:
<?php
if($counter==0) {
echo "value of counter = $counter"
?>
<script type='text/javascript'>
document.getElementById("tt").style.display = "none";
</script>
<?php
}
?>
<html>
<body>
<form action="new_upload.php" method="post" name="myform" enctype="multipart/form-data" id="formform">
<input type='submit' value='Go Back!' name="sbmt" id="tt"
<?php if($counter==0) { ?> display="none" <?php } ?> />
</form>
<p> Submit a different file by clicking the back button in case your file was unable to upload.</p>
</body>
</html>
You can see I have tried to set the property display=none of the submit button through
1) if php condition is true, I added javascript.
2) I added php in my form submit button code.
but it is not working both ways. I can see through the print statement that the value of counter is 0 but then also it is visible.

You are executing the script before the element is created. Move the code below the element to work

There is no such attribute as display, you need to use style="display: none" instead.

Related

How to avoid inserting two time in double click time in codeigniter

I am search the other result of related question and that i implement in my code but that not working ,i have 2 button in a form
my form
<form id="InVoice" action="<?php echo base_url('Staff/add_invoice_spare');?>" method="post" class="form-horizontal">
/*-- content herer--*/
<button style="float:right;" type="submit" name="ready" value="Ready For Bill" class="btn btn-danger" style="border-radius:60px;">Add to Ready for Bill</button>
<button style="float:right;margin-left:15px;" type="submit" name="print" class="btn btn-danger" style="border-radius:60px;">Print</button>
<?php echo form_close(); ?>
and used script is
<script type="text/javascript">
$(document).ready(function() {
$("form#InVoice").submit(function() {
alert();
$('button[type=submit]').prop('disabled',true);
return true;
});
});
</script>
this my controller for inserting
public function add_invoice_spare()
{
$bill=$this->input->post('ready');
if($bill)
{
$reg=$this->input->post('rno');
$data=array(
/*-----------datas here-----*/
);
$ans=$this->Bill_model->check_registration($reg);
$form_data= $this->input->post();
$result=$this->Bill_model->invoice_dtls_ready($form_data,$data);
if($result){
redirect('Staff/list_invoice/'.$result);
}
}else{
$reg=$this->input->post('rno');
$data=array(
/*-----------datas here-----*/
);
}
$form_data= $this->input->post();
$result=$this->Bill_model->invoice_dtls($form_data,$data);
if($result)
{
?>
<script type="text/javascript" language="Javascript">
window.open('invoice_pdf/<?PHP echo $result ?>', '_blank');
window.location.href = "invoice_labour";
</script>
<?php }
}
}
but in double click or single click the Add to Ready for Bill button the print button is work why that redirect?
any way to solve this issue and only one time submitte the data ?
thanks in advance!!!
Both the buttons that you are clicking on are of the type submit or they are submit buttons. So the only way to differentiate this will be at the backend.
For eg, according to the above example when you submit the $_POST array will have the submit button value. It is based on this value that you have to build your code logics.
If you click on Print then $_POST['submit'] will be the value will be print and when you click on "Add to Ready for Bill" the $_POST['submit'] value will be ready.
If you want to control it in the Frontend i.e., jQuery end you can by using the preventDefault (the example of which is given by #pradeep) but I suggest you modify the Backend as well to differentiate between these 2 submit buttons.
Hope this helps.

I have to click twice on my submit button before js run. Why?

I have a little problem. Why do I have to click twice on my submit button before my js script run? I want that when I click the button the data are send, and the js script runs without click again
This is my page:
<html>
<head>
<script src="js-scripts.js"></script>
<style>
.content {
max-width: 600px;
margin: auto;
}
.test{
width:200px;
text-align: center;
}
</style>
</head>
<body>
<div class="content" id="tot-op">
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<center>
<div class="content" id="tot-op">
<fieldset>
<input type="number" min="1" max="7" name="num" required>
<br><br>
<input type="submit" value="Invia" onclick="hide()">
</fieldset>
</div>
</center>
</form>
</div>
<div id="insert" style="display:none">
<?php
$test=$_POST["num"];
echo $test;
?>
</div>
</body>
</html>
And this is my script:
function hide(){
document.getElementById("tot-op").style.display = "none";
document.getElementById("insert").style.display = "block";
}
What can I do?
Add an id attribute to your form like:
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" id="test-form">
Change your button definition to:
<input type="button" value="Invia" onclick="hide()">
and then, inside your hide() add the form submit action like:
function hide()
{
document.getElementById("test-form").submit();
document.getElementById("tot-op").style.display = "none";
document.getElementById("insert").style.display = "block";
}
You can always break out of php and run javascript code or manipulate HTML using conditional blocks. Below the <script> tag will be added to the document only if condition returns true.
It is similar to echo "<script>...</script>".
So, your form data gets handled and also the Javascript code runs the
way you want it.
<?php
if( isset($_POST["sButton"]) ) //I had done a mistake here
{ //start if
//close php and add script which will run only if the variable $_POST["num"] is set
?>
<script>
document.getElementById("tot-op").style.display = "none";
document.getElementById("insert").style.display = "block";
</script>
<?php
//start php again and complete the if block
$test=$_POST["num"];
echo $test;
} //end of if block
?>
Set a name for your submit button. I have used sButton here and use
if( isset($_POST["sButton"]) ). I made changes above and remove onclick. It is not required here.
<input type="submit" name="sButton" value="Invia">

if(isset... doesn't work when loading the php file onsubmit with javascript

I have a small problem loading a php function if(isset... to a page where is form with onsubmit function :
function functionlol() {
$('#phptestlol').load('system/phptest.php');
}
Now, the phptest.php contains this :
if(isset($_POST['test'])){
echo "Working with submission also";
}
echo "Working";
and html with form looks like this:
<span id='phptestlol'></span>
<form method='POST' onsubmit='functionlol()' target='test'>
<input type='submit' name='test' value='Submit'>
</form>
I did target='test' because I don't want page to be refreshed.
When I click the submit button, it loads the php file, but it shows only the "Working" echo, and doesn't echo that "Working with submission also"... what am i supposed to do to make it work? Thanks!
EDIT
WHOLE HTML:
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$('form').submit(function(event) {
event.preventDefault();
$('#phptestlol').load('system/phptest.php', {test:1});
});
</script>
</head>
<body>
<iframe name='test' style='display:none;'></iframe>
<span id='phptestlol'></span>
<form method='POST' target='test'>
<input type='submit' name='test' value='Submit'>
</form>
</body>
</html>
PHP (phptest.php):
<?php
error_reporting(E_ALL); ini_set('display_errors', 1);
if(isset($_POST['test'])){
echo "submitted";
}
?>
Let's make some adjustments and take advantage of jQuery all the way through. First the HTML -
<span id='phptestlol'></span>
<form method='POST' target='test'>
<input type='submit' name='test' value='Submit'>
</form>
Note the removal of any inline JavaScript. Now for the PHP -
if(isset($_POST['test'])){
echo "submitted";
}
Now for the cherry on top of the cake, the jQuery
$(document).ready(function() {
$('form').submit(function(event) {
event.preventDefault(); // prevents the default action of the submit button
$('#phptestlol').load('system/phptest.php', {test:1});
});
});
Here we prevent the default action of clicking the submit button. We also send a value for the $_POST array ({test:1}) so the isset($_POST['test']) will work as we expect.

Passing url parameters in form action attribute

<?php for($i = 0; $i < $pin_num_rows; $i++){ ?>
<form action="/group/<?php echo $group_id ?>?Comment=<?php echo $pin_id[$i] ?>" method="post" id="group-comment-form">
<textarea name="group-comment" id="group-comment" placeholder="Add a comment..." spellcheck="false"></textarea>
</form>
<?php } ?>
This is the some part of my code. As you can see, I am passing the value of pin_id in my form action. The problem is, whenever I post comment, the form submits the value with /group/?Comment=1 but it supposed to submit with 1, when I comment to the first post. So, when I comment to the second post, it supposed pass 2 but it doesn't. It always passes /group/?Comment=1
I did echo this right after my textarea and I see that for every comment form, the number increments as it should be but when I submit, it submits with value 1. I am going crazy.
<?php echo "/group/<?php echo $group_id ?>?Comment=$pin_id[$i]" ?>
I have also this part in my code in the same loop above and it has the same logic but it works. I don't understand why the form part doesn't work.
Edit
Delete
EDIT
I wrote this simple program which demonstrates the same logic that I used for the site and this simple program works but website. I guess the problem is not about the names of form or textarea.
<?php
$inputValue = NULL;
$id = [1,2,3];
if(isset($_POST['inputName'])){
$inputValue = $_POST['inputName'];
echo "<br>Input Value: " . $inputValue;
}
if(isset($_GET['id'])){
$getValue = $_GET['id'];
echo "<br>Get Value: " . $getValue;
}
?>
<html>
<head><title>Multiple Forms in One Page</title></head>
<body>
<br>
Main Page
<br>
<?php for($i = 0; $i < 3; $i++){ ?>
<form action="index.php?id=<?php echo $id[$i] ?>" method="post" name="formName">
<textarea name="inputName"></textarea>
<input type="submit" name="submitName">
</form>
<?php } ?>
</body>
</html>
FOUND THE PROBLEM (BUT STILL NEED FIX)
<script>
$(function() {
$('textarea#group-comment').on('keydown', function(e) {
if(e.keyCode == 13 && !e.shiftKey){
document.getElementById('group-comment-form').submit();
}
});
});
</script>
I use this script to submit my forms. I don't have a submit button to submit. If I use submit button, everything works perfect but if I use this script above to submit the form, it won't work. What should I do to make the script above work?
SOLUTION
After I found where the problem is caused, I created another question to find a fix for the problem.
The answer is here: Solutution

Display a hidden div after a html form submit to show output

I have a html form to collect name and place and after user submit the form, the out will display at bottom of the page using PHP echo
My requirement is,
hide the output div before the form submit and after user enter data and submit, I have to make output div visible to display form output using PHP echo.
Here is my HTML code:
<div class="main">
<form id="main" name="main" action="#text" method="post">
<div class="input">
<div id="name">
<div class="block">
<div class="input-quest">Your Name</div>
<div class="input-resp"><span><input class="textbox" id="nm" name="nm" type="text" value="" /></span>
</div>
</div>
</div>
<div id="place">
<div class="block">
<div class="input-quest">Your Place</div>
<div class="input-resp"><span><input class="textbox" id="pl" name="pl" type="text" value="" /></span>
</div>
</div>
</div>
</div>
<div class="submit">
<input id="generate" type="submit" name="script" value="generate" />
<input type="submit" id="clear" name="clear" value="clear" />
</div>
</form>
<div class="output">
<?php $name = $_POST['nm']; $place = $_POST['pl']; echo "Hello, I am $name and I am from $place"; ?>
</div>
</div>
It contain the PHP echo codes at output div section.
I have searched for solution in previous questions and tried below methods mentioned there:
1.Added a inline CSS tag for output div to hide it
<div id="output" style="display: none;">
<!-- echo php here -->
</div>
and added JavaScript to call function during submit
$('main').submit(function(){
$('#output').show();
});
It didn't work.
2.Tried with below JavaScript code
$('main').submit(function(e){
$('#output').show();
e.preventDefault();
});
It didn't work.
3.Removed inline CSS for output div to hide and added the same to my CSS stylesheet
<div id="output">
and in stylesheet
#output{
display:none;
}
and used below JavaScript code on submit
$('main').submit(function(){
$('#output').css({
'display' : 'block'
});
});
It didn't work.
Added a onclick function along with the form submit
and submit button code:
<input id="generate" type="submit" name="script" value="generate" onclick="showoutput()"/>
and JavaScript:
showoutput(){
$('#output').slideDown("fast");
}
and with
showoutput(){
$('#output').show();
}
It didn't work.
Please suggest a solution to do this.
I'm not sure why you need to use js/css for this at all. Just check if the variables were posted, and if they were, echo them (you'd have to set your form action to point to the same page):
<?php if (!empty($_POST['nm']) && !empty($_POST['pl'])) { ?>
<div class="output">
Hello, I am <?php echo $_POST['nm']; ?>, and I am from <?php echo $_POST['pl']; ?>
</div>
<?php } ?>
If you just want to display the name and place in div.output, without actually submitting the form, you could do:
$('#main').submit(function(e) {
e.preventDefault(); // prevent form from being submitted
$('div.output').text('Hello, I am ' + $('#nm').val() + ', and I am from ' + $('#pl').val());
});
Here's a fiddle
<?php if(isset($_POST['nm'])) { ?>
<div class="output">
<?php $name = $_POST['nm']; $place = $_POST['pl']; echo "Hello, I am $name and I am from $place"; ?>
</div>
<?php } ?>
Create a separate page to process your form using javascript/jquery (ajax), and have it return the info you want, hide the form and show the .output div.
PHP Page:
<?php
$name = $_POST['nm'];
$place = $_POST['pl'];
echo "Hello, I am ".$name." and I am from ". $place;
?>
The javascript/jquery would catch that as responseText and then use innerHTML on your .output div to put that responseText. You'd then use the JS/Jquery to hide the form and show the .output
You can actually accomplish this entirely with php. The simplest method that I would use would be to make a hidden input with a given value. Once the user submits the form, that variable will exist and you can grab it in your php.
First you need to change the entire page to .php, and echo all of your html. then in the form, set the action to the name of the page so that it will send the variables to itself and then you can deal with them on the same page.
add this to the html:
<input type='hidden' name='display' value='display' />
In your php, add:
if (isset($_POST['display']){
echo "make the div here";
}else{
//don't show the div
}

Categories