Develop Reference

Show/Hide a button if a custum field is display

I'm having a problem in a checkout page of my website (wordpress based).
I have two kind of products and for each one, during checkout, I created custom fields to collect specific informations. With conditional rules (by plugin) some fields show up only if a list of specific option is checked.
When they are hidden, analysing the code, I've this situation:
<div class="form-row form-row-wide thwcfe-html-field-wrapper thwcfe-conditional-field" id="stud_no_req_field" data-name="stud_no_req" data-rules="[[[[{"operand_type":"field","value":"2","operator":"value_eq","operand":["student"]}]]]]" data-rules-action="show" style="display: none;">...</div>
When they are showing up, style attribute change in "block".
At the end of the page, I also have a button to submit the order.
<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Associati" data-value="Associati">Associati</button>
I'm looking for a script that hides this button if custom file above has "display:block" and viceversa (show button if div has "display:none").
I've tried with this script (in checkout page), but nothing happens:
<script>
$(document).ready(function() {
if ($("#stud_no_req_field").style.display == "block")
{
$("#place_order").style.display = "none";
}
else
{
$("#place_order").style.display = "block";
}
});
</script>
I also need that this script is automatic (no click needed) and listens to any automatic change of div style (inside html tag).
Thank you very much!!! You are my angels!

You're using the wrong code. You should do
$("#place_order")[0].style.display = 'none'; // I added [0]
Or use jQuery API (https://api.jquery.com/css/)
$("#place_order").css('display', 'none');

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!

Why won't the change in CSS styling caused by JavaScript remain after script finishes running?

Edit: Title makes more sense now.
I'm currently writing basic CRUD functionality using a popular web framework. In the edit section of my app, I have a 'Delete' button. When the button is clicked, I want a div containing text and two more buttons to appear, giving me the option to continue with the deletion. The delete functionality is handled by the framework, which is working just fine.
(I hate that inline CSS as much as you do, but bear with me, makes it easier for illustration purposes)
My HTML:
<style type='text/css'>
#overlay {
visibility: hidden; }
</style>
<form method='POST' action='', enctype='multipart/form-data'> {% csrf_token %}
{{form.as_p}}
<input type='submit' name='save' value='Save post'/>
<button onclick='toggleDeletion()'>Delete</button>
<div id='overlay'>
<p>Are you sure you want to delete this post? It‘ll be lost forever...</p>
<form method='POST' enctype='multipart/form-data'> {% csrf_token %}
<input type='submit' name='yes' value='Yes' />
<button onclick='toggleDeletion()'>No</button>
</form>
</div>
</form>
My JavaScript:
function toggleDeletion() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == 'hidden') ? 'hidden' : 'visible';
}
When I click the first 'Delete' button it works for about a half a second; the overlay div becomes visible. However it then vanishes, and doesn't come back. I'm relatively fresh to JavaScript, though not programming in general, and I am assuming there's some nuance of the language I'm completely missing out on. It doesn't appear to be looping through the function continuously, nor does it break. It just runs fleetingly. That or a stupid typo that's making me look like a fool.

You click the button
The JavaScript runs and modifies the DOM loaded into the browser
The form submits (because you clicked a submit button)
The browser loads a new page (which doesn't have the changes you made to the DOM with JS because they were only local)
If you don't want to submit the form when you click the button, don't use a submit button. Add type="button".

When your form submits, the page refreshes and you thus need to reapply the js/css changes on document load... or submit using AJAX and change the input type from submit to button / or return false on clicking the submit button.

Display a div on button click

I have a div, whose display is set to none. On button click, I need to show this div.
I have wrote a JavaScript function to do so, and it works but on click of the button the div is shown and again it hides. What is to be done additionally so that is remains.
JavaScript is as follows:
function show_popup() {
document.getElementById("Div1").style.display = 'block';
}
And div is as follows:
<div id="Div1" style="display:none">
The JavaScript function is called on button click as follows:
<asp:Button ID="Button3" runat="server" OnClientClick="javascript: show_popup()" Text="Button" />
Please help me out.

If I interpret your question correctly: the div resets to be hidden on page refresh or navigation. This is to be expected, the display value should be handled on the server side too.
As others have said, the problem is that when you click on the button, the page is posted to the server. If you do not want to do this, you should use a normal HTML button (with type="button"), instead of an ASP one.

Your Javascript is working, the Problem seems to be the Button implemented with ASP.
The Problem could be the Serversided implementation of the Button, here is the HTML implementation. Things are working there.
function show_popup() {
document.getElementById("Div1").style.display = 'block';
}
<div id="Div1" style="display:none">asdasdasdasdasdasd</div>
<input type="button" onclick="show_popup()" value="Show"></input>

How to create an HTML button that show more text same page

I'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages.
Below is my code
<form action="MyPage">
<button type="submit" value="More Options">
</form>
redirect to an other page.What I can do?

First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!
<form action="MyPage">
<button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>
<script type="text/javascript">
function addMoreStuff(button) {
/* your code here */
}
</script>

Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.
HTML
<button type="submit" value="More Options" id="more">
JavaScript (jQuery)
// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)
function add_options() {
//code here to add more options
}