I have written this html:
Add Comment
<div id="addcomment">
<form name="comment" action="" method="post">
<input type="text" name="addcomment" size="80" />
<input type="submit" value="Comment">
</form>
What I want is when I click the "Add comment" then form should be displayed in place of "Add comment" just like on "stackoverflow". How can I make this happen??
Here's a quick and dirty proof, optimize from here:
CSS:
#addcomment {
display : none;
}
.addcomment:active {
display : none;
}
.addcomment:active + #addcomment {
display : block;
position : absolute;
top : 5px;
}
http://jsfiddle.net/7uax74qd/
Use javascript for it...
Add Comment
<div id="addcomment" style="display:none;">
<form name="comment" action="" method="post">
<input type="text" name="addcomment" size="80" />
<input type="submit" value="Comment">
</form>
THEN IN JAVASCRIPT write a function and call that in anchor tag..
function show()
{
document.getElementById('add').style.display='none';
document.getElementByid('addcomment').style.display='block';
}
I am using the following code to palce two buttons in a form. But The buttons will come one by one. I mean to say, one button will come first and just below that another button will come.
code snippet
<form name="myform" action="xxxx.cgi" method="POST">
<input type="submit" value="hello" name="d">
</form>
<form name="myform" action="yyyy.cgi" method="POST">
<input type="submit" value="hai" name="dd">
</form>
I am able to place two buttons in the same row with the following code.
<form name="myform" action="xxxx.cgi" method="POST">
<input type="submit" value="hello" name="d">
<input type="submit" value="hai" name="dd">
</form>
But both button will be loading xxxx.cgi on click. What can I do to place two buttons on a web page on the same row in which first button will be loading xxxx.cgi on click and second button will be loading yyyy.cgi on click. Please help
By
Dominic
You can use either float:left for form element or you can use display: inline-block
form{display: inline-block;}
See http://jsfiddle.net/
Add a style like this in your CSS
form{
float:left;
}
See this fiddle
I have used this markup as this is the right one
<form name="myform" action="xxxx.cgi" method="POST">
<input type="submit" value="hello" name="d">
</form>
<form name="myform" action="yyyy.cgi" method="POST">
<input type="submit" value="hai" name="dd">
</form>
the other one uses two buttons with same name.
One problem with the above code is that it uses two forms in the same page which can create problems sometime.
So use just one form
See the fiddle for that..
Html
<form name="myform" class='myform' action="xxxx.cgi" method="POST">
<input type="submit" value="hello" name="d">
</form>
<form name="myform" class='myform' action="yyyy.cgi" method="POST">
<input type="submit" value="hai" name="dd">
</form>
You can put a style on both forms with the following css.
.myform
{
float: left;
}
hey #Dominic here is what you can do to fix the problem.You just have to use some javascript.
create two forms but place both buttons in one form
<body>
<form action='1.php' name='first'>
<input type="button" value='1.php' id='one'/>
<input type="button" value='2.php' id='two'/>
</form>
<form action='2.php' name='second'>
</form>
</body>
Trigger actions using javascript
var one = document.getElementById('one');
one.onclick=function(){
alert(document.first.submit());
}
var two = document.getElementById('two');
two.onclick=function(){
alert(document.second.submit());
}
I have a basic html form with a search box. depnding if the user inputs searchA or searchA-B, I need to redirect him to two different places (url is formatted differently).
How would you suggest I do that?
<form name="ajaxSearchFrm" action="url1 or url2 depending on the value of searchText" method="GET">
<input type="text" id="searchText" name="searchText" style="width:200px;" onKeyUp="searchSuggest();" autocomplete="off">
<input type="submit" value="Search" style="background-color: #fff; font-family: verdana, arial, helvetica; color: black; font-size: 10px;" />
<div id="formSuggestLayer"></div>
</form>
You'll want to use javascript to evaluate the contents of the text box. Depending on the value, change the action of the form then submit the form via javascript. You'll have to change your submit button to a regular button with an onClick event though.
JavaScript:
function EvaluateForm()
{
if( document.getElementById('searchText').value == 'A' ){
//submit to A
document.ajaxSearchFrm.action = "myurlA.com";
}
else{
//submit to b
document.ajaxSearchFrm.action = "myurlB.com";
}
document.forms["ajaxSearchFrm"].submit();
return false;
}
HTML:
<form name="ajaxSearchFrm" action="" method="GET">
<input type="text" id="searchText" name="searchText" style="width:200px;">
<input type="button" value="Search" onClick="return EvaluateForm();" />
<div id="formSuggestLayer"></div>
</form>
It is possible to use a HTML anchor link...
link
...to produce a GET request to foo with query params bar=baz.
Is it also possible to write the anchor link in such a way that it produces a POST request to foo with the params bar=baz encoded in the HTTP request body (like a form with method POST does) ?
No
Alternatives: You can modify the request made by the anchor tag using javascript,
or
use a form, and emulate a anchor by styling the submit button to look like a link
In the html file the anchor file doesn't support the POST values.
You can get the post values for html file only through the form tag.
<form action="test.php" method="post" >
<input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
You can create a hidden form with the values you want to submit; and you link can trigger the submit() action on that form. This is easily done with jquery (or your favorite javascript library).
This is untested, but something like this should do it:
<form method="POST" id="the_form" action="foo/">
<input type="hidden" name="bar" value="baz" />
</form>
Send values
<script type="text/javascript">
$('#submit_link').click($('#the_form').submit());
</script>
As Matt Ball commented, you can accomplish this with a form and no JS:
<form method="post" action="YOUR_ACTION">
<input type="hidden" name="foo" value="bar" />
<input type="submit" value="link" class="submitLink" />
</form>
and then style the submit to look like a regular link:
<style type="text/css">
input.submitLink {
background: none;
border: medium none;
color: blue;
cursor: pointer;
margin: 0;
padding: 0;
text-decoration: underline;
}
</style>
This question already has answers here:
Multiple submit buttons in an HTML form
(27 answers)
Closed 3 years ago.
I have a form that has three submit buttons as follows:
<input type="submit" name="COMMAND" value="‹ Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset" name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next ›">
<input type="button" name="NOTHING" value="Skip ›" onclick="location = 'yada-yada.asp';">
The row of buttons is a mix of submit, reset and JavaScript buttons. The order of buttons is subject to change, but in any case the save button remains between prev and next buttons.
The problem here is that when a user hits Enter to submit the form, the post variable "COMMAND" contains "Prev"; normal, as this is the first submit button on the form. I however want the "Next" button to be triggered when the user submits the form via the Enter button. It is kind of like setting it as the default submit button, even though there are other buttons before it.
The first button is always the default; it can't be changed. Whilst you can try to fix it up with JavaScript, the form will behave unexpectedly in a browser without scripting, and there are some usability/accessibility corner cases to think about. For example, the code linked to by Zoran will accidentally submit the form on Enter press in a <input type="button">, which wouldn't normally happen, and won't catch IE's behaviour of submitting the form for Enter press on other non-field content in the form. So if you click on some text in a <p> in the form with that script and press Enter, the wrong button will be submitted... especially dangerous if, as given in that example, the real default button is ‘Delete’!
My advice would be to forget about using scripting hacks to reassign defaultness. Go with the flow of the browser and just put the default button first. If you can't hack the layout to give you the on-screen order you want, then you can do it by having a dummy invisible button first in the source, with the same name/value as the button you want to be default:
<input type="submit" class="defaultsink" name="COMMAND" value="Save" />
.defaultsink {
position: absolute; left: -100%;
}
(note: positioning is used to push the button off-screen because display: none and visibility: hidden have browser-variable side-effects on whether the button is taken as default and whether it's submitted.)
My suggestion is don't fight this behaviour. You can effectively alter the order using floats. For example:
<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>
with:
#buttons { overflow: hidden; }
#buttons input { float: right; }
will effectively reverse the order and thus the "Next" button will be the value triggered by hitting enter.
This kind of technique will cover many circumstances without having to resort to more hacky JavaScript methods.
Set type=submit to the button you'd like to be default and type=button to other buttons. Now in the form below you can hit Enter in any input fields, and the Render button will work (despite the fact it is the second button in the form).
Example:
<button id='close_button' class='btn btn-success'
type=button>
<span class='glyphicon glyphicon-edit'> </span> Edit program
</button>
<button id='render_button' class='btn btn-primary'
type=submit> <!-- Here we use SUBMIT, not BUTTON -->
<span class='glyphicon glyphicon-send'> </span> Render
</button>
Tested in FF24 and Chrome 35.
Quick'n'dirty you could create an hidden duplicate of the submit-button, which should be used, when pressing enter.
Example CSS
input.hidden {
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
outline: none;
border: 0px;
}
Example HTML
<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />
If someone now hits enter in your form, the (hidden) next-button will be used as submitter.
Tested on IE9, Firefox, Chrome and Opera
If you're using jQuery, this solution from a comment made here is pretty slick:
$(function(){
$('form').each(function () {
var thisform = $(this);
thisform.prepend(thisform.find('button.default').clone().css({
position: 'absolute',
left: '-999px',
top: '-999px',
height: 0,
width: 0
}));
});
});
Just add class="default" to the button you want to be the default. It puts a hidden copy of that button right at the beginning of the form.
I'm resurrecting this because I was researching a non-JavaScript way to do this. I wasn't into the key handlers, and the CSS positioning stuff was causing tab ordering to break since CSS repositioning doesn't change tab order.
My solution is based on the response at https://stackoverflow.com/a/9491141.
The solution source is below. tabindex is used to correct tab behaviour of the hidden button, as well as aria-hidden to avoid having the button read out by screen readers / identified by assistive devices.
<form method="post" action="">
<button type="submit" name="useraction" value="2nd" class="default-button-handler" aria-hidden="true" tabindex="-1"></button>
<div class="form-group">
<label for="test-input">Focus into this input: </label>
<input type="text" id="test-input" class="form-control" name="test-input" placeholder="Focus in here and press enter / go" />
</div>
1st button in DOM
2nd button in DOM
3rd button in DOM
Essential CSS for this solution:
.default-button-handler {
width: 0;
height: 0;
padding: 0;
border: 0;
margin: 0;
}
Another solution, using jQuery:
$(document).ready(function() {
$("input").keypress(function(e) {
if (e.which == 13) {
$('#submit').click();
return false;
}
return true;
});
});
This should work on the following forms, making "Update" the default action:
<form name="f" method="post" action="/action">
<input type="text" name="text1" />
<input type="submit" name="button2" value="Delete" />
<input type="submit" name="button1" id="submit" value="Update" />
</form>
As well as:
<form name="f" method="post" action="/action">
<input type="text" name="text1" />
<button type="submit" name="button2">Delete</button>
<button type="submit" name="button1" id="submit">Update</button>
</form>
This traps the Enter key only when an input field on the form has focus.
You should not be using buttons of the same name. It's bad semantics. Instead, you should modify your backend to look for different name values being set:
<input type="submit" name="COMMAND_PREV" value="‹ Prev">
<input type="submit" name="COMMAND_SAVE" value="Save">
<input type="reset" name="NOTHING" value="Reset">
<input type="submit" name="COMMAND_NEXT" value="Next ›">
<input type="button" name="NOTHING" value="Skip ›" onclick="window.location = 'yada-yada.asp';">
Since I don't know what language you are using on the backend, I'll give you some pseudocode:
if (input name COMMAND_PREV is set) {
} else if (input name COMMAND_SAVE is set) {
} else if (input name COMMENT_NEXT is set) {
}
bobince's solution has the downside of creating a button which can be Tab-d over, but otherwise unusable. This can create confusion for keyboard users.
A different solution is to use the little-known form attribute:
<form>
<input name="data" value="Form data here">
<input type="submit" name="do-secondary-action" form="form2" value="Do secondary action">
<input type="submit" name="submit" value="Submit">
</form>
<form id="form2"></form>
This is standard HTML, however unfortunately not supported in Internet Explorer.