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.
Related
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>
I have a form in which by using javascript and in a while I add content to it.
Denpending on the number of data in database different number of forms are added to the page.
<?php
while($row = mysql_fetch_array ($result)){
?>
<form method="post" accept-charset="UTF-8" >
//add some content to the form by reading from database
<div class="form-group ">
<input type="submit" name="print" id="button" value="print"/>
</div>
</form>
<?php
}//end while
?>
and below I want to redirect to another page when clicked on each "print" button.
But not only it doesn't redirect to another page but also alert just works for the first button.
Below is the code:
<script>
$("#button").click(function(){
alert('hi');
window.location.href = "design_card.php";
});
</script>
how to solve?
jquery, php or javascript solutions are acceptable. other workable solutions, if work, are good.
Thanks for your response in advance.
Check your HTML
<?php
while($row = mysql_fetch_array ($result)){
?>
<form method="post" accept-charset="UTF-8" >
//add some content to the form by reading from database
<div class="form-group ">
<input type="submit" name="print" id="button" value="print"/>
</div>
</form>
<?php
}//end while
?>
You have created multiple <input> element dynamically with duplicate id so the better way is to assign a class to them like
<?php
while($row = mysql_fetch_array ($result)){
?>
<form method="post" accept-charset="UTF-8" >
//add some content to the form by reading from database
<div class="form-group ">
<input type="submit" name="print" class="buttonClass" value="print"/>
</div>
</form>
<?php
}//end while
?>
And then use this buttonClass class as a jquery selector like this
$(".buttonClass").click(function(){
alert('hi');
window.location.href = "design_card.php";
});
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>"
Index.php
...
<form id="calculator_form" name="form" action="" method="get" >
<input name="one" type="text">
<input name="two" type="text">
<input type="submit">
</form>
...
<!-- refresh area -->
<?php if(isset($_GET["one"])) { ?>
<div>
<?php echo $_GET["one"] . " " . $_GET["two"]; ?>
</div>
<?php } ?>
<------------------->
I would like to submit the form and reload the refresh area indicated above. I know this can be achieved by using AJAX but I'm not quite sure how.
I have tried putting the refresh area in a separate ajax.php file and using JQuery but it didn't work;
$(document).ready(function() {
$("#calculator_form").submit(function(event) {
event.preventDefault();
$("#divtoappend").load("ajax.php", data);
})
})
I've also tried using $.get() but to no avail.
I'm able to send the data back and forth to a seperate php page but I'm stuck trying to achieve what I am looking for.
EDIT:
The code that I posted was quickly written and the syntax isn't the issue in question, I'm merely wondering how I can refresh a <div> under the form so that it will once again do the if(isset($_GET["one"])) check and print the updated php variables.
EDIT 2:
My code is now as follows:
Index.php
...
<form id="calculator_form" name="form" action="" method="get" >
<input name="one" type="text">
<input name="two" type="text">
<input type="submit">
</form>
...
<div id="append">
<!-- where I want the ajax response to show -->
</div>
...
ajax.php
<?php if(isset($_GET["one"])) { ?>
<div>
<?php echo $_GET["one"] . " " . 4_GET["two"]; ?>
</div>
<!-- assume there's n number of divs -->
<?php } ?>
Now I want the ajax.php div to append to the #append div in index.php. There has to be a better way than altering the ajax.php and using echo:
ajax.php (with echo)
<?php
if(isset($_GET["one"])) {
echo "<div>". $_GET["one"] . " " . $_GET["two"] . "</div>";
}
?>
So, as ajax.php could be very large, is there a better solution than
just echoing data from ajax.php to index.php?
Now this can be done in many ways.. One of them is Following.. Try this:
Index.php file
<form method="get" id="calculator_form">
<input name="one" type="text" id="one">
<input name="two" type="text" id="two">
<input type="submit" name="submit">
</form>
<div class="result"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#calculator_form").on('submit', function(event){
event.preventDefault();
var one = $('#one').val(); // Taking value of input one
var two = $('#two').val(); // Taking value of input two
$.get( "ajax.php", { one:one, two:two }). done( function( data ) {
$('.result').html(data); // Printing result into result class div
});
});
});
</script>
ajax.php
<?php if(isset($_GET["one"])) { ?>
<div>
<?php echo $_GET["one"] . " " . $_GET["two"]; ?>
</div>
<?php } ?>
Use this,
$(document).ready(function() {
$(document).on('submit',"#calculator_form",function(event) {
event.preventDefault();
$.get(
'ajax.php',
function(ret_data){
$("#divtoappend").html(ret_data);
}
);
});
}) ;
The original syntax for $.get is,
$.get(
URL,
{
VAR_NAME1:VAL1,
VAR_NAME2:VAL2
},
function(response){
// your action after ajax complete
}
);
Typo: You have accidentally used $(document).read( instead of $(document).ready(! That will stop your code running.
Note: jQuery has a handy shortcut for the document ready handler:
$(function(){
// your code here
});
I'm not sure if I understand the question correctly, but here is what you can do: Assign some ID or at least the css Class name to the target div and paint the stuff you are getting from AJAX response something like below.
$(document).ready(function() {
$("#calculator_form").submit(function(event) {
event.preventDefault();
$.ajax({
url: "Ajax_URL",
success: function(result) {
$("#targetDiv").html(result.one + " " + result.two); //assuming you have assigned ID to the target div.
}
});
})
})
I have a page which has lot of post data in the url.
For example,
www.test.com/test.php?userid='tester'&name=test&so on
The above page has a form that has something like this:
<?
$set=get_value_set;
if($set ==1) {
$set_value="SET";
} else {
$set_value="UNSET";
}
?>
<form name="test">
<input type="text" readonly="READONLY" value="<? echo $user_id; ?>">
<input type="submit" value="Email" name="submit_user">
<input type="submit" value="<? echo $set_value; ?>" name="submit_user">
<?
function setuser()
{
//sets the value
}
function email_user()
{
//sets the value
}
?>
there are two buttons above, when I click on email, i want the value of email button to be passed to the email_user function and do some proceesing there. Similar thing when I click on the set button.
NOTE:But in both cases above, I want the form to remain in the same page with the same post data in the url, but I also want the page to be refreshed so that the set button can have a value of Set or Unset depending on the database update.
Is this possible?
I would start to remove the submit action of each button and change them to
<input type="button" class="btn-Email" value="Email" name="submit_user" />
<input type="button" class="btn-Other" value="<? echo $set_value; ?>" name="submit_user" />
and then, using jQuery, you can easily process each click and submit the form
$(function() {
$(".btn-Email").click(function() {
// append anything you want
var but_email_value = $(this).val(), // or $(".btn-Email").val()
btn_other_value = $(".btn-Other").val();
$("form").submit();
});
$(".btn-Other").click(function() {
// append anything you want
var but_other_value = $(this).val(), // or $(".btn-Other").val();
btn_email_value = $(".btn-Email").val();
$("form").submit();
});
});
change your HTML
<form id="test" name="test">
...
<button onclick="email_user();">Email</button>
<button onclick="setuser();"><? echo $set_value; ?></button>
</form>
your functions should submit the form for you:
document.getElementById("test").submit();