How to hide the submit button when $row['completion_status']=='completed'.
My view code is:
<input type="submit" <?=($row[ 'checklist_id']=="Denied" ||$row[ 'checklist_id']=="Approved" ||$row[ 'completion_status']=="completed" )? "disabled='true'": "";?>name="sumit_button"
value="Update"
class="btn"
style="float:left;background:#d8d8d8;color:#000;box-shadow:0px 0px 1x rgba(0,0,0,0.2)!important;">
try like this code
<?php
$display = ($row[ 'checklist_id']=="Denied" ||$row[ 'checklist_id']=="Approved" ||$row[ 'completion_status']=="completed" )? "display:none": "display:block";
?>
<input type="submit" name="sumit_button"
value="Update"
class="btn"
style="float:left;background:#d8d8d8;color:#000;box-shadow:0px 0px 1x rgba(0,0,0,0.2)!important;<?php echo $display; ?>">
Use a proper way to do it:
<script>
$('#YOUR SUBMIT ID').submit(function(){
//Ajax Data
$.ajax({
type:'POST',
url:'YOUR BACKEND.php',
data:'YOUR DATA',
success: function() {
//Hide Button
$('#YOUR SUBMIT ID').attr("disabled", true);
},
error: function() {
//YOUR Code
}
});
});
</script>
change your disable into hidden just make the output just like this
<input type="submit" name="submit" hidden />
Or make it jQuery in it since you put a tag of javascript in this question
Related
how to change PHP include ("link.html") by click buttons.
<?php include('link1.html')?>
BUTTON 1 change <?php include('link1.html')?> to <?php include('link2.html')?>
BUTTON 2 change <?php include('link1.html')?> to <?php include('link3.html')?>
BUTTON 3 change <?php include('link1.html')?> to <?php include('link4.html')?>
how to do this without refreshing page. using ajax?
Wrap include('link1.html'); with a DIV with unique ID. And on click on button call a ajax and replace the DIV content.
Please try with below code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="DIVID">
<?php
include('link1.html');
?>
</div>
<button onclick="btnclick('link2.html')">Button 1</button>
<button onclick="btnclick('link3.html')">Button 2</button>
<button onclick="btnclick('link3.html')">Button 3</button>
<script type="text/javascript">
function btnclick(_url){
$.ajax({
url : _url,
type : 'post',
success: function(data) {
$('#DIVID').html(data);
},
error: function() {
$('#DIVID').text('An error occurred');
}
});
}
</script>
You can do that with jquery, example:
PHP Code:
<div id="mainDiv"><?php include('link1.html')?></div>
<button onclick="change2()">Button 1</button><br />
<button onclick="change3()">Button 2</button><br />
<button onclick="change4()">Button 3</button><br />
JQuery code
function change2() {
$('#mainDiv').load('link2.html');
}
function change3() {
$('#mainDiv').load('link3.html');
}
function change4() {
$('#mainDiv').load('link4.html');
}
Don't forget to include de JQuery
<script src="jquery/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="include( $( this ) )" value="2">Button 1</button>
<button onclick="include( $( this ) )" value="3">Button 2</button>
<button onclick="include( $( this ) )" value="4">Button 3</button>
<div id="included_page"><?php include('link1.html')?></div>
function include(elem)
{
var page = elem.val();
$.ajax({
url: "link" + page + ".html",
type: "GET"
}).done(function(msg) {
$('#included_page').html(msg);
})
})
}
I am not great at ajax but something along these lines may work, if you get any problems let us know.
<div id = "result"> Fade me in and hide div hideme</div>
<div id="hideme">
<form method="POST">
Yes<input type="radio" name="name" value="yes"/>
No<input type="radio" name="name" value="no" checked=true />
<input type="submit" id="submit" name="submit" value="HIDE NOW!" />
</form>
</div>
<script>
$(document).ready(function () {
$('#result').hide();
$('#submit').click(function(e) {
e.preventDefault();
$('#hideme').hide();
$('#result').fadeIn(5000);
});
});
</script>
This will hide my div where the submit is, whenever click on submit it wont send values to PHP.
How to fix that to make it send the values to PHP so i will get the values from html?
You have this e.preventDefault(); in your jquery click handler function. It means that when you press the submit button, the form wouldn't be submitted. It's simply preventing original action of that selector on click.
Here's how to fix it. Use ajax. There's many jquery functions for that, i will show you how to use $.ajax method.
$('#submit').click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "yourphpscriphere.php",
data: "name=" + $('input[name="name"]').val(),
success: function() {
alert('thank you for using my form');
},
error: function() {
alert('an error happened during the request');
}
});
$('#hideme').hide();
$('#result').fadeIn(5000);
});
Remember to change url to your own. Then you can get your radio button value using $_POST['name'] in php.
try this code :
html:
<div id="result"> Fade me in and hide div hideme</div>
<div id="hideme">
<form method="POST" id="eform">
Yes<input type="radio" name="name" value="yes"/>
No<input type="radio" name="name" value="no" checked=true />
<input type="submit" id="submit" name="submit" value="HIDE NOW!" />
</form>
</div>
jQuery :
$(document).ready(function () {
$('#result').hide();
$('#submit').click(function(e) {
$.post("page.php",$("#eform").serialize(),function(data){
$('#hideme').hide();
$('#result').html(data).fadeIn(5000);
})
});
});
How can I change the code below so instead of a text input type with a submit button I want multiple submit buttons each with their own unique value? Everything I try just ends up with submit's value being undefined. Any help would be great!
Code source: Submit Search query & get Search result without refresh
<script type="text/javascript">
$(function() {
$("#lets_search").bind('submit',function() {
var value = $('#str').val();
$.post('db_query.php',{value:value}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script>
<form id="lets_search" action="" >
Search:<input type="text" name="str" id="str">
<input type="submit" value="send" name="send" id="send">
</form>
You can add multiple submit buttons and attach to all of them onclick event listener. When button was clicked - get the value and send with a POST request.
<script>
$(function(){
$('input[type=submit]').click(function(){
$.post('db_query.php', {value:$(this).val()}, function(data){
$("#search_results").html(data);
});
return false;
});
});
</script>
<form id="lets_search" action="">
<input type="submit" name="button1" value="hi"/>
<input type="submit" name="button2" value="bye"/>
</form>
If you want to use multiple submit buttons, you can catch the click event and determine which button was clicked. then run different Ajax submit. this also works when enter is hit.
//submit buttons
<form id="lets_search" action="" >
Search:<input type="text" name="str" id="str" />
<input type="submit" value="v1"/>
<input type="submit" value="v2"/>
//...more submit buttons
</form>
//submit func
$(function() {
$("#lets_search input[type=submit]").click(function() {
switch ($(this).val){
case 'v1':...;
case 'v2':...
}
});
});
Here is my version - which now looks very much like Bingjies because it was written while I was testing out his version
DEMO
<form id="lets_search" action="" >
Search:<input type="text" name="q" id="q">
<input type="submit" value="Google" name="send" id="google">
<input type="submit" value="Bing" name="send" id="bing">
</form>
$(function() {
$("#lets_search input[type=submit]").click(function() {
switch ($(this).val()) {
case "Bing" :
$("#lets_search").attr("action","http://www.bing.com/search");
break;
case "Google":
$("#lets_search").attr("action","https://www.google.com/search");
break;
}
});
});
Here, I would prefer to Vamsi's solution n Why not Sanjeev mk?
Give some extra thought on prefering the solution.
case: If there are mulitple submit buttons
If the user is in the text field and hits enter, the system will assume the first submit button was hit.
So, here, it would be good to go for not having mulitple submit
buttons for end user point of view
You can have multiple submit buttons in the form, no problem. They may have the same name, type etc, but just assign them different values. Like Submit Button 1 can have value="hi" and Button 2 can have value="bye".
Then when the action function is called for the button, all you have to do when entering the function is do a check with: $(this).val
HTML:
<input type="submit" name="button1" value="hi"/>
<input type="submit" name="button2" value="bye"/>
jQuery:
$(function() {
$("#lets_search").bind('submit',function() {
var value = $(this).val();
if(value == "hi")
do_something;
else
do_something_else;
});
});
I have a website started where I want to have 2 separate submit buttons, one of which will take data entered and do some calculations to it to display on the same screen. I've got this successfully working with:
<form id="form1" name="form1" method="post" onsubmit="" onreset="" action="programname.php">
<input type="submit" name="calc" value="Find Angle">
and then I use:
if (!isset($_POST['submit'])){
Do actions, display calculations}
Now I want a second submit button that still grabs the data they entered but then goes to a different address. Is there an elegant way to do this?
You could add an onclick method to the new submit button that will change the action of the form and then submit it.
<script type="text/javascript">
function submitForm(action) {
var form = document.getElementById('form1');
form.action = action;
form.submit();
}
</script>
...
<form id="form1">
<!-- ... -->
<input type="button" onclick="submitForm('page1.php')" value="submit 1" />
<input type="button" onclick="submitForm('page2.php')" value="submit 2" />
</form>
You can change the form action by using formaction="page1.php" in button property .
<form id="form1" name="form1" method="post" onsubmit="" onreset="" action="programname.php">
<input type="submit" name="calc" value="Find Angle">
<input type="button" type="submit" formaction="page1.php">Action 0</button>
<input type="button" type="submit" formaction="page2.php">Action 1</button>
</form>
Note: The formaction attribute of the button tag is not supported in Internet Explorer 9 and earlier versions.
The best way to deal with multiple submit button is using switch case in action script
<form action="demo_form.php" method="get">
Choose your favorite subject:
<button name="subject" type="submit" value="html">HTML</button>
<button name="subject" type="submit" value="css">CSS</button>
<button name="subject" type="submit" value="javascript">Java Script</button>
<button name="subject" type="submit" value="jquery">jQuery</button>
</form>
Action / Server Side script:
demo_form.php
<?php
switch($_REQUEST['subject']) {
case 'html': //action for html here
break;
case 'css': //action for css here
break;
case 'javascript': //action for javascript here
break;
case 'jquery': //action for jquery here
break;
}
?>
Ref: W3Schools
Another approach is that You can create and Use some session variable to achieve it easily.
E.g. $_SESSION['validate'].
HTML and PHP Code for buttons
<button type="submit" id="first_submit" style="<?php echo isset($_SESSION['validate'])?'display:none':'';?>">first submit</button>
<button type="submit" id="second_submit" style="<?php echo isset($_SESSION['validate'])?'':'display:none';?>">second submit</button>
jquery and ajax Script
<script>
$(document).ready(function(){
$("#form").on('submit', function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'handler-file.php',
data: new FormData(this),
dataType: "json",
enctype: 'multipart/form-data',
contentType: false,
cache: false,
processData:false,
error:function(error){
//your required code or alert
alert(error.responseText);
},
success: function(response){
if(response.status=='1')
{
//your required code or alert
$('#first_submit').hide();
$('#second_submit').show();
}
else if(response.status=='2')
{
//your required code or alert
$('#first_submit').show();
$('#second_submit').hide();
}
else
{
//your required code or alert
}
}
});
});
});
</script>
Handler PHP File
<?php
session_start();
$result['status']='0';
$result['error']='';
if(!isset($_SESSION['validate']))
{
if(!isset($_FILES['file']))
{
$result['error'].='[Er-02 file missing!]';
}
else
{
//your other code
$_SESSION['validate'] = true;
$result['status']='1';
}
}
else if($_SESSION['validate']==true)
{
if(!isset($_FILES['file']))
{
$result['error'].='[Er-03 Validation file missing!]';
}
else
{
//your other code
unset($_SESSION['validate']);
$result['status']='2';
}
}
else
{
$result['error'].='[Er-01 Invalid source!]';
}
echo json_encode($result);
?>
It may not be the optimal or efficient solution. My level of experience is not too much, so I came up with this solution what served my purpose best after all the solutions available but with their limitations. This was not anywhere so thought to write it here.
Note: You may notice it includes some other parts like response, success and error handling between presentation, script and backend file.
Hope it helps!
Hey Friends
i am having one forms and two button, and some text fields,what i need it if i click button 1 then the details in the text box should be POST to Page1.php if i click Button2 the details in the text box should be POST to Page2.php, i am having 8 text boxes to do the in form, how can i do that?
Let's suppose your button one id is btn1 and second has btn2 and form name is frm, you can do something like this:
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
btn1.onclick = function(){
document.forms['frm'].action = 'page1.php'
document.forms['frm'].submit(); // submit the form
};
btn2.onclick = function(){
document.forms['frm'].action = 'page2.php'
document.forms['frm'].submit(); // submit the form
};
A PHP solution would be:
<form action='' method='post'>
<input name='inputText' /><br />
<button value='1' name='whichOption'></button><br />
<button value='2' name='whichOption'></button><br />
</form>
At the top of the page this form is in, put this:
<?php
if(isset($_POST['whichOption']) {
switch($_POST['whichOption']) {
case 1: /* do something */ break;
case 2: /* do something else */ break;
}
}
?>
"something" is an include, a session variable set, or whatever you like.
Try this:
<input type="button" value="page1" onclick="this.form.action='Page1.php'; this.form.submit();" />
<input type="button" value="page2" onclick="this.form.action='Page2.php'; this.form.submit();" />
Why not just use the same page? When I need multiple submit alternatives I simply use submit buttons with different names:
<input type="submit" name="submit-save" value="Save" />
<input type="submit" name="submit-delete" value="Delete" />
When I need to know what action it is, I just check which data is sent:
if(isset($_POST['submit-save']))
{
//Do something
}
elseif(isset($_POST['submit-delete']))
{
//Do something else
}
Html:
<input id="Button1" value="Button1" type="button" /><br />
<input id="Button2" value="Button2" type="button" /><br />
<textarea id="TextBox1" cols="40" rows="5"><br />
<textarea id="TextBox2" cols="40" rows="5">
jQuery:
function PostToPage(DOOMid,uri) {
var vDOOMEl = $("#" + DOOMid);
$.ajax({
type: 'POST',
url: uri,
data: ({text : vDOOMEl.innerHTML}),
success: function() {},
dataType: "html"
});
}
function init() {
$('#Button1').click(function(e){
PostToPage('TextBox1','Page1.php');
});
$('#Button2').click(function(e){
PostToPage('TextBox2','Page2.php');
});
}
window.onload=init;
PHP:
<?php
//do something with $_POST['text'];
?>
You must download jQuery, and use it for this solution