This is my code:
<?php
class islem
{
function topla($a,$b,$c)
{
$c=$a + $b;
return $c;
}
}
if ($_POST) {
$a=intval($_POST['a']);
$b=intval($_POST['b']);
$c=intval($_POST['c']);
$toplama=new islem;
}
?>
<form action="" method="post">
Sayı 1
<input type="text" name="a">
<br>
<br>
<br>
Sayı 2
<input type="text" name="b">
<br>
<br>
<br>
Sonuç
**<input type="text" name="c" value="<?php echo $toplama->topla($a,$b,$c);?>">**
<br>
<button>Gönder</button>
<button type="reset" value="Temizle">Temizle</button>
</form>
I can reset input text fields, but how can I reset Post['C'] text fields?
When I click the reset(temizle) button, adding on its
The reset button will reset the form fields to what they were when the page was loaded. In this case, you have pre-filled content in your form, so clicking reset will simply undo any user changes since the page-load.
Here is an example of how you can reset the form fields that have pre-loaded data.
$(document).ready(function(){
$("#btn").click(function(){
$("#form")[0].reset();
});
});
Related
I am still working on my school project, which is almost finished.
With your help, I successfully created a working system that allows users to write, edit and delete data to/from the database.
The only problem I have right now us "user-friendly form." I managed to create auto-focus, insert correct values on edit so the user can see what was previously written in that field, etc.
I have my forms hidden with jquery. When a user clicks add, the form slides in. What I need to achieve is: "when a user clicks submit and the page refreshes and adds the element to the database, the form should appear again so users can add data faster."
Here is my code.
$(document).ready(function() {
$('#x').click(function() {
$('.y').toggle("slide");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="x">Click</div>
<div class="y" style="display: none;">
<div class="container">
<form action="insertzunanja.php" method="POST" id="x">
<input type="hidden" name="narocilo" value="0.1412312">
<input type="hidden" name="id" value="id-1">
<input type="text" name="dolzina" style="width:49%;" placeholder="Dolzina (v cm)">
<input type="text" name="sirina" style="width:49%;" placeholder="Sirina (v cm)">
<input type="text" name="kolicina" value="1" style="width:49%;" placeholder="Kolicina">
<input type="text" name="opombe" style="width:49%;" placeholder="Opombe">
<input type="submit" value="Send">
</form>
</div>
</div>
Thanks and best regards.
You can use AJAX call to send the data to php file instead of form action. According to your code you will have something like this:
<div id="x">Dodaj</div>
<div class="y" style="display: none;">
<div class="container">
<input type="hidden" name="narocilo" value="<?php echo $randomNum; ?>">
<input type="hidden" name="id" value="<?php echo $id; ?>">
<input type="text" name="dolzina" style="width:49%;" placeholder="Dolzina (v cm)">
<input type="text" name="sirina" style="width:49%;" placeholder="sirina (v cm)">
<input type="text" name="kolicina" value="1" style="width:49%;" placeholder="Kolicina">
<input type="text" name="opombe" style="width:49%;" placeholder="Opombe">
<input id="sub" type="submit" value="Send">
</div>
</div>
$(document).ready(function(){
$('#x').click(function() {
$('.y').toggle("slide");
});
});
$("sub").click(function(){
$.post("insertzunanja.php",
{
dolzina: $("input[name=dolzina]"),
sirin: $("input[name=sirina]")
},
function(){
$("input[name=dolzina]").val("");
$("input[name=sirina]").val("");
if($('.y').is( ":hidden" )) {
$('.y').toggle("slide");
}
});
});
Basically, when you click on button you call php with AJAX POST request passing two values dolzina and sirin retrieved by the html code(note: you have more values to pass so change it accordingly) to php file. Jquery deletes the values of the input fields and check if input fields are shown. If not the inputs fields are shown.
If you are using PHP to process the form submission and generate the code in your question, and you always want the form to be displayed after submission, you can do this:
At the PHP code identify submission (e.g. isset($_REQUEST['id']) ).
[if #1 is true] On generating jQuery code, add $('.y').show(); within the ready function (but separated from the existing click function).
Example:
<?php
// your existing code...
?>
$(document).ready(function() {
<?= ( isset($_REQUEST['id']) ? '$(".y").show();' : '' ); ?>
$('#x').click(function() {
$('.y').toggle("slide");
});
});
<?php
// your existing code...
?>
Say I have a HTML form that lets you input a name and age and returns with a list of people with that name and age.
<form method="post" action="/search_results">
<input type="text" name="personName">
<input type="text" name="personAge">
<input type="submit" value="Submit!">
</form>
And on the search results page I have a list of the results, but I only display 50 at a time and allow users to go forwards/backwards between the page with buttons. So the results page would also look for a POSTed 'pageNumber' value and default to 0 if there is none.
When they click a button, how would I resubmit the age and name and also submit the corresponding pageNumber from the button?
I'm using PHP
Add a hidden field to the form:
<form name=search"" method="post" action="/search_results">
<input type="hidden" name="pageNumber"
value="<?php echo isset($_POST['pageNumber']) ? (int) $_POST['pageNumber'] : 0; ?>">
<input type="text" name="personName">
<input type="text" name="personAge">
<input type="submit" value="Submit!">
</form>
Add a JavaScript function to modify the hidden field value:
<script>
function search(pageNumber) {
var form = document.forms.search;
if (!form) return;
form.elements.pageNumber.value = pageNumber;
form.submit();
}
</script>
Apply the JavaScript function for the page buttons:
<span onclick="search(1)">1</span>
<span onclick="search(2)">2</span>
Obviously, the buttons should be generated with PHP in the following manner:
<?php
for ($p = 0; $p < $pagesNum; ++$p) {
echo "<span onclick='search($p)'>$p</span>";
}
?>
<form method="post" action="/search_results">
<input type="text" name="personName" value="<?php echo (isset($formdata['personName'])?$formdata['psersonName']:"") ?>">
<input type="text" name="personAge" value="<?php echo (isset($formdata['personAge'])?$formdata['personAge']:"") ?>">
<input type="hidden" name="currentPage" value="<?php echo (isset($formdata['currentPage'])?$formdata['currentPage']:"0") ?>">
<input type="submit" value="Submit!">
</form>
formdata are the data which are the inputs of the previous submit. These data should be returned by the search_results page along with the view.
Below is the js
<script>
$(document).ready(function(){
$(".paginationBtns").click(function(){
var page = $(this).attr('pageValue');
$("input[name='current']").val(page);
$("form").submit();
});
});
</script>
Assumptions of the forward and backward button
<a href="#" pageValue=0>Back</a><a href="#" pageValue=50>Next</a>
You have to append the back and next pageValue while loading each page.
The best practice in pagination to use a simple link that contains the parameres (GET) and not (POST). That way, when you have the parameters in the url you can cache it, add to favorites, get indexed by google, share your page in email/facebook etc.
<a href='http://example.com/?personName=<?=$_POST['personName']?>&personAge=<?=$_POST['personAge']?>&page=<?=$next_page_number?>'>Next</a>
If for some reason you must or really want to use POST you can save the values in hidden inputs within a form in the page and then sumbit it when clicking on "next page" button.
Form example:
notice its just an example you should sanitize the variables and not put them directly from the $_POST
<form name="pagination" method="post" action="/search_results">
<input type="hidden" name="page" id="page" value="2">
<input type="hidden" name="personName" value='<?=$_POST['personName'];?>'>
<input type="hidden" name="personAge" value='<?=$_POST['personAge'];?>'>
</form>
notice that we set the next page numbers & do submit by using a command from the form of:
<button onclick='document.getElementById("page").value= "2";document.pagination.submit();'>Next page</button>
I have Three forms in a page with different submit button and all HTML are properly closed.
all forms have different value..now problem is when i press submit button of any form for store value in database..another form field is get empty..how can i prevent them for stopping them.i want when i press a submit button of any form only these form value submit in database..other form field does not get empty..how can i solve this ..i have done coding for single form like this
<form class="form" method="POST" name="pool">
<label for="name1">Ist Player Name</label>
<input type="text" name="fname" id="fname" />
<label for="name2">2nd Player Name</label></td><td><input type="text" name="sname" id="sname" />
<label for="stime">Start Time</label>
<input type="text" name="stime" id="stime"
<label for="stime">End Time</label>
input type="text" name="etime" id="etime" />
<input type="submit" value="Confirm" name="pool" id="pool" />
</form>
same as 2nd and 3rd form .name are change of all form..and php coding of form like this
<?php
$con = mysql_connect("localhost","root","");
mysql_select_db("snookar", $con);
if(isset($_POST['pool']))
{
/* all procees to save record */
}
then 2 nd form
if(isset($_POST['snooke']))
{
/* all procees to save record */
} and so on...
now how can i done this only specified form value submit and another form does not empty...
You can do the following,
<form class="form" method="POST" name="pool1">
<!-- Form input fields -->
<input type="submit" value="Confirm" name="poolbtn1" id="poolbtn1" />
</form>
<form class="form" method="POST" name="pool2">
<!-- Form input fields -->
<input type="submit" value="Confirm" name="poolbtn2" id="poolbtn2" />
</form>
Now use the jquery to submit the form,
$("#pool1").submit(function(e) {
//Do your task here
return false; //this will prevent your page from refreshing
}
$("#pool2").submit(function(e) {
//Do your task here
return false; //this will prevent your page from refreshing
}
The ajax script.
$('input#form1button').click( function() {
$.ajax({
url: 'some-url',
type: 'post',
dataType: 'json',
data: $('form#myForm1').serialize(),
success: function(data) {
$("#myForm1").resetForm();
return false
}
});
});
Here in the above code form1button is the id of the button that is in the form i-e form with id myForm1
so repeat the same function for the rest of the two form with different form and button ids
Html
<form method='POST' aciton='' id='myForm1'>
some inputs goes here
<input type=button id=form1button />
</form>
I have a page with several forms which are dynamically generated using PHP. I am validating them using the jQuery Validation plugin. The forms are all the same, but relate to different items so I have given all of the forms the same class so they can be validated by one function (each form also has a unique ID). But I'm having some problems:
I would like the error messages to appear by the correct form items, but if I'm just using the form's class, the validator won't know which form the item is from.
I have a hyperlink to submit the form (and a regular submit button in <noscript> tags), and would usually use jQuery to submit the form, but again, how will jQuery know which submit link I've clicked, and which form to submit?
The easiest thing I can think of is to pass the form ID to the validate some how. Is that possible?
The forms look like this:
<?php while($row= pg_fetch_row($groups)) { ?>
<p class="error" id="error-<?php echo $row[0] ?>"></p>
<form action="../scripts/php/groups-process.php" method="post" id="editgroup-<?php echo $row[0] ?>" class="editgroup">
<label for ="edit-<?php echo $row[0] ?>" >Edit group name:</label>
<input type="text" class="text" size="20" maxlength="30" name="edit" id="edit-<?php echo $row[0] ?>" value="<?php echo $row[1] ?>" />
<noscript><input type="submit" name="editgroup" value="Submit" /></noscript>
<div id="submitcontainer-<?php echo $row[0] ?>"></div>
</form>
<?php } ?>
I would normally validate the form like this:
$(document).ready(function(){
$("#editgroup").validate({
rules: {edit: {required: true, maxlength: 30}},
messages: {edit: {required: 'Please enter a group name', maxlength: 'Please enter a shorter group name'},
errorContainer: "p#error",
});
$("#submitcontainer").html('<a class="button" href="javascript:void();" id="submitlink" name="submit">Submit</a>');
$("#submitlink").click(function() {
$("#editgroup").submit();
});
});
give the same class to all the form than try this,
<form id="1" class="common" method="post" action="page.php">
<input type="text" class="common_input_class" size="20" maxlength="30" name="edit" id="whatever" value="whatever" />
<input type="submit" name="submit" class="submit_this_form" value="submit" />
</form>
<form id="2" class="common" method="post" action="page.php">
<input type="text" class="common_input_class" size="20" maxlength="30" name="edit" id="whatever" value="another value" />
<input type="submit" name="submit" class="submit_this_form" value="submit" />
</form>
<script type="text/javascript">
$(".common").submit(function(){
var form_id = $(this).attr('id');
var input_val = $(this).children('.common_input_class').val();
if (input_val == '')
{
alert("input field is required");
return false;
}
});
</script>
I ended up iterating through my result twice, so I create a form validator for each form dynamically, and then dynamically create the forms. This was the best way I could think of to give me the control I wanted, although obviously it's slower and produces more code - not an ideal solution but it will do for this situation.
I have a problem with a wordpress widget that I developed.
It 's just a form with an email field, a button and a checkbox.
When the user click on submit, I want to verify if the checkbox is ticked and IF YES submit the form...
My problem is that the form is submitted even tough the checkbox is not ticked. The page is reloaded.
Here is a short version of my code :
<?php if(isset($_POST['rules']) && $_POST['rules'] == 'Yes')
{
echo 'The checkbox was selected';
} else {
echo 'The checkbox wasn\'t selected';
} ?>
<form id="form-invite" method="post" action="">
<label>Your friend(s) email :</label>
<br/>
<small style="text-transform:uppercase;font-family:Arial;font-size:9px;color:#333;"<em>Multiple emails separated by comma.</em></small>
<input class="kolom" type="text" name="email" id="email"/>
<input class="button-primary classic-button" type="submit" name="send-them" value="Send Invitation"/>
<input type="checkbox" name="rules" value="Yes" /> <span id="rulesInfo">I read the Privacy Policy</span><br/>
<span id="emailInfo"></span>
</form>
Add a simple onsubmit handler to the form, e.g.:
<script>
document.getElementById("form-invite").onsubmit = function() {
return this.rules.checked;
}
</script>
Demo: http://jsfiddle.net/vqVEF/