Develop Reference

Two submit buttons, one is always hidden, how to hit enter and use the correct submit button

BEGINNING OF EDITED*** Updated function, however, hitting "enter" doesn't trigger the second submit button. Also adding this line of code:
document.getElementById('btn-default').removeAttribute("disabled");
in case the user wants to switch back to the original search button instead.
END OF EDIT ***
I have two submit buttons, the first one is the default for a general input search box. However, if the user clicks on the "Advance" link it will hide the general search input along with the submit button. And display the "Advance" submit button. When hitting enter it will default to the first submit button. Is there a way to detect when a submit button is hidden, to use the submit button that is displayed? Here is part of my code below:
FORM:
<form id='searchGroup' class='form-inline mt-2 mt-md-0' action='test.php' method='POST'>
<div class="col-md-5" id="defaultDisplay" >
<input class='form-control mr-sm-2' type='text' placeholder='' aria-label='Search' name='SearchAll' autofocus='autofocus'>
<!-- STANDARD SEARCH BUTTON -->
<input id='btn-default' class='btn btn-default my-2 my-sm-0' type='submit' name='SearchStd' value='Search'/>
</div>
<div class="collapse" id="collapseExample">
<!-- MULTIPLE INPUTS HERE -->
<!-- ADVANCED SEARCH BUTTON -->
<input class='btn btn-primary' type='submit' name='SearchAdv' value='Search'/>
</div>
</form>
FUNCTION to display div:
<script>
function switchVisible() {
if (document.getElementById('defaultDisplay')) {
if (document.getElementById('defaultDisplay').style.display == 'none') {
document.getElementById('defaultDisplay').style.display = 'block';
document.getElementById('btn-default').removeAttribute("disabled");
}
else {
document.getElementById('defaultDisplay').style.display = 'none';
document.getElementById('btn-default').setAttribute("disabled", "disabled");
}
}
}
</script>

One thing you could do is to just create two forms, one for basic search and one for advanced search. Then toggle the display between the two. It's a small, negligible redundancy that would fix this issue without resorting to JavaScript workarounds.
Alternatively, just use one form for both simple and advanced, and only having one submit button. Treat your form as an advanced form to begin with. A "simple search" would simply be an advanced search with empty advanced fields.

Any input or button on the form with TYPE="submit" will be linked to the ENTER key.
Notably in your case, if two such inputs have the TYPE="submit", the first one will be triggered on enter keypress.
One solution could be to set the DISABLED attribute on the one you do not want to trigger on ENTER keypress.
According to your requirement, you want the 'Advanced' submit button to be disabled to begin with, so edit your HTML to include the disabled property like this:
<input class='btn btn-primary' type='submit' name='SearchAdv' value='Search' disabled="disabled" />
Then, when you execute the code to show the 'Advanced' section, add the Disabled attribute to the 'default' section submit button:
document.querySelector('input[name="SearchStd"]').setAttribute('disabled','disabled');
while at the same time removing the DISABLED attribute from the 'advanced' section's button:
document.querySelector('input[name="SearchAdv"]').removeAttribute('disabled','disabled');
At this stage, I should mention I have noticed that your JavaScript code is working in a slightly different manner to how I understand your app to work:
It seems you are saying for each toggle "if the DEFAULT search is display block (shown), set display none (hide it), otherwise if it is not shown, show it"
I'm pretty sure you planned to be toggling the Advanced section, not the Default section (as the Default is shown by DEFAULT!). So assuming this is true and assuming you already made the HTML change mentioned above, AND assuming you've made a CSS change so that #collapseExample has display NONE to begin with... you'd want you JS like this:
<script>
function switchVisible() {
if (document.getElementById('collapseExample')) {
if (document.getElementById('collapseExample').style.display == 'none') {
document.getElementById('collapseExample').style.display = 'block';
document.querySelector('input[name="SearchStd"]').setAttribute('disabled','disabled');
document.querySelector('input[name="SearchAdv"]').removeAttribute('disabled','disabled');
}
else {
document.getElementById('collapseExample').style.display = 'none';
document.querySelector('input[name="SearchStd"]').removeAttribute('disabled','disabled');
document.querySelector('input[name="SearchAdv"]').setAttribute('disabled','disabled');
}
}
}
</script>
There are some ways to improve this by the way, for example you could look into "caching elements" so you don't have to repeat the getElementById's, and you could add IDs to the actual inputs which is considered good practice when manipulating unique elements, but to keep it simple and answer your actual question, this is my answer. Good luck!

