I’m kinda of stuck.
I’m using html5 required for a very simple validation, and I have a checkbox that only shows up if you meet some conditions. You then have to agree with terms and check the checkbox.
The problem is when you don’t hit conditions and checkbox reminds hidden then its not posible to submit. It should only be required if you see it.
.terms{
display: none;
}
<form>
<p><input class="terms" type="checkbox" id="checkId" required>Terms & Conditions</p>
<input type="submit" name="submit" value="Submit" id="submit" />
</form>
This will work
<form>
<p><input class="terms" type="checkbox" id="checkId" name="checkId" checked style="visibility: hidden;">Terms & Conditions</p>
<input type="submit" name="submit" value="Submit" id="submit" />
</form>
Related
Why the submit button doesn't show the text?
It shows:
The tag for it: <input type=submit name="OK" value=""/>
Thought <input type=submit name=OK value=""/> would help,but not.
The value attribute will be shown in the button.
<input type=submit name=OK value="button"/>
Try this:
<input type="submit" name="OK" value="Submit Label"/>
See:
https://www.w3schools.com/tags/att_input_type.asp
You have to define into value="" the text to display.
Example :
<input type=submit name="OK" value="OK" />
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
Should I change "saveForm" to "Post"? Then where do I insert email address to send to?
yes you can do this with proper form
<form action="your page where you send the value"> <label>Name:
</label> <input type="text" name="name"> <label>Email:</label> <input
type="email" name="name"> <input type="submit" name="submit"> </form>
I cannot add the html form script here as this block does not allow me to. Can you view source at page at link: http://www.sparesite.co.za/index.html
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
My code is
<form method="post">
<input type="text" name="t1" id="t1">
<input type="text" name="t2" id="t2">
<input type="submit" name="s1" id="s1" value="Submit1" onclick='this.form.action="p1.php";'>
<input type="submit" name="s2" id="s2" value="Submit2" onclick='this.form.action="p2.php";'>
</form>
Now I want, if I click on submit1 p1.php should open and I can only access value of text1 and not text2.
Similarly, if I click on submit2 p2.php should open and I can only access value of text2 and not text1.
The pages are openning but I can access both the values ie t1 and t2
I only want to do it with html no js and jquery and I need to make only one form.
NO separate forms allowed.
You can use the attribute formaction on the submit button to change the current action of your form, without using JS. See formaction spec. In case you need to support older browsers like IE9- you can simply use webshim to polyfill it:
<script>
if(!('formAction' in document.createElement('input')){
webshim.polyfill('forms');
}
</script>
<form method="post">
<input type="text" name="t1" id="t1">
<input type="text" name="t2" id="t2">
<input type="submit" name="s1" id="s1" value="Submit1" formaction="p2.php">
<input type="submit" name="s2" id="s2" value="Submit2" formaction="p2.php">
</form>
hy sam,
Your question look like wrong may be you are asking to submit all form values in different action using two submit button in a single form.
may be this code will help you to submit values in different form action
<form method="post">
<input type="text" name="t1" id="t1">
<input type="text" name="t2" id="t2">
<input type="submit" name="s1" id="s1" value="Submit1" formaction="p1.php">
<input type="submit" name="s2" id="s2" value="Submit2" formaction="p2.php">
</form>
If you do not want to use javascript, the only solution that I can think of is to use two HTML forms.
<form method="post">
<input type="text" name="t1" id="t1">
<input type="submit" name="s1" id="s1" value="Submit1" onclick='this.form.action="p1.php";'>
</form>
<form method="post">
<input type="text" name="t2" id="t2">
<input type="submit" name="s2" id="s2" value="Submit2" onclick='this.form.action="p2.php";'>
</form>
I have a simple HTML form with multiple submit buttons and I want my application to act differently on whichever submit button I click.
Example:
<form method="POST">
<input type="submit" value="test" name="test" />
<input type="text" name="search_query" style="width: 300px; padding: 5px" value="some text">
<input type="submit" value="Search" name="search" />
<input type="text" name="search_query2" style="width: 300px; padding: 5px" value="some text">
<input type="submit" value="Search" name="search2" />
<input type="submit" value="GO" name="next" />
</form>
This works for me, and I know how to distinguish which button I clicked. The problem I have is that if I push Enter while editing the text-field then the first submit button gets clicked (the one named test). Is this possible to let the browser know (with HTML only - the whole point of this is to make it work with NO JavaScript) that I pushed Enter and it should send search with POST, not test?
So is there some kind of binding of text field to the submit button?
A solution to this problem would be to have multiple form elements, including your different submit buttons and the corresponding textfields.
I can't think of a solution with just one formular but no Javascript in use.
You could move the one you want to be submitted to first in that list, like so:
<form method="POST">
<input type="text" name="search_query" style="width: 300px; padding: 5px" value="some text">
<input type="submit" value="Search" name="search" />
<input type="submit" value="test" name="test" />
<input type="submit" value="GO" name="next" />
</form>
But it seems that your HTML is just poorly formed, I'd recommend Merguez's answer
Since your edit, there is no way to do this without Javascript/jQuery.
This would not be hard to do with PHP.
First: Change your buttons to actual controls:
becomes
<form method="POST">
<input type="text" name="search_query" style="width: 300px; padding: 5px" value="some
text" />
<button type="submit" name="actionB" onclick="javascript:checkBtn();" value="Search">Search</button>
<button type="submit" name="actionB" onclick="javascript:checkBtn();" value="Test">Test</button>
<button type="submit" name="actionB" onclick="javascript:checkBtn();" value="Go">Go</button>
</form>
Now, when the form is submitted, check the returned value of actionB. If it's "Search", then piece together your search URL using the returned value of search_query.
There is NO way to read variables using only HTML. JavaScript is required if you're not going to use a scripting language to do this. You can totally do this in native JavaScript. JQuery is NOT required for this relatively simple function.
<script language="JavaScript">
function checkBtn() {
var btnX=document.getElementById("actionB").value;
if (btnX=="Search") {
// compose your new URL here
}
// repeat for each of the possible buttons
</script>
Hope that helps somewhat!
Steve