I have a simple form only consisting of a button that is used to download a file. here is the code :
<form method='post' action='download.php?file=file.txt' name='form1'>
<button type='submit'>Telecharger</button>
</form>
Download.php is a small php file with header used to engage download, here it is :
<?php
$filename=$_GET['file'];
header('Content-Type: text/plain');
header("Content-disposition: attachment;filename=$filename");
readfile($filename);
?>
What I'm trying to do is hide the button or the form after the user clicked on it. So far I have tried toying with css and javascript listener but nothing worked so far.
When I click on the button it download the file but doesn't hide the button.
How can I hide the button after submiting the form ?
You can use Javascript:
<form method='post' action='download.php?file=file.txt' name='form1'>
<button onClick='this.style.display = "none";' type='submit'>Telecharger</button>
</form>
This will hide your button when it's clicked. Here is a fiddle.
Sth like this?
document.getElementById("downloader").addEventListener('click', function() {
this.style = "display: none;"
});
<div>
<button type='submit' id="downloader">Telecharger</button>
</div>
You should give your button at the very least a class like so,
<button class="button-toggle" type='submit'>Telecharger</button>
and you can use vanilla js to select and hide it,
document.getElementByClassName("test").addEventListener("click", function( event ) {
event.target.style.visibility = "hidden";
}, false);
or if you're using jQuery
$('.button-toggle').click(function() {
$(this).hide();
});
Should get you close.
The following should work.
<form method='post' action="javascript:alert('Hello there, I am being submitted');" name='form1' id="form">
<button type='submit' id="hide">Telecharger</button>
</form>
<script type="text/javascript">
var button = document.getElementById("hide");
button.addEventListener("click", function(event){
button.style.display = "none";
});
</script>
I changed the action of the form just to check what was happening, but you can replace that with your action path.
Related
I am developing a facial recognition system. When i capture image with my webcam the url is loaded into a text box in a form. Now i want the form to submit and process the php if it is submnitted. Here is my form
<form action="<?php echo $_SERVER["PHP_SELF"];?>" method="post" enctype="multipart/form-data" id="frmsubmit">
<input type="text" class="form-control input-sm" id="imgsrc" name="imgsrc">
<input type="submit" value="AUTHENTICATE" class="btn btn-primary" data-loading-text="Loading..." name="send" id="submit">
</form>
AND MY JAVASCRIPT
<script language="JavaScript">
webcam.set_api_url( 'present.php' );
webcam.set_quality( 100 ); // JPEG quality (1 - 100)
webcam.set_shutter_sound( true ); // play shutter click sound
webcam.set_hook( 'onComplete', 'my_completion_handler' );
function take_snapshot(){
// take snapshot and upload to server
document.getElementById('upload_results').innerHTML = '<h1>Uploading Image To Database...</h1>';
webcam.snap();
}
function my_completion_handler(msg) {
document.getElementById("imgsrc").value=msg;
// extract URL out of PHP output
if (msg.match(/(http\:\/\/\S+)/)) {
// show JPEG image in page
document.getElementById('upload_results').innerHTML ="<div class='alert alert-success fade in'> <i class='icon-remove close' data-dismiss='alert'></i> <strong>Success!</strong>Image Captured And Uploaded Successfully </div>";
document.getElementById('upload_img').innerHTML ="<img src="+msg+" class=\"images\">";
// reset camera for another shot
webcam.reset();
document.getElementById('frmsubmit').submit();
}
else {alert("PHP Error: " + msg);
}
}
</script>
AND PHP CODE
if(isset ($_POST["send"]))
{
Use submit button click trigger for example
document.getElementById("submit").click();
you are using document.getElementById('frmsubmit').submit(); but you don't have any form with this id but you have submit button with id submit. so this code will work for you.
if you give the form an id
<form action="someaction" method="post" id="someform">
You can trigger the submit event with jQuery
$('#someform').trigger('submit');
or
$('#someform').submit();
Try this...
$('#imgsrc').on('change', function(){
$(this).parent().submit();
})
You can add the attribute onchange to the text box
onchange="this.form.submit()"
I would like to create a form with multiple submit link buttons. I know it can be done by using and specifying the name of <button> or <input type="button"> something like this:
In HTML:
<form action="" method="get">
Other form elements here...
<button type="submit" name="activated">Activated</button>
<button type="submit" name="pending">Pending</button>
<button type="submit" name="suspended">Suspended</button>
</form>
In PHP:
<?php
if(isset($_GET["activated"])) {
Activated codes here...
}
elseif(isset($_GET["pending"])) {
Pending codes here...
}
elseif(isset($_GET["suspended"])) {
Suspended codes here...
}
?>
I want the submit buttons to be done by using link, not <button> or <input type="submit"> something like this:
Activated
Pending
Suspended
I heard that it can be done by using JavaScript or JQuery but I don't know how, anyone knows?
Update: What I want to happen is when I clicked the "Activated" link for example, I want only to process the logic under isset($_GET["activated"]).
The reason behind:
The reason why I want to have a submit link buttons instead of normal submit button tags is that, I want to use this bootstrap dropdown button style to change the status of user(s) on table:
and it is based on links, so that's why.
PS: Sorry for bad English, not my native language.
You could use data attributes on your anchors, then load that attribute into a hidden field to check in your PHP code.
<form action="" method="post">
Activated
Pending
Suspended
<input type="hidden" id="actionName" name="actionName" value="" />
</form>
$('.anchor-btn').click(function(e) {
e.preventDefault();
$('#actionName').val($(this).data('name'));
$('form').submit();
});
<?php
if($_POST['actionName'] == "activated") {
Activated code goes here
}
...etc.
?>
Yes you can submit the form using jquery just add a class to your buttons and add a click handler
$(document).ready(function() {
$( ".buttons_class" ).click(function() {
$( "#target_form" ).submit();
});
});
so your buttons will look like this
<button type="button" name="activated" class="buttons_class">Activated</button>
<button type="button" name="pending" class="buttons_class">Pending</button>
<button type="button" name="suspended" class="buttons_class">Suspended</button>
if using anchors
Activated
Pending
Suspended
And in javascript
$(document).ready(function() {
$( ".buttons_class" ).click(function(e) {
e.preventDefault(); //This will stop the default anchor action
$("#target_form").attr("action", "yourphpfile.php?"+$(this).text()+"=true"); //This will send the text inside the anchor as a GET param.
$( "#target_form" ).submit();
});
});
However if I were you I would consider using POST instead of GET for this. and do something like this
$( ".buttons_class" ).click(function(e) {
e.preventDefault(); //This will stop the default anchor action
var paramName = $(this).text(); //get text inside anchor
$( "#target_form" ).submit(function(eventObj) {
$('<input />').attr('type', 'hidden')
.attr('name', paramName);
.attr('value', "something")
.appendTo('#form');
return true;
}); //Add hidden field
});
Change your isset to $_POST instead of $_GET, it will then use the name attributes.
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (isset($_POST['test1'])) {
###
} else if ($_POST['test2']) {
###
}
}
<form method="post">
<input name="test1" type="submit" value="TEST 1" />
<input name="test2" type="submit" value="TEST 2" />
</form>
I have a button that links to a php file that tracks user's email when clicked, but I don't want the user to leave the page when button is clicked, I just want to change button's value.
This is the html of the form.
<form action="mysql-query.php" method="post">
<input type="text" name="email" style="display:none;">
<input type="submit" value="Press here" id="test" onclick="Press()">
</form>
And this is the script that handles the form:
<script>
function Press() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
}
</script>
I put the display:none; because I don't want to display anything but the button and have a way to connect with my php file.
Any ideas?
You need to use ajax:
html:
<form action="mysql-query.php" method="post" onsubmit="return Press(this)">
<input type="text" name="email" style="display:none;">
<input type="submit" value="Press here" id="test">
</form>
js:
function Press(form) {
$.post($(form).attr('action'), function() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
});
return false; // prevent submitting the form
}
or better bind submit event using jQuery:
$('form').submit(function() {
$.post($(this).attr('action'), function() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
});
return false; // prevent submitting the form
});
Use:
<form action="javascript:void()">
Ok, this thing prevents the form from sending the data anywhere, unless you use "onclick" event on the submit button.
What you can do is remove the type="submit" on the button and replace it with type="button". Next you can do an ajax call to your php and do your magic.
I have a form
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
the form has multipe input type text and 1 dropdown menu.
I also have a submit button called (submit1)
<input class="submit-button" type="submit" name="submit1" value="UPDATE MY INFORMATION" />
My PHP read like this :
if (isset($_POST['submit1']))
{ .... }
If I press the button, it works, no problem.
BUT I also want to submit the form from the dropdown menu change... so it can be executed by both the press of the button OR the change in dropdown... so I have the following for my dropdown
<select name="country" onchange="this.form.submit()">
when I select my dropdown, the page refreshed, but the code in my PHP is not executed... I figured it has to do with the name of $_POST['submit1']...
How can I change onchange="this.form.submit() for it to execute the code in if(isset($_POST['submit1']))...
Thank you
You should avoid inline javascript like that. It's ugly, and reduces readability. The easier way would be to give your elements IDs, like so:
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data" id="myForm">
But if you don't want to, you can use QuerySelector and grab the name attribute of your input.
var x = document.querySelector("[name='country']");
x.addEventListener("change",function() {
this.parentNode.submit(); //get form parent and submit
});
I'm a bit confused why you're checking the submit button for a value as well, wouldn't you want:
if (isset($_POST['country'])) { ... }
Instead?
You could just document.getElementById('submit1').click() after setting the id on your submit button the same as its name. Of course, you would also do this onchange. I would separate my JavaScript from HTML, so it's cached into your Browser memory. Give your inputs, selects and the like the same id as their name, with the exception of radio buttons, and possibly checkboxes.
Let's start with some common.js:
//<![CDATA[
var doc = document, bod = doc.body;
var IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
if(IE >= version)bod.className = className;
}
function E(e){
return doc.getElementById(e);
}
//]]>
Now for your otherpage.php:
//<![CDATA[
var cntry = E('country'), sub1 = E('submit1');
cntry.onchange = function(){
sub1.click();
}
// note that the format E('submit1').click(); would also work
//]]>
Of course, you should have:
<script type='text/javascript' src='common.js'></script>
<script type='text/javascript' src='otherpage.js'></script>
</body>
</html>
Check for isset($_POST['country'])
And onchange add this to the drop-down,
onchange= 'document.getElementsByName("submit1")[0].click();'
I have two forms in my page. I hide the form 2 using HTML inline style.
<form id="productionForm" name="productionForm" method="POST" style="display:none;">
I have input button on form 1.
<input id="buttonProductionSummary" class="buttonProductionSummary" type="submit" value="Submit" />
I have JQuery code to load the form 2 on button click of form 1. My JQuery code is as follows.
<script type="text/javascript">
$(document).ready(function(){
$("#buttonProductionSummary").click(function() {
$("#productionForm").show();
});
});
</script>
When i click the button in the form one, the page get reloaded again, so the form 2 appears and disappers again. How to can i make the form 2 to appear when i click button on form 1.
You need to prevent the default behavior of the form:
$("#buttonProductionSummary").click(function(e) {
$("#productionForm").show();
e.preventDefault();
});
The problem is that clicking the button in form 1 is triggering a submission of the form (default event)... Hence, the page reloading. You should prevent that by using the submit event as your trigger, handle the form using AJAX and output the result to #productionForm before displaying:
$("#form1").submit(function() {
/* AJAX calls and insertion into #productionForm */
$("#productionForm").show();
return false;
});
as per my requirement i tried to display the form which is to be edit and hide all remaining forms using the following way;
<html>
<head>
<script>
$(document).ready(function(){
$("#what").click(function() { //event called
$(".hello").hide(); // to hide all forms
$('#ayyappa1').show(); //to dispaly needed form only
return false //option to stop
});
});
</script>
</head>
<body>
<form id ="ayyappa1 " class ="hello"> // declare class for every form
<input type="check" class="what"> // trigger of click event
</form>
<form id ="ayyappa2 " class ="hello">
<input type="check" class="what">
</form>
<form id ="ayyappa3 " class ="hello">
<input type="check" class="what">
</form>
<form id ="ayyappa4 " class ="hello">
<input type="check" class="what">
</form>
</body>
</html>
None of the answers above works, so I figured it out myself. This code works like a charm.
<button id="btn" class="editbutton" >Edit your Profile</button>
<form id="editForm" action="" method="post" name="editForm">
<input type="text" name="txtname" placeholder="enter your name">
</form>`
<script type="text/javascript">
$(document).ready(function(){
$("#editForm").hide();
$("#btn").click(function(e) {
$("#editForm").show();
$("#btn").hide();
});
});
</script>