I have deigned a simple HTML form but i want to submit it to a PHP to process but I want to submit the form not with the help of Button / Submit but with the help of anchor Tag
Submit
how to do it
the form is like
<form action="" method="post">
<input type="text" name="name" />
<input type="email" name="email" />
Submit
</form>
I want to post this form to the same page
In my opinion, I would keep using a button of type submit and just style it to look like a link with CSS.
button#submit {
background:none;
border:none;
padding:0;
color:#069;
text-decoration:underline;
cursor:pointer;
}
<button id="submit" type="submit">Submit</button>
Javascript can help you.
Submit
But of course you can style your submit button with CSS
if you REALLY want to do it this way you have to use javascript to submit the form in some way.
You can either add an onclick event to the link or you can add an onkeypress to the text fields so when the user hits ENTER it submits the form.
However, this is typically bad practice. Why not just use the button or input[type="submit"] tag? If the clients disable javascript then they'll never be able to submit your form, unless that's your goal.
Is there a particular reason where you need to have the form submit via an anchor tag?
As has been stated above, you can use JavaScript to submit the form, but if you run into the rare case of a user having JavaScript off, the form becomes unusable. I'd stick with the suggestion of styling the button to look like a link using CSS.
Related
I have a form table with checkboxes. I want the user to check whichever url (element) they want to delete, press a button which then calls a "delete.php" file which deletes that record in mysql.
What I am trouble finding out how to do is to call the delete.php file with a button outside of the form. I know that you would typically use a submit button inside the form but in this situation, I am exploring whether it is possible to do it with a button that is outside it.
An image is attached to illustrate why I want to do that. The url menu on the bottom is called by a function because I want it to be modular. So I think the "Delete BM" question needs to be able to action the deletion of the checked checkbox.
I have googled a variety of search cases which dont really answer my question:
How to send checkbox state through form in a table
Search "php how to call php file outside form"
Search "how to call php file without submit button"
Call php file without using form action
Submit without submit button
Use following code for submitting your form.
and use search keyword in google "submit form without submit button in php".
<form id="jsform" action="whatever you want">
// input fields
</form>
<script type="text/javascript">
document.getElementById('jsform').submit();
</script>
For Your Problem. Below are Sample code
<input type='checkbox' class='test' name='test' value='1'>
<input type='checkbox' class='test' name='test' value='2'>
<input type='checkbox' class='test' name='test' value='3'>
<input type='checkbox' class='test' name='test' value='4'>
is somthing your checkboxes then following is the script
<script>
$(function(){
$(".test").click(function(){
var checkBoxValue = $(this).val(); // value of checkbox
$.ajax(
{
url: "" // url of page where delete funcnality is written
// and id of field
})
.done(function(data)
{
// success
});
});
});
</script>
In the past I have come across this sort of issue, of wanting a submit button outside of a form for layout/presentation reasons.
Having given it some thought and reading around, I learned there were some very good reasons to avoid doing so;
Changing the default behaviours of the browser is generally a bad idea, you make extra work for yourself and in the end is likely to complicate things and often also lead to confusing users. (for example: what happens if user clicks enter, will it still submit the form?)
Users that do not have up to date javascript or do not have it switched on, will not be able to use your form / site.
You can achieve what you want and still use the standard html submit button. Using CSS to make it appear as a text link, great example;
How to make a submit button display as a link?
In your example I personally would just have the submit button appear as a button (styled to match sites design) directly under the checkboxes, separate from your menu below. As this makes the most sense to me, and would save you some work as you wouldn't need to fiddle with your menu function.
However if you wanted to achieve exactly as you set out, you could pass the button (html string) as a paramenter into your function so that it can be entered into the menu list, then return all the menu html string and print it inside your form;
<form>
<input type="checkbox" name="1" /><br />
<input type="checkbox" name="2" /><br />
<input type="checkbox" name="3" /><br />
<?php
$buttonHtml = '<input type="submit" name="delete_bm" value="delete bm" class="submitLink" />';
echo navMenu($buttonHtml);
?>
</form>
Now the submit tag is within the form tag (and will behave as as intended), it is simply a case of using CSS to style these and any other elements to give you the presentation that you desired (might need to remove padding, margin etc. from form element).
.submitLink {
font: inherit;
background-color: transparent;
text-decoration: underline;
border: none;
color: blue;
cursor: pointer;
}
.submitLink:focus {
outline: none;
}
form{
padding: 0;
margin: 0;
}
The big upside is that now you do not need any un-necessary javascript, giving maximum accessibility and maintaining the functionality that users expect.
Also feels less complicated to me and that it is less likely to need updating.
Side note: if your form allows users to delete multiple bookmarks at once (seems like it should) you might want the text on the button to read; delete bookmark(s) Hope you had considered that ;)
You can use jQuery AJAX for this.
Because, calling PHP script with form submit will cause total page refresh.
you need to just delete the selected checkbox row and delete the entry from database.
I will explain the pseudo logic for it.
On click of the link Delete BM, call javascript for AJAX.
First open a confirm dialog.
Through AJAX, pass the id to be deleted to backend PHP file.
In PHP file, write the code to delete the record.
If record gets deleted, echo success there else failure.
If in AJAX, we get results success, delete the respective rows.
jQuery $.ajax()
I got two forms.
First form contains a button which will mark the task done and retrieve a new task.
Second form is for submitting translated content or work on already saved content.
So it contains a textarea and a save button.
PHP + Mysql will output already saved work in the form if anything exists.
I want to make the Task Done button unavailable in the first form, if the textarea in the second form is edited and the Task done button should appear after the save button have been pressed but I am not sure what the best way is to solve this problem.
I think the best solution will be Jquery but I am no expert.
Use a combination of CSS and Javascript manipulation.
Live preview
HTML
<form action="" method="POST">
<button id="btnTaskDone">Task Done</button>
</form>
<form action="" method="POST">
<textarea name="task" cols="20" rows="5">...</textarea> <br />
<button id="btnSaveTask">Save</button>
</form>
CSS
#btnSaveTask {
background: orange;
}
#btnTaskDone {
background: blue;
display: none; /* This part is the important part */
}
jQuery
$('#btnSaveTask').click( function(btn) {
$('#btnTaskDone').show();
});
I want to submit a form to the database and I want to use a sprite image instead of regular submit buttons..
Here is the images I'm using
<div class="cancel">
</div>
<div class="save_and_new">
</div>
<div class="save_and_quit">
</div>
if(isset(......)){
}
I have no idea what to put in the isset function ...
Do i need to set names to the images? or what?
You could just use
<input type="image src="/your/button/image/here.gif" />
instead of the images nested inside anchors.
The only problem would be that you can't directly sense which button exactly was pressed because <input type="image" /> does not post a value. If you really need multiple post buttons that also post a value:
<button name="button" value="action1"><img src="/your/image/here.gif" alt="action 1" /></button>
<button name="button" value="action2"><img src="/your/image/here.gif" alt="action 2" /></button>
You can do it in Jquery. Try this,
$("#save_and_new_btn").click(function() {
$("#form").submit();
});
#form is id of form
Generally, a form is submitted when the user presses a submit button. However, sometimes, you may need to submit the form programmatically using JavaScript.
JavaScript provides the form object that contains the submit() method. Use the ‘id’ of the form to get the form object.
For example, if the name of your form is ‘myform’, the JavaScript code for the submit call is:
document.forms["myform"].submit();
But, how to identify a form? Give an id attribute in the form tag
<form id='myform' action='formmail.pl'>
Here is the code to submit a form when a hyperlink is clicked:
<form name="myform" action="handle-data.php">
Search: <input type='text' name='query' />
Search
</form>
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
</script>
Source: How to Submit a Form Using JavaScript
You need to use javascript.
Find a form which has to be submitted. Then add actions to each elements. Whene they're clicked you are submitting (or canceling) form.
What's the best practice to create an image button that sends a value and runs a php script (that executes a mySQL query) when clicked. The button has to be an image and not a default submit type of button. I've been googling this for a few days and I still can't find a sutable answer. I could use GET and make a few image buttons (images with links that contain values) on the page that redirect to itself which then I can collect with
if (isset($_GET['variable']))
but I don't really want the user to see the values. I tried creating a form which has only one button in it that when clicked will reload the page and I could capture and use the value with
if (isset($_POST['submit_value'])) {$var = $_POST['submit_value']; }
but I can't seem to make this work, at least not when the button is an image. So if anyone knows a decent way to do this, please share. It doesn't have to be AJAX e.g. page reload is perfectly fine. I'm guessing that I need JavaScript to do this but I don't really know JavaScript so a working example would be nice.
SELF-ANSWER
Thank you for all of your answers. I found that the simplest working way to go with is to create a form with an input type of image that makes the submit and an input type of hidden that carries that value.
<form action="some_page.php" method="POST">
<input type="hidden" name="variable" value="50" />
<input type="image" src="image.png" name="submit" />
</form>
And on the PHP side I use this to catch the value.
if (isset($_POST['variable'])) { $var = $_POST['variable']; }
This is the most suitable solution for my problem. Thank you all again for your speedy responses.
Image buttons are pretty much a mess! :(
I would suggest using CSS to put background-image to ordinary <input type="submit">. This way value will always be visible (eg. sent in request) when user submits the form.
For example:
.myImageSubmitButton{
width: 100px;
height: 22px;
background: url(images/submit.png) no-repeat;
border: none;
/** other CSS **/
}
the bad thing here is that you must set width and height according to image used...
if it must be a <button> you can redirect the form to another script like this:
<form action="somescript.php" method="POST" name="myform">
<input type="submit" name="submit" value="normal submit">
<button name="foo" type="button" value="bar"
onclick="document.myform.action = 'someotherscript.php';
document.myform.submit()">
<img src="someimage.png">
</button>
</form>
or change a hidden field and post the form to the same page like this:
<form action="somescript.php" method="POST" name="myform">
<input type="submit" name="submit" value="normal submit">
<input type="hidden" name="action" id="hidden_action" value="normal_action">
<button name="foo" type="button" value="bar"
onclick="document.getElementById('hidden_action').value = 'special_action';
document.myform.submit()">
<img src="someimage.png">
</button>
</form>
Just a note: if the user wants to, they CAN retrieve the values, for example with Firebug. This cannot be changed.
Also, HTML buttons can be images. See this.
Or use XMLhttprequest on an image wih onclick. There are many tutorials for XMLHTTPRequest. For example this.
You can make a POST form and use the image as a submit button without javascript:
<input type="image" src="myimage.gif" name="submit">
invoke a submit using onclick event on the image
<img src="image.jpg" onclick="document.formname.submit();" />
make submit button with image like that
<input type="submit" style="background-image:url(image); border:none;
width:10px;height:10px; color:transparent;" value=" " name="submit_value"/>
I think the only two ways of doing this are with gets (like you've stated) or with a form where the image button is an input with type submit.
I'm pretty sure you can change the styling of a submit button so that it has a background image, if not then ignore my ignorance.
I am using an image instead of a submit button for search option and use onclick events to load the results using ajax in php.Now I need to load results by hit enter also.Is their any ways to update my application without changing the image.
Thanks
Sure, add <input type="submit" style="display:none;" /> to the end of your form, should trick the browsers into allowing the Enter key to submit your form.
As far as getting the same functionality as your AJAX onclick event: You should be tying your ajax function to the <form>'s submit event instead of the <input>'s click event.
jsfiddle demonstration (uses jQuery for ajax ease, but your event doesn't have to)
I don't know what javascript library you're using, but I'll use jQuery in my example.
<script>
$(document).ready(function() {
$("form#interesting").bind("submit",function() {
$.get("target_page.php".function() {
// Callback functionality goes here.
});
});
});
</script>
<form id="interesting">
Enter your input: <input type="text" name="interesting_input" />
<!-- input type="image" is a way of using an image as a submit button -->
<input type="image" src="submit_button_image.gif" />
</form>
Hmm, There are several things I can think about.
fitst one - someone mentioned that you can style submit button as an image. Good idea and it's easy. this tutorial was posted as an answer some time ago http://www.ampsoft.net/webdesign-l/image-button.html .
Another problem is, you bind your submit event to onclick, but the natural submit for form is onsubmit. So if you hit enter on form input the form receives onsubmit event. You have to bind your JS to it.
It works genrally as in answer from #phleet when you use jquery, when you don't use any library, you can do something like
<form onsubmit="YOUR_JS_HERE">.....</form>
like in onclick. I also recommend using jQuery, though.