hide div with javascript - javascript

Why doesn't this work. What should i do with the js to hide me the s_login div? pls help
<?php
define("INSTALLING", true);
$hide = true;
if(INSTALLING == true): ?>
<script type="text/JavaScript">
<?php if (isset($hide)){if($hide == true){echo "
document.getElementById('s_login').style.visibility = 'hidden';
";}} ?>
</script>
<div id="s_login">
<form action="index.php" method="GET">
<input type="text" name="s_host" placeholder="MySQL Host" />
<input type="text" name="s_user" placeholder="MySQL Username" />
<input type="password" name="s_password" placeholder="MySQL Password" />
<input type="submit" name="submit" value="Log In" />
</form>
</div>
<?php else: ?>
<?php endif; ?>

The best way is to wrap the function within
$(document).ready(function() {
// script here
}
using jQuery, or
document.addEventListener("DOMContentLoaded", function(event) {
// script here
});
without jQuery.
This ensures the DOM is loaded before the script is fired.

Put the hiding element script code inside dom ready or window onload method. Your script is executed first and at that time the dom i.e you s_login element isn't available inside the DOM.
With the current code check this and you'll get null. I.e you don't have an element at hand which you hide.
var element = document.getElementById('s_login');
console.log(element);
if you are using jquery you can do this:
$(document).on("ready",function(){
document.getElementById('s_login').visibility = "hidden"
});
else natively
window.onload = function(){
document.getElementById('s_login').visibility = "hidden"
}
Didn't use DOMContentLoaded Listener as that can have some cross browser concerns.

Related

Executing form autosubmit on page load?

I have tried many of the scripts and jquery examples here on this website, but none of them worked for my specific situation.
Basically I'm trying to autosubmit a form (without user needing to press submit).
As soon as the page loads, the autosubmit will be triggered.
My Form:
<form method="post" id="adduser" action="<?php the_permalink(); ?>" >
<input type="text" name="confirmed" id="confirmed" value="yes" class="regular-text" />
<p class="form-submit">
<?php echo $referer; ?>
<input name="updateuser" type="submit" id="updateuser" class="submit button" value="<?php _e('Update', 'profile'); ?>" />
<?php wp_nonce_field( 'update-user' ) ?>
<input name="action" type="hidden" id="action" value="update-user" />
</p>
</form>
As you can see I have php in the form's action, so javascript/jquery that needs to set an action URL inside the script won't work, as they don't allow a php.
Any help would be greatly appreciated.
You could set an event to trigger after the document has loaded, like this:
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const form = document.querySelector('#adduser')
form.submit()
})
</script>
This will submit the form right after all the contents in the DOM will be loaded.
$(function () {
$('#adduser').submit();
}
This should work.
try the following code:
<script>
$(document).ready(function () {
var formData = $('#adduser').serializeArray();
if(formData.length != 0) {
$("#adduser").submit();
}
})
</script>

checking isset at bottom of page not working

I have a dilemma (which I am yet to find a way around). For some reason, PHP doesn't want to check if $_POST["login"] at the bottom of the <body> tag within my document.
It will work if it is put at the very top of the document, or even the top of the <body> tag. However, if I put it at the top of the document / <body> tag, the output JavaScript will not execute!
For example, this is the document (where the PHP will not execute):
<form>
<span id="example-element">Displaying.</span>
<input type="text" name="example">
<button type="submit" name="login">Login</button>
</form>
<?php
if(isset($_POST["login"])){
echo "
<script>
document.getElementById('example-element').style.display = 'block';
</script>"
}
?>
If I am to do something like this, however (the PHP will execute):
<?php
if(isset($_POST["login"])){
echo "
<script>
document.getElementById('example-element').style.display = 'block';
</script>"
}
?>
<form>
<span id="example-element">Displaying.</span>
<input type="text" name="example">
<button type="submit" name="login">Login</button>
</form>
But due to how JavaScript compiles, it will throw an error saying how it cannot set a style on a null element.
I have no idea how to get around this dilemma, so all help is appreciated!
Cheers.
<form>
<span id="example-element">Displaying.</span>
<input type="text" name="example">
<button type="submit" name="login">Login</button>
</form>
<?php
if(isset($_GET["login"])){
echo "<script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('example-element').style.display = 'block';
}, false);
</script>";
}
?>
Check if this works..... I've added the display code inside the DOMContentLoaded event and change the $_POST variable to $_GET. Works fine in my local system.
You can do it as follows
<style>
.someClass {
display: block;
}
</style>
<?php
if(isset($_POST["login"])){
$hasClass = true;
}
?>
<form method="post">
<span id="example-element" class=<?php if(isset($hasClass)==true) echo "someClass"; ?> >Displaying.</span>
<input type="text" name="example">
<button type="submit" name="login">Login</button>
</form>
The other problem with your code is that you are not setting method of your form and by default it is GET where as in php you were looking for POST request.
You could solve it either by using $_REQUEST in php when you are not sure about the method.
Actally php executes before javascript.
Change like this
<script>
var isSubmit = "<?php isset($_POST['login'])?true:false; ?>";
if(isSubmit){
document.getElementById('example-element').style.display = 'block';
}
</script>"