HTML input "disabled" attribute not working in Bootstrap modals

I have a webpage with an "edit" form that appears in a modal dialog using Bootstrap.
When the form appears, I would like one of the input fields to be disabled at first, and to be enabled if the user clicks a checkbox.
The problem is, my browser (Chrome) is not reflecting the disabled attribute for any form element within the modal dialog. Any form element outside the modal works fine.
This also works fine on another webpage I have with the exact same logic. It is only misbehaving on this page.
I have run the entire page source through the W3 Validator for HTML5 and get no errors back.
Code for the input element:
<form role="form" id="frmEdit" action="group_edit.php" method="post">
<!-- ... -->
<input type="text" id="txtEditAlternate" class="form-control" name="alternate" disabled />
<!-- ... -->
</form>
I even tried to brute force disable it with jQuery on document ready; this does not work:
$(document).ready(function() {
$("#txtEditAlternate").attr("disabled", true);
// ...
});
The only thing that does work when it comes to disabling the text field is when the checkbox is checked and then unchecked:
$("#chkbox").click(function() {
$("#txtEditAlternate").attr("disabled", !$(this).prop("checked"));
});
Although that kind of defeats the purpose, since the text field is supposed to be disabled until the checkbox is checked.
I have read that simply including disabled with no value is valid HTML5 (the validator did not even warn about this), and it works elsewhere.
I have tried everything I can think of, and can only speculate that it has something to do with the Bootstrap modal functionality. But like I said, the same logic works perfectly on another webpage I have.
And yes, I know Chrome likes to cache things. I have "hard-refreshed" many times, does not change anything.
Any suggestions?

try to use disabled="disabled":
<input type="text" id="txtEditAlternate" class="form-control" name="alternate" disabled="disabled" />

Use readonly attribute instead of disabled.

use prop instead of attr
$("#txtEditAlternate").prop("disabled", true);

submitting form using jquery

got a problem and cant find the solution.
I am writing a chat. When a new user opens my site (a new session) a div popes out and the user is asked to fill in his name.
The form works fine when I use an input submit. I want it to work without the submit button, I want it to work when i press a div.
here is my code
html:
<form name="form" id="form" action="index.html" method="post">
<span id="nspan">First name:</span> <input type="text" id="firstname" name="name">
<div name="enter" id="enter">Submit</div>
</form>
the jquery:
$(document).ready(function(){
$("#enter").click(function () {
$("#form").submit();
});
});

nevermind is correct - no problem with that code.
Here's the JSFiddle to prove it: http://jsfiddle.net/8Xk7z/
Maybe you problem is that the id "form" is to general a name, and you already used it for another form.
Another thing, why not use a button or a link? You can style it like you want. Be careful when you use thing for what they are not suppose to be used for, it my give unexpected side effects.
In your case, you may only be able to login to you chat using a mouse, that would exclude blind people. You would also not be able to use the tabulater to get to the login "button". And last, if you are blind and uses a screen reader your would actually not know that there is at login "button", as the reader would not recognize the div as something you can click.
I would recomend using the button-tag like this
<button id="enter">Submit</button>
Or the a-tag like this
<a href id="enter">Submit</a>
If you don't like the predefined styling of them you may always override the styling.

try to define jquery at top of the page
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
Then put your script at next.
still issue.
Please check your other function on same page works fine or not.

disable submit button when javascript is disabled

I have a form which needs javascript to be enabled for validation, is there a way to disable submit button when javascript is disabled and warn user to enable it first ?

Disable it by default and use JavaScript to enable it.
<input type="submit" value="Submit" id="submitBtn" disabled />
<script type="text/javascript">
var _onload = window.onload || function()
{
document.getElementById('submitBtn').disabled = false;
}
_onload();
</script>
That way, if JavaScript is disabled then the button will also remain disabled.
jQuery version:
<script type="text/javascript">
$(function(){
$('#submitBtn').attr('disabled', false);
});
</script>

Have it disabled by default and if there is javascript, then enable it.

Don't define an HTML form action, but rather define only an onSubmit javascript event handler. If javascript is not enabled, the onSubmit will not fire, but since there is no form action, the submit button won't do anything either.
You could also opt to have the HTML form action go to an error page explaining that javascript must be enabled, so that the user has some sort of feedback.
Alternatively you can start with the button disabled (as other posters suggested). If you do that, you should also consider a message on the form indicating why the button is disabled. Remove that message with javascript if it is enabled at the same time you re-enable the button.

