I just learn html and css and I need to do a project that build a robot and control the robot using website.
When I click the button it will go to other page or reload
How do I pass the value in the button without reloading the page?
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>RPOC</title>
</head>
<body>
<form action="welcome.php" method="post" type='submit'>
<button>FORWARD
<input type="hidden" name="value" value="1"><br></button>
</form>
<form action="welcome.php" method="post" type='submit'>
<button>BACKWARD
<input type="hidden" name="value" value="2"><br></button>
</form>
</body>
</html>
Your html contains a few mistakes. Try this:
<body>
<form action="welcome.php" method="post">
<input type="hidden" name="value" value="1">
<button type="submit">FORWARD</button>
</form>
<form action="welcome.php" method="post">
<input type="hidden" name="value" value="2">
<button type="submit">FORWARD</button>
</form>
</body>
Removed type="submit" from form element
Removed hidden input in button element
Added type="submit" to button element
Looks like you need a ajax call...
Try something like this, but you will have to make a ajax.page.php file.
You can learn more at: http://api.jquery.com/jquery.ajax/
$('#btoForward01').click(function(e){
var value01 = $('#value01').val();
var fullURL = "ajax.page.php?value01=" + value01;
//console.log(urlCompleta);
e.preventDefault();
$.ajax({
url: fullURL,
success: function(result){
console.log('evething alright');
},
statusCode: {
404: function(){alert( "Page not found" );},
500: function(){alert( "PHP Error" );}
}
});
});
<body>
<form action="welcome.php" method="post">
<input type="hidden" name="value" value="1" id="value01">
<button type="submit" id="btoForward01">FORWARD</button>
</form>
</body>
Related
I want this login form to submit automatically when the page loads. I am using IP address for registration so do not want a login button.
<form action="<?=$_SERVER['PHP_SELF']?>" method="post">
<input type="hidden" name="ip_address" /><br />
<input type="submit" name="submit" value="Login" />
</form>
You can do something like:
<form id="my_form" action="<?= $_SERVER['PHP_SELF'] ?>" method="post">
<input id="ip_address" type="hidden" name="ip_address" /><br />
<input type="submit" name="submit" value="Login" />
</form>
<script>
$(document).ready(function(){
if($("#ip_address").val() != "")
{
$("#my_form").submit();
}
});
</script>
Note: you must add JQuery library in your web page.
In case you don't use jQuery:
<body onload="javascript:submitonload();">
<form id="my_form" action="<?=$_SERVER['PHP_SELF'];?>" method="post">
<input type="hidden" name="ip_address" value="<?=(isset($_SERVER['REMOTE_ADDR']) ? $_SERVER['REMOTE_ADDR'] : '');?>" />
<br />
<input type="submit" name="submit" value="Login" />
</form>
<script type="text/javascript">
function submitonload() {
document.getElementById('my_form').submit();
}
</script>
</body>
Using JavaScript:
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="POST" id="my-form">
<input type="hidden" name="ip_address" /><br />
<input type="submit" name="submit" value="Login" />
</form>
<script>
//Once the page is loaded, submit the form
document.addEventListener("DOMContentLoaded", function(event) {
//The id of your form.
var idOfYourForm = "my-form";
document.getElementById(idOfYourForm).submit();
});
</script>
You just need to set the id attribute to your form and set the variable idOfYourForm, so the JavaScript will be able to submit your form.
This method use pure JavaScript, no jQuery or other library.
See DOMContentLoaded event.
I have two form with submit button in php file
when click on first submit button url become
http://url.com/?valueI=Want
when click second submit button: I need url become http://url.com/
without parameter
How i can do this please
<?php
if (isset($_POST['ASK_Button'])) {
}
if (isset($_POST['SET_Button'])) {
}
?>
<html>
<body>
<form id="ASKUser" class="blocks" action="#" method="post">
<input type="submit" Name="ASK_Button" value="ASK">
</form>
<form id="SETUser" class="blocks" action="#" method="post">
<input type="submit" Name="SET_Button" value="SET">
</form>
</body>
</html>
Change your ask form method to GET
<?php
if (isset($_GET['ASK_Button'])) {
}
if (isset($_POST['SET_Button'])) {
}
?>
<html>
<body>
<form id="ASKUser" class="blocks" action="#" method="GET">
<input type="text" name="valuel" value="Want">
<input type="submit" Name="ASK_Button" value="ASK">
</form>
<form id="SETUser" class="blocks" action="#" method="post">
<input type="submit" Name="SET_Button" value="SET">
</form>
</body>
</html>
With use of action attribute. Set it how you need. Or change it in onSubmit form handler.
index.php
<html>
<head>
<script type="text/javascript">
function submitForms()
{
document.forms["form-1"].submit();
document.forms["form-2"].submit();
}
</script>
</head>
<body>
<form method="POST" action="form.php" id='form-1'>
<input type="text" name="txt1" />
</form>
<form method="POST" action="form.php" id='form-2'>
<input type="text" name="txt2" />
</form>
<input type="button" value="Click Me!" onclick="submitForms();" />
</body>
</html>
form.php
<?php
echo $_POST['txt1'];
echo $_POST['txt2'];
?>
Above is my code and when i submit both forms then both text-fields with their value it does not shoe me both text-field values.It only shoe me second text-field value.Please help me quickly.
I think because you try to get the params after sumbit two forms. You have sent the two forms at once and the second has stepped to the first, so the result is the return of the second form.
I think this will be better:
<html>
<head>
</head>
<body>
<form method="POST" action="form.php">
<input type="text" name="txt1" />
<input type="text" name="txt2" />
<input type="submit" value="Click Me!" />
</form>
</body>
</html>
<?php
echo $_POST['txt1'];
echo $_POST['txt2'];
?>
Sorry for my english
<?php
echo $_POST['textvalue'];
echo $_post['radiovalue'];
?>
<div id="hidethis">
<form method="POST" action="">
<label>Tekst Value</label>
<input type="text" name="textvalue">
<label>Radio Value</label>
<input type="radio" name="radiovalue" value="autogivevalue">
<input type="submit" id="submit" name="submit" value="submit">
</div>
http://jsfiddle.net/Bjk89/2/ here is it with the jQuery.
What i try to do is to hide the <div id="hidethis"> when it's clicking submit.
I know i can make another page where i can recieve the values without the <form> section, but i want to put both in one page, make the <div id="hidethis"> hidden after submit.
So i'll be able to get echo $_POST['textvalue']; and echo $_post['radiovalue']; as results
RESULT MUST BE LIKE
A Text // This is the value you input into Tekst Value
autogivevalue // This is the value from the radio button
----- INVISIBLE -----
<form is hidden because we set it in jQuery so>
</form>
Try this. No need to use jQuery here.
<?php
if($_POST) {
echo $_POST['textvalue'];
echo $_post['radiovalue'];
} else {
?>
<form method="POST" action="">
<label>Tekst Value</label>
<input type="text" name="textvalue">
<label>Radio Value</label>
<input type="radio" name="radiovalue" value="autogivevalue">
<input type="submit" id="submit" name="submit" value="submit">
</form>
<?php
}
?>
Try adding '#' in your jquery code. Your version does not have # next to submit. Also your form is missing a closing tag here and in your JSFiddle code.
Try this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#submit').click(function () {
$('form').submit();
$('#hidethis').hide();
});
});
</script>
<form method='post' id="hidethis" name='form'>
<input type="text" name="textvalue">
<input type="radio" name="radiovalue" value="1">
<input type="button" id="submit" name="submit" value="submit">
</form>
How to submit this form without using submit button. I want to submit it in loading this form,
<form name="frm1" id="frm1" action="../somePage" method="post">
Please Waite...
<input type="hidden" name="uname" id="uname" value="<?php echo $uname;?>" />
<input type="hidden" name="price" id="price" value="<?php echo $price;?>" />
</form>
You don't need Jquery here!
The simplest solution here is (based on the answer from charles):
<html>
<body onload="document.frm1.submit()">
<form action="http://www.google.com" name="frm1">
<input type="hidden" name="q" value="Hello world" />
</form>
</body>
</html>
You can try also using below script
<html>
<head>
<script>
function load()
{
document.frm1.submit()
}
</script>
</head>
<body onload="load()">
<form action="http://www.google.com" id="frm1" name="frm1">
<input type="text" value="" />
</form>
</body>
</html>
Do this :
$(document).ready(function(){
$("#frm1").submit();
});
You can do it by using simple one line JavaScript code and also be careful that if JavaScript is turned off it will not work. The below code will do it's job if JavaScript is turned off.
Turn off JavaScript and run the code on you own file to know it's full function.(If you turn off JavaScript here, the below Code Snippet will not work)
.noscript-error {
color: red;
}
<body onload="document.getElementById('payment-form').submit();">
<div align="center">
<h1>
Please Waite... You Will be Redirected Shortly<br/>
Don't Refresh or Press Back
</h1>
</div>
<form method='post' action='acction.php' id='payment-form'>
<input type='hidden' name='field-name' value='field-value'>
<input type='hidden' name='field-name2' value='field-value2'>
<noscript>
<div align="center" class="noscript-error">Sorry, your browser does not support JavaScript!.
<br>Kindly submit it manually
<input type='submit' value='Submit Now' />
</div>
</noscript>
</form>
</body>
using javascript
<form id="frm1" action="file.php"></form>
<script>document.getElementById('frm1').submit();</script>
You missed the closing tag for the input fields, and you can choose any one of the events, ex: onload, onclick etc.
(a) Onload event:
<script type="text/javascript">
$(document).ready(function(){
$('#frm1').submit();
});
</script>
(b) Onclick Event:
<form name="frm1" id="frm1" action="../somePage" method="post">
Please Waite...
<input type="hidden" name="uname" id="uname" value=<?php echo $uname;?> />
<input type="hidden" name="price" id="price" value=<?php echo $price;?> />
<input type="text" name="submit" id="submit" value="submit">
</form>
<script type="text/javascript">
$('#submit').click(function(){
$('#frm1').submit();
});
</script>