I have a form with a button inside it which I need to hide.
<form method="get">
<input type="hidden" name="id" value="7245">
<input type="hidden" name="action" value="removesubmissionconfirm">
<button type="submit" class="btn btn-secondary" title="">Remove submission</button>
</form>
There are multiple forms with the exact same values as the above, the only difference being the value="removesubmissionconfirm". Is it possible to hide the button based on that value using only css?
I've tried a lot of things and nothing seems to work.
TIA.
You can do it using the attribute selector and the + selector :
input[value="removesubmissionconfirm"] + button {
display: none;
}
<form method="get">
<input type="hidden" name="id" value="7245">
<input type="hidden" name="action" value="removesubmissionconfirm">
<button type="submit" class="btn btn-secondary" title="">Remove submission</button>
</form>
Generally no, but it may be in this specific example, considering the fact that the button comes directly after the hidden action field. Try this:
input[value="removesubmissionconfirm"] + button {
display: none;
}
input[value="removesubmissionconfirm"] + button {
display: none;
}
<form method="get">
<input type="hidden" name="id" value="7245">
<input type="hidden" name="action" value="removesubmissionconfirm">
<button type="submit" class="btn btn-secondary" title="">Remove submission</button>
</form>
Related
I'm using bootstrap on my Symfony app and in my index action, I display a table with all items and two buttons to update or delete an item. In fact I'm not using to buttons I use one button to modify the entity and a form with hidden inputs and the submit button to delete this item.
Currently the submit button is displayed below the update button and what I want is to display the two buttons aligned.
Thanks by advance if you have the solution of my problem
here is my code:
<td>
Modifier
<form action="/app_dev.php/quotes/2/delete">
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
</form>
</td>
first thing I don't understand that why you are using a form. you can easily call the desired URL with a parameter on an onClick event.
But still if it is necessary then you can add a property to form and it's element to be style="display:inline-block;" or can write a separate css.
form {
display:inline-block;
}
this will be helpful
<style>
.div1, .div2{
display: inline-block;
}
</style>
<body>
<td>
<div class="div1">Modifier</div>
<div class="div2"><form action="/app_dev.php/quotes/2/delete">
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
</form></div>
</td>
</body>
HTML
<td class="button-container">
Modifier
<form action="/app_dev.php/quotes/2/delete">
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
</form>
</td>
CSS
.button-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
Additionally, you can make button 100%
.button-container .btn {
width: 100%;
}
You can accomplish that by many ways. One simple form would be to add float: left to the link, like this:
<td>
Modifier
<form action="/app_dev.php/quotes/2/delete" >
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
</form>
</td>
<td class="flex">
Modifier
<form action="/app_dev.php/quotes/2/delete">
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
</form>
</td>
in your css :
.flex {
display: flex;
}
good source for display with flex https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox (in french)
Ok thank you all for your answers, I find out to align those two buttons by using bootstrap flex classes, here the entiere solution:
<td class="d-flex flex-row">
{{ 'wallofquotes.ui.update'|trans }}
<form method="POST" action="{{ path('wallofquotes_quote_delete', {'id': quote.id}) }}">
<input type="hidden" name="_method" value="DELETE">
<button type="submit" class="btn btn-sm btn-danger">{{ 'wallofquotes.ui.delete'|trans }}</button>
</form>
</td>
I want to avoid line break between the buttons login and Register,So that the two buttons come in the same line
<h1>Are You ready to take the quiz</h1>
<form action="link1">
<input type="submit" value="Login" />
</form>
<form action="link2">
<input type="submit" value="Register" />
</form>
You can use css for that.
form {
display: inline-block;
}
In order to prevent every form element you're using to get inlined, I'd attatch a class to those which you want to inline.
<form class="inline" action="link1">
<input type="submit" value="Login" />
</form>
<form class="inline" action="link2">
<input type="submit" value="Register" />
</form>
form.inline {
display: inline-block;
}
Demo
Here a solution, I used a container : sameLine so evrithing is in that div will be on the same line
.sameLine{white-space: nowrap;}
.sameLine * {
display: inline;
}
<h1>Are You ready to take the quiz</h1>
<div class="sameLine">
<form action="link1">
<input type="submit" value="Login" />
</form>
<form action="link2">
<input type="submit" value="Register" />
</form>
</div>
I'm creating a web app and can't seem to figure this out.
I have a button here:
<form action="test" method="post" >
<input type="Submit" name="Submit" class="btn btn-lg btn-default">
</form>
When I test the code on my website, the button shows as follows:
How can I change the text of the button so that instead of it saying "Submit" it says "Home"? I've tried changing the name property of the button, but it still says "Submit".
I don't really know much about CSS and HTML, so if someone can walk me through on how to do this- that would be great.
Thanks :)
<form action="test" method="post" >
<input type="Submit" name="Submit" value="Home" class="btn btn-lg btn-default">
</form>
Home ---- > Change it to whatever you want
You can use value="your text here" inside, as follow:
<input type="Submit" name="Submit" value="My Text Here" class="btn btn-lg btn-default">
Do not forget to add / for better coding:
<input type="Submit" name="Submit" value="My Text Here" class="btn btn-lg btn-default"/>
<form action="test" method="post" >
<input type="Submit" value="Click Here" name="Submit" class="btn btn-lg btn-default">
</form>
Too easy to change your input type button name
use value attribute in tag
i added a spinet this makes things clear for you. :)
<form action="test" method="post" >
<input type="Submit" value="HOME" name="Submit" class="btn btn-lg btn-default">
</form>
As others have mentioned above, you have to set the value tag and that will be used as the display text. By default a submit button text is submit.
Alternatively, you can use javascript/jquery if you want to change the button text during runtime.
<form action="test" method="post" >
<input type="Submit" name="Submit" value="Click" class="btn btn-lg btn-default">
</form>
THe text of the button can be changed by value="watever"
<form action="test" method="post" >
<input type="Submit" name="Submit" Value="Home" class="btn btn-lg btn-default">
</form>
You can change via value atts
I need to select all <input type="submit"> elements, that have no class specifier.
With:
<input class="Submit" type="submit" value="Save" name="action_1">
<input class="Button" type="submit" value="Save as" name="action_2">
<input type="submit" value="Save and Continue" name="action_3">
<input class="Cancel" type="submit" value="Cancel" name="action_4">
It should select the 3rd one only.
I can imagine this CSS:
input[type="submit"]:not(ANY CLASS){
}
But, what should I write as "ANY CLASS"? Or is there a different approach alltogehter? I could enumerate all known classes there, but this is tedious and might change over time.
Note:
I am looking for a CSS-only solution. This makes this answer not a
duplicate.
I want to specify "no classes at all" not omitting one
single class. This makes this answer not a duplicate.
You could use :not([class]), which means select an input element that does not have a class attribute.
input[type="submit"]:not([class]){
color: red;
}
<input class="Submit" type="submit" value="Save" name="action_1">
<input class="Button" type="submit" value="Save as" name="action_2">
<input type="submit" value="Save and Continue" name="action_3">
<input class="Cancel" type="submit" value="Cancel" name="action_4">
You can use a selector like this:
input:not([class]) {
/* style for inputs without classes */
}
JSFIDDLE DEMO
reference
I've got a table with few forms. The date is submit button:
And this is the same table without form tag(only input type="submit"):
As you can see, form tag adds new line. How can I avoid this?
The code:
<form id="command" action="/wifi/selection" method="POST">
<input type="hidden" name="beginDate" value="2014-06-30">
<input type="hidden" name="endDate" value="">
<input type="hidden" name="apId" value="1824">
<input type="hidden" name="ssidId"
value="42">
<input type="submit" class="btn btn-link"
value=" 2014-06-30" />
<input type="hidden" name="_csrf" value="812810c6-9e41-434c-baec-b4db1680ce7a" />
</form>
Set style="display: inline;" on the form might do it.
try this:
<style type="text/css'>
form {display:inline; margin:0px; padding:0px;}
</style>
This link will help: How to prevent newline/line break within a <form></form>?