Because disabling a button programmatically depending on the environment and alerting him are both tasks depending on some kind of a scripting language ( like JavaScript ), the answer is no :-/

You got solution for enabling part. For Alerting part you can use good old tag. (-:
<noscript>
<H1> It Wont work w/o javascript. Please Enable</h1>
</noscript>

Excuse the late reply but this got me thinking on how to tackle this as I have a similar issue and it led me here. You should always program your site without javascript and add it after to enhance it, but in my case using things like lightbox are being used as input, which if javascript is disabled, doesn't work right (especially since mine passes values to its parent).
My suggestion is that hopefully you have PHP enabled, so you can simply put at the top of your document
<?php if (isset($_POST)) {
//redirect to page, or set a message variable saying "no results saved"
header('some_page');
$message = "We've detected you do not have " .
"javascript enabled. No results saved";
} ?>
From there, you will have to set all buttons on your page to say
<input name="button" id="button" type="submit" onclick="return false;" />
or you could more simply go
<form name="my_form" id="my_form" method="post" action="" onclick="return false;" />
Hope this helps!

Is there a better jQuery solution to this.form.submit();?

I want to trigger the submit event of the form the current element is in. A method I know works sometimes is:
this.form.submit();
I'm wondering if there is a better solution, possibly using jQuery, as I'm not 100% sure method works in every browser.
Edit:
The situation I have is, as follows:
<form method="get">
<p><label>Field Label
<select onchange="this.form.submit();">
<option value="blah">Blah</option>
....
</select></label>
</p>
</form>
I want to be able to submit the form on change of the <select>.
What I'm looking for is a solution that works on any field within any form without knowing the id or name on the form. $('form:first') and $('form') won't work because the form could be the third on the page. Also, I am using jQuery on the site already, so using a bit of jQuery is not a big deal.
So, is there a way to have jQuery retrieve the form the input/select/textarea is in?

I think what you are looking for is something like this:
$(field).closest("form").submit();
For example, to handle the onchange event, you would have this:
$(select your fields here).change(function() {
$(this).closest("form").submit();
});
If, for some reason you aren't using jQuery 1.3 or above, you can call parents instead of closest.

this.form.submit();
This is probably your best bet. Especially if you are not already using jQuery in your project, there is no need to add it (or any other JS library) just for this purpose.

I have found that using jQuery the best solution is
$(this.form).submit()
Using this statement jquery plugins (e.g. jquery form plugin) works correctly and jquery DOM traversing overhead is minimized.

Similar to Matthew's answer, I just found that you can do the following:
$(this).closest('form').submit();
Wrong: The problem with using the parent functionality is that the field needs to be immediately within the form to work (not inside tds, labels, etc).
I stand corrected: parents (with an s) also works. Thxs Paolo for pointing that out.

You can always JQuery-ize your form.submit, but it may just call the same thing:
$("form").submit(); // probably able to affect multiple forms (good or bad)
// or you can address it by ID
$("#yourFormId").submit();
You can also attach functions to the submit event, but that is a different concept.

Your question in somewhat confusing in that that you don't explain what you mean by "current element".
If you have multiple forms on a page with all kinds of input elements and a button of type "submit", then hitting "enter" upon filling any of it's fields will trigger submission of that form. You don't need any Javascript there.
But if you have multiple "submit" buttons on a form and no other inputs (e.g. "edit row" and/or "delete row" buttons in table), then the line you posted could be the way to do it.
Another way (no Javascript needed) could be to give different values to all your buttons (that are of type "submit"). Like this:
<form action="...">
<input type="hidden" name="rowId" value="...">
<button type="submit" name="myaction" value="edit">Edit</button>
<button type="submit" name="myaction" value="delete">Delete</button>
</form>
When you click a button only the form containing the button will be submitted, and only the value of the button you hit will be sent (along other input values).
Then on the server you just read the value of the variable "myaction" and decide what to do.

In JQuery you can call
$("form:first").trigger("submit")
Don't know if that is much better. I think form.submit(); is pretty universal.

<form method="get">
<p><label>Field Label
<select onchange="this.form.submit();">
<option value="blah">Blah</option>
....
</select>
</label>
</p>
**<!-- <input name="submit" type="submit" /> // name="submit_new_name" -->**
</form>
<!--
this.form.submit == this.form.elements['submit'];
-->