How to scroll on post a form

I have a form that I want to do one thing: when I click de button and it post the form, I want to scroll to a specific point. I've tried with cookies and my code is this:
`
<!-- I have a library called cookie and the cookie works well, but when I send, the page go up and I want to stay in the scroll position -->
<form method="post" action="">
<input type="submit" value="send" name="btn" /></div>
</form>
<script>
function send() {
cookie.asignar("altura", $(window).scrollTop(), "../js/", 10);
$(window).scrollTop(0, cookie.agafar("altura"));
cookie.suprimir("altura");
}
</script>
<?php
if (isset($_POST['btn'])) {
echo '<script>send();</script>';
}
?>
I use jquery and php.
Well, trying another solution using localStorage instead of cookies:
<form method="post" action="">
<input type="submit" value="send" name="btn" /></div>
</form>
<script>
$(document).ready(function(){
// Scroll to screen height if previously saved
var previousHeight = localStorage.getItem("pageHeight");
if(previousHeight){
$('html, body').animate({
scrollTop: localStorage.getItem("pageHeight")
}, 1000);
localStorage.setItem("pageHeight", null);
}
// Saves scroll height on submit
$("form").on("submit", function(){
localStorage.setItem("pageHeight", $(window).scrollTop());
});
});
</script>
Just use an anchor on page
<a name="form"></a>
<form method="post" action="">
<input type="submit" value="send" onclick="send();"name="btn" /></div>
</form>
<script>
function send() {
window.location.hash = '#form';
}
</script>
It's easy to jump to any position in your page, all you need is a local anchor, example (copy paste next code in a PHP file and run it in your browser) :
<form method="post">
Enter number <input type="text" name="num" />
<input type="submit" value="Submit"/>
</form>
<?php
for ( $i = 1; $i <= 200; $i++ ) // DISPLAY 200 NUMBERS.
echo "<a name='$i'>$i</a>\n" . //◄■■■ LOCAL ANCHORS.
"<br/>";
?>
<?php
if ( isset( $_POST["num"] ) )
echo "<script type='text/javascript'>\n" .
"window.location.hash = '#{$_POST["num"]}';" . //◄■■■ JUMP TO LOCAL ANCHOR.
"</script>\n";
?>
Notice how the numbers are enclosed between <a name and </a>. These are the local anchors. Watch your address bar everytime you submit the form.
I think the issue is that you need to target the "body,html" and not window.
$("body,html").scrollTop(0);
you can also just scroll into element:
$el = $(element).offset().top;
$("body,html").scrollTop($el);
quick example of scrollTop animated
https://jsfiddle.net/keinchy/gLwz9n81/
hope this is helpful.
-cheers.

Farbtastic Multiple Fields - Wordpress

I am developing a wordpress theme. I am working on the theme options page right now. I added farbtastic (4 fields) and the problem is that every time I click on the input, the color picker appears on the other 3 fields too. Anybody knows how to fix this? Thank you!
<div> <br />
<label for="<?php echo $colorPicker['ID']; ?>"><?php _e($colorPicker['label']); ?></label>
<input type="text" class="color-picker" id="<?php echo $colorPicker['ID']; ?>" value="<?php echo get_option($colorPicker['ID']); ?>" name="<?php echo $colorPicker['ID']; ?>" />
<div id="<?php echo $colorPicker['ID']; ?>_color" class="fabox"></div> </div>
<?php endforeach; ?>
<p><input type="submit" name="update_options" value="Update Options" class="button-primary" /></p>
</form>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
var colorPickers = $('.color-picker');
console.log(colorPickers);
for (e in colorPickers) {
if (colorPickers[e].id != undefined) {
var colorPickerID = colorPickers[e].id;
$('#' + colorPickerID + '_color').farbtastic('#' + colorPickerID);
}
}
$('.fabox').hide();
$('.color-picker').click(function() {
$('.fabox').fadeIn();
});
$(document).mousedown(function() {
$('.fabox').each(function() {
var display = $(this).css('display');
if (display == 'block') $(this).fadeOut();
});
});
});​
</script>
HTML OUTPUT:
<form method="POST" action="">
<div>
<br />
<label for="color_1"><strong>Post Title</strong></label>
<input type="text" class="color-picker" id="color_1" value="#273990" name="color_1" />
<div id="color_1_color" class="fabox"></div>
</div>
<div>
<br />
<label for="color_2"><strong>Paragraph Text</strong></label>
<input type="text" class="color-picker" id="color_2" value="#840000" name="color_2" />
<div id="color_2_color" class="fabox"></div>
</div>
<div>
<br />
<label for="color_3"><strong>Example</strong></label>
<input type="text" class="color-picker" id="color_3" value="#4377df" name="color_3" />
<div id="color_3_color" class="fabox"></div>
</div>
<div>
<br />
<label for="color_4"><strong>And Another Example</strong></label>
<input type="text" class="color-picker" id="color_4" value="#3c8400" name="color_4" />
<div id="color_4_color" class="fabox"></div>
</div>
<p><input type="submit" name="update_options" value="Update Options" class="button-primary" /></p>
</form>
</div>
You're referencing too broad of an element with your jQuery selector. Essentially your code says every time you click anything with the color-picker class, show anything with the fabox class.
You should make your reference more specific to the currently clicked .color-picker.
I recommend replacing this:
$('.fabox').fadeIn();
With this:
$(this).parent().find('.fabox').fadeIn();
So you are only referencing the .fabox that is connected to the .color-picker you just clicked.
EDIT: As gillesc noted, it would actually be quicker to use:
$(this).next().fadeIn();
So long as the the .fabox always follows the .color-picker.
If the .fabox was inside the same container, but not the very next element you could use:
$(this).next('.fabox').fadeIn();
You don't need to use for (e in foo) using jQuery.each(), is a lot cleaner and here your e is a global variable which is pretty bad, with each that mistake can't happen.
Also use $(function(){}); instead of $(document).ready(function(){}); it does exactly the same but you get better footprint and your code is a bit easier to read.
And in the dom ready function you don't need $ as argument, that when you need a closure and is a way to guarantee $ is jQuery inside the closure.
(function($) {
// your code
})(jQuery);
So your code end up like this instead of what you have
$(function() {
$('.color-picker').each(function() {
if (this.id) {
$('#' + this.id + '_color').farbtastic('#' + this.id);
};
}).click(function() {
$(this).next().fadeIn();
});
$('.fabox').hide();
$(document).mousedown(function() {
$('.fabox:visible').fadeOut();
});
});​
And I think your problem might be idtencial IDs so it confuse the plugin, but to be fair it would easier if you post the HTML output rather than the PHP code as it's the DOM we want to see and it's hard to guess without knowing what the PHP variables are outputting.

Javascript onsubmit clearcontent not working

<textarea onfocus=" javascript:clearContents(this); this.cleared=true;" rows="5" cols="40" id="comment" name="comment" <?php if($vis["username"] == $pusername) { echo "DISABLED"; } ?>>...</textarea>
<input onsubmit="if (!this.comment.cleared) clearContents(this.comment); return true;" type="submit" name="Submit" value="Stem!"/>
function clearContents(element) {
element.innerHTML = '';
}
This wont work, and i cant figure out why. What it does: clears the content if it hasnt been onfocus/clicked on by the person
clearContents( document.getElementById('comment') )
You should bind onsubmit to the <form> and do this unobtrusively, ideally...
<input onsubmit="if (!this.comment.cleared)
this is the <input>. Input elements don't have a submit event or a comment property. Probably you want to put this on the surrounding <form> element:
<form onsubmit="if (!this.comment.cleared) ...
Whilst it is possible to put it on the submit button, you'd have to use onclick="if (!this.form.comment.cleared) ..., to navigate up to the form and down to the other input. It's not generally a good idea to tie form submission code to a particular button.
As meder said, doing all this in inline event handlers is a bit ugly. (Especially the unnecessary javascript: prefix.) Prefer to assign from JS instead:
<form id="someform" method="post" action="somewhere"><div>
<textarea
rows="5" cols="40" name="comment"
<?php if($vis['username']==$pusername) { ?>disabled="disabled"<?php } ?>
>
...
</textarea>
<input type="submit" name="Submit" value="Stem!" />
</div></form>
<script type="text/javascript">
var f= document.getElementById('someform');
var cleared= false;
f.elements.comment.onfocus= function() {
f.comment.value= '';
cleared= true;
};
f.onsubmit= function() {
if (!cleared)
f.comment.value= '';
};
</script>
I've used XHTML syntax for the disabled attribute (since you seem to be using XHTML syntax elsewhere), and used value to clear the content. Don't use innerHTML—it doesn't do what you think, except when it coincidentally does due to browser bugs. Form fields should always be accessed using value.

Categories

Resources