I've got two forms in PHP that have different purposes to them. Right now they are only made visible if the admin is logged in. This code works fine for it
<?php
if (isset($_SESSION['username']))
{
echo '</nav>
<br><br> <div class="blogscript">
<form id="form1" action="sent.php" method="post"> New page<br>
<input type="text" placeholder="Title" method="POST" name="pagetitle" /><br><br>
<textarea id="message" name="message</textarea><br>
<input type="submit" value="Confirm" />
</form></div>';
}
if (isset($_SESSION['username']))
{
echo '</nav>
<br><br> <div class="collagescript">
<form id="form2" action="sent.php" method="post"> New collage<br>
<textarea id="collage" name="message"></textarea><br>
<input type="submit" value="Confirm" />
</form></div>';
}
?>
I don't want the default of the forms to be visible even for the admin, I only want to show them when buttons are clicked that say "Show form 1" and "Show form 2".
How would I need to approach that? I don't know whether to use Javascript or pure PHP for it, in the case of PHP, I don't how how to toggle the visibility. I'm more comfortable with javascript, but I don't even know to the extent you can combine php with javascript.
PS: By toggling visibility, I don't mean toggling the opacity.
The earlier answer links to how this can be accomplished with jQuery. To do the same thing without loading the jQuery library, this should get you started:
//On document ready
document.addEventListener('DOMContentLoaded', docReady, false);
function docReady(){
document.getElementById('f1').addEventListener('click', fnF1, false )
document.getElementById('f2').addEventListener('click', fnF2, false )
}
function fnF1(){
document.getElementsByClassName('blogscript')[0].style.display = 'block';
this.style.display = 'none';
}
function fnF2(){
document.getElementsByClassName('collagescript')[0].style.display = 'block';
this.style.display = 'none';
}
.blogscript{display:none;}
.collagescript{display:none;}
<div class="blogscript">
<form id="form1" action="sent.php" method="post">New page
<div>
<input type="text" placeholder="Title" method="POST" name="pagetitle" />
</div>
<div>
<textarea id="message" name="message"></textarea>
</div>
<input type="submit" value="Confirm" />
</form>
</div>
<div class="collagescript">
<form id="form2 " action="sent.php " method="post ">New collage
<div>
<textarea id="collage " name="message "></textarea>
</div>
<input type="submit " value="Confirm " />
</form>
</div>
<button id="f1">Show Form 1</button>
<button id="f2">Show Form 2</button>
Notes:
(1) To create a pure js slideUp/slideDown effect, see:
https://gist.github.com/ludder/4226288
(2) jQuery is much simpler and significantly less typing, but requires the jQuery library to be loaded. To load the jQuery library, just include a link to its CDN location either in the <head> tags or just before the </body> tag:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
This question has been asked hundreds of times. But in case you couldn't find the link:
Jquery Toggle Show/Hide Div
You will want to use javascript for this. The linked method is pretty easy. You could also go pure CSS, but Javascript is more compatible.
Related
Maybe is not easy to understand from the title but im trying to make a login/register form with only javascript.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="prueba.css">
</head>
<body>
<div id="Div1">
<form class="login-form">
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<button>login</button>
<p class="message">Not registered?
<button onclick="switchVisible()">Register</button>
</p>
</form>
</div>
<div id="Div2">
<form class="register-form">
<input type="text" placeholder="name" />
<input type="password" placeholder="password" />
<input type="text" placeholder="email address" />
<button>create</button>
<p class="message">Already registered?
<button onclick="switchVisible()">Login</button>
</p>
</form>
</div>
<button onclick="switchVisible()">Swap</button>
<script src="prueba.js"></script>
</body>
</html>
Swap button works fine but the ones inside form dont. I want to leave just the ones inside the form.
Edit: prueba.js
function switchVisible() {
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display == 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
}
else {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
}
}
}
Basically, what i want to show is only one form, if you are on the login form, you can press the "Register" from "Not registered yet?" and it will show the register form, and viceversa.
If you check https://www.instagram.com/ login page you will get it. The thing is i want the swap button to be personalized, but the button only works if its outside the div i want to hide/show.
I just created a basic demo of this issue: https://jsfiddle.net/bv5m42od .
It appears that the issue is that the buttons inside the divs are submitting the form before the JavaScript can be executed.
Adding the attribute type="button" to the <button> tags will prevent this, and allow the Javascript to execute before the page is posted back, e.g:
<button type="button" onclick="switchVisible()">Register</button>
See working example: https://jsfiddle.net/bv5m42od/1
As another alternative, you could simply place these buttons outside the <form> tags, without needing to add the attribute.
This code works:
<script type="text/javascript">
function submit_form()
{
if(confirm('My message here.'))
{
document.my_form_name.submit();
}
}
</script>
<form action="index.php" method="post" name="my_form_name">
<input type="button" value="Skip" onclick="submit_form()">
<input name="submit" type="submit" value="Save and continue">
</form>
HIGHLIGHTS:
function submit_form()
document.my_form_name.submit()
form action="index.php" method="post" name="my_form_name"
input type="button" value="Skip" onclick="submit_form()"
This does not work (but I want it to):
<script type="text/javascript">
function submit_form(variable)
{
if(confirm('My message here.'))
{
document.variable.submit();
}
}
</script>
<form action="index.php" method="post" name="my_form_name">
<input type="button" value="Skip" onclick="submit_form('my_form_name')">
<input name="submit" type="submit" value="Save and continue">
</form>
HIGHLIGHTS:
function submit_form(variable)
document.variable.submit()
form action="index.php" method="post" name="my_form_name"
input type="button" value="Skip" onclick="submit_form('my_form_name')"
I'm quite ok with PHP but lack decent JavaScript knowledge so if someone could point me in the right direction I'd be very happy!
And why do I need 2 buttons? Well, I want to display the skip-button to the left of the continue-button (first in HTML flow) but I do not want it to be default action if form is submitted by pressing enter key, therefore I let skip-button be "just" a button (controlled by JavaScript for submitting) and only the continue-button to be a "real" submit-button...
When you are using document.variable, it looks for something named variable. If you want it to look for the variable's value ('my_form_name'), use document[variable]:
if(confirm('My message here.'))
{
document[variable].submit();
}
#Blex has provided the right answer. Even though I am not a fan of inline JS, the following can save some typing and improve readability of your code:
HTML:
<input type="button" value="Skip" onclick="submit_form(this)">
<!-- use this instead of 'my_form_name' -->
JS:
variable.form.submit(); //instead of document[variable].submit();
I am not using a reset button because I have other functions that aren't working either and I need to do it this way to meet program requirements. I am intentionally not using jQuery. Everything seems correct to me.
HTML:
<script src="js/breaker.js"></script> <!-- it seems to be linked right, but nothing is working -->
<form action="#" method="get" onsubmit="return false"> <!-- is there something wrong here? -->
<td><textarea id="text" cols="50" rows="10" style="width: 40em; height: 15em;"></textarea></td>
<input type="text" value="0" id="shift" style="width: 4em;"/>
<input type="button" value="Exit value = 3" onclick ="javascript: clearSetFocus();"/>
Javascript:
function clearSetFocus() { //functions seems right
document.getElementById("text").value = "";
}
I have this code
<html>
<include jquery>
<script>
function crea()
{
var html = '<form method="get" id="popUpForm" name="popUpForm" action="form_ricorda_dati.php"><hr /><input type="hidden" name="mio" value="1" />input3<input type="text" name="input3" value="" /><br />input4<input type="text" name="input4" value="" /><br /><input type="submit" id="11" value="Procedi" /></form><br />submit';
var div = document.getElementById('cont');
div.innerHTML = html;
}
function prova()
{
$('#popUpForm').submit();
}
</script>
<body>
< a href="#" onClick="crea()">lancia funzione JS</a><br /><br />
<div id="cont"></div>
</body>
</html>
This code:
When I click on <a href="#" onClick="crea()"> it "shows" the form
into the <div id="cont">
Way 1: When I click on <a href=""
onClick="prova()">submit</a> it calls $('#popUpForm').submit();
Way 2: Click on <input type="submit" id="11" value="Procedi"
/>
Problem:
If I click <input type="submit" id="11" value="Procedi" /> I
reload the page and see correct query string (form action="get"). In
the reloaded page, if I "show" the form and click on the input I see the last
input (browser autofill okay).
If I click submit, after, I
don't see the query string. In the reloaded page if I "show" the form and
click on the input I don't see the last input (browser autofill fails).
(I see this problem in Chrome and IE, but not in Firefox.)
Goal
The browser autofill should always show.
The problem might be that the HTML form you are creating with JavaScript was not in the browser's DOM at the moment the page was loading. You can fix this by placing the form's HTML into your body tag to be rendered in the DOM, and hide it with JavaScript until a user clicks the crea link.
The problem number 2 seems to be that your link ( <a href="" onclick="prova()"... ) might go to the url given in the HREF attribute. Since that attribute is empty, your page goes to itself.
To make things easier, you should keep your HTML form out of your JavaScript logic. Also since you are using jQuery, I have converted your functions to binds.
Working example in JSFIddle.
<html>
<head>
<script type="text/javascript" src="url/to/jquery.js"></script>
<script type="text/javascript">
jQuery(function(){
var form = jQuery( '#form' ),
crea = jQuery( '#creaLink' ),
prova = jQuery( '#provaLink' );
form.hide();
crea.on( 'click', function(){
form.show();
});
prova.on( 'click', function(){
form.submit();
});
});
</script>
</head>
<body>
lancia funzione JS
<br />
<br />
<div id="form">
<form method="post" id="popUpForm" name="popUpForm">
<hr />
<input type="hidden" name="mio" value="1" />
input3
<input type="text" name="input3" value="" />
<br />
input4
<input type="text" name="input4" value="" />
<br />
<input type="submit" id="11" value="Procedi" />
</form>
<br />
submit
</div>
</body>
</html>
It might not be a good idea to depend on browser's autofill as different browsers may have different behaviors. Now if I am correct in assuming that you want the values to be present in the fields even after the form data is received and processed at the server, then I would suggest you to make use of AJAX techniques. Send the form data in the background to the server and show only the result once you receive the response.
I have the jstree search plugin working fine inside a HTML page. The data for the tree is loaded with ajax, and the search is permformed with ajax.
Everything works fine until I put it in another form.
If I put the same code inside a HTML form it doesn't work anymore because the search is not performed.
The search is not performed because the whole form is submitted when I click the search button of the plugin.
How do I catch the click on the search button and prevent the whole form to be submitted ?
The global form has its own submit button and it still works fine.
I tried the solution in this thread but it doesn't work :
http://groups.google.com/group/jstree/browse_thread/thread/7945aa59fca2d9c9
Also this does not work :
<form id="list" name="list" action="save.php" method="post">
<!-- jstree button and input text for search plugin -->
<div id="mmenu">
<input type="submit" id="search" value="Go" />
<input type="text" id="text" value="" />
</div>
<!-- the tree container -->
<div id="indexation" class="indexation"></div>
<input id="url" type="text" name="url" value="" size="30" title="www.example.org"/>
<input type="submit" name="sendform" value="Save" />
</form>
<script type="text/javascript">
// Code for the menu buttons
$(document).ready(function(){
$("#mmenu input").click(function () {
switch(this.id) {
case "add_default":
case "add_folder":
$("#indexation").jstree("create", null, "last", {
"attr" : {
"rel" : this.id.toString().replace("add_", "") }
});
break;
case "search":
$("#indexation").jstree("search", document.getElementById("text").value);
break;
case "text": break;
default:
$("#indexation").jstree(this.id);
break;
}
});
});
</script>
Any idea/tip would be greatly appreciated
Here is the jsfiddle :
http://jsfiddle.net/v9VRr/6/
thank you,
I found a solution, not really clever but at least it works. Just put the jstree html needed for search outside of the form elements :
<form id="list" name="list" action="save.php" method="post">
<!-- the tree container -->
<div id="indexation" class="indexation"></div>
<input id="url" type="text" name="url" value="" size="30" title="www.example.org"/>
<input type="submit" name="sendform" value="Save" />
<form>
<!-- jstree button and input text for search plugin -->
<div id="mmenu">
<input type="submit" id="search" value="Go" />
<input type="text" id="text" value="" />
</div>
Then position the div id="mmenu" where you need it via CSS.