I've got kind of a situation here : I have the following form :
<form action="sample.php" id="searchform" method="post">
<input type="text" id="key_words" name="key_words" value="<?php echo isset($_POST['key_words']) ? $_POST['key_words'] : '' ?>"style="width:377px;">
<input type="text" name="minimum_price" value="<?php echo isset($_POST['minimum_price']) ? $_POST['minimum_price'] : '' ?>">
<input type="text" name="maximum_price" value="<?php echo isset($_POST['maximum_price']) ? $_POST['maximum_price'] : '' ?>">
I'm using the php script in value because i need to keep the value in text box persistent. So, now i need to clear the values in text box when i click a button:
<button type="reset" value="clear" onclick="clearform()">Clear</button>
I've tried a few things and failed. Help please? JavaScript can also be used for clearform() method.
You just need to get the elements by id and set the value attribute to empty string:
function clearform()
{
document.getElementById('key_words').value = '';
//same thing for other ids
}
For your minimum_price and maximum_price you need to add an id since you only have name right now.
Also in this case since you don't want to use HTML's standard reset functionality don't make the button type reset.
It`s will be work for you:
<form action="sample.php" id="searchform" method="post">
<input type="text" id="key_words" name="key_words" value="test1"style="width:377px;">
<input type="text" name="minimum_price" value="test2">
<input type="text" name="maximum_price" value="test3">
<button type="reset" value="clear" onclick="clearform()">Clear</button>
</form>
<script>
function clearform() {
var form = document.getElementById("searchform");
var textFields = form.getElementsByTagName('input');
for(var i = 0; i < textFields.length; i++) {
textFields[i].setAttribute('value', '');
}
}
</script>
Related
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 a form, that is this one
<form method="get" action="<?php bloginfo('url'); ?>">
<input name="date-beginning" type="text" class="datepicker" />
<input name="date-end" type="text" class="datepicker" />
<input name="s" type="text" />
<input type="submit" value="Ok" class="botao-pequeno botao-pequeno-input" />
</form>
Well, when the user sends all the fields, we get this response:
http://myblogurl.com/?s=example&date-beginning=05/05/05&date-end=07/07/07
If he doesn't fill, for example the date-beginning field we get http://myblogurl.com/?s=example&date-beginning=&date-end=07/07/07
What I want is that if he doesn't fill the field, for example date-beginning, the form still be sent, but variable don't to get sent, like this: http://myblogurl.com/?s=example&date-end=07/07/07
Is there a way to do it? How?
var form = document.forms[0];
form.addEventListener('submit', function(){
var a = document.getElementsByName('date-beginning')[0];
if(a.value === '')
a.disabled = true;
});
karaxuna's anwser works. I just adapted it to jQuery, if any one is interested, this is the code
$("#the-form").submit(function() {
if($('#the-field').val() === ''){
$('#the-field').attr('disabled',true);
}
if($('#the-other-field').val() === ''){
$('#the-other-field').attr('disabled',true);
}
});
I'm trying to create an integer update form field for my cart system. On the page, I already have a + and - function to increase and decrease the quantity by 1. How could I include an integer form field next to the (+) and (-) to udpate by a certain result and then send this to the cart page. Thank you very much for any help.
This is the main part of the code that is enclosed within PHP (I left out the information before the first a href link because it isn't important)
(+)
(-)
I'm not quite sure if i really get your question right, but i think you want to change an input field in a chart.
i think you should solve that problem with JavaScript instead of PHP, because you have to reload the page on every Click.
in jQuery it would like that:
$(".increase").each(function() {
$(this).click(function() {
var ipt = $("#" + $(this).attr("data-what"));
ipt.val(parseInt(ipt.val()) + 1);
});
});
$(".decrease").each(function() {
$(this).click(function() {
var ipt = $("#" + $(this).attr("data-what"));
ipt.val(parseInt(ipt.val()) - 1);
if(parseInt(ipt.val()) < 0) {
ipt.val(0);
}
});
});
and the html is:
<div class="item">Item 1 <input type="text" id="item1" value="1" size="2"> (+1 | -1)</div>
<div class="item">Item 2 <input type="text" id="item2" value="1" size="2"> (+1 | -1)</div>
<div class="item">Item 3 <input type="text" id="item3" value="1" size="2"> (+1 | -1)</div>
see http://jsfiddle.net/axYfq/4/
and with the submit button you get the right quantity :)
You'll have to post a form to cart.php:
<form action="cart.php" method="post">
<input type="text" name="qty"/>
<input type="submit" name="submit_increase" value="(+)"/>
</form>
<form action="cart.php" method="post">
<input type="text" name="qty"/>
<input type="submit" name="submit_remove" value="(-)"/>
</form>
And in your cart.php, you can use if (isset($_POST['submit_increase'])) to determine if you're increasing or decreasing, then $_POST['qty'] to grab the number of items to add/remove.
This isn't the only solution. You could use one form, hidden inputs, or javascript to build a query string. Its up to you.
You could use javascript getelementbyID to do this.
First, you will need a form field with an appropriate ID:
<input type="text" name="quantity" id="NumberOfItems" />
Then put a span around the (+) and (-) to call a JS function:
<span onclick="IncrementNumber()">(+)</span>
<span onclick="DecrementNumber()">(-)</span>
Then you can use getelementbyID to change the value when they click a button:
function IncrementNumber()
{
document.getElementById("NumberOfItems").value-=-1; // Messy, but works
}
function DecrementNumber()
{
document.getElementById("NumberOfItems").value-=1;
}
I believe you need to use a form here. Try doing:
<form action="#" method="POST">
<input type="hidden" name="user_action" value="increase">
<input type="submit" value="increase">
</form>
<form action="#" method="POST">
<input type="hidden" name="user_action" value="decrease">
<input type="submit" value="decrease">
</form>
This way you will output two buttons, and when the user clicks on each one, you will get their action from the $_POST variable. So then you could do something like:
<?php
if(isset($_POST['increase'])){
$number_of_items += 1;
}
if(isset($_POST['decrease'])){
$number_of_items -= 1;
}
?>
<p>You have ordered <?php echo $number_of_items; ?> items</p>
i have a little problem about PHP
there is two input for num1 and num2
and another input answer,,can the output in the php be putted in the input text answer??
<input type="text" name ="num1">
<input type="text" name ="num2">
<input type="text" name ="answer">
Try something like this:
<?php
if(!empty($_POST['num1'])){
$num1 = $_POST['num1'];
$num2 = $_POST['num2']
$answer = $num1 + $num2;
}
?>
<form action="yourpage.php" method="post">
<input type="text" name ="num1" value="<?=#$num1?>">
<input type="text" name ="num2" value="<?=#$num2?>">
<input type="text" name ="answer" value="<?=#$answer?>">
<br/>
<input type="submit" id="btnSubmit" value="POST ME" />
</form>
Not tested btw...
<?php
//get the values and calc..
$answer = $_GET['num1'] + $_GET['num2'];
//more secure, $answer = floor($_GET['num1']) + ...
?>
<html><body>
<form method="get" action=".">
<input type="text" name ="num1">
<input type="text" name ="num2">
<input type="text" name ="answer" value="<?php echo $answer;?>">
<input type="submit">
</form>
...
The jQuery answer that was suggested by riky has shown up on SO before. Try:
How to update the value in one text box based on the value entered in another text box?
As per the OP's request for an fleshed out version of the jQuery answer, modifying the linked to answer gives something like:
$('#num1').change(function() {
var txtAmtval = $('#num1').val() + $('#num2').val();
$('#answer').val(txtAmtval);
});
$('#num2').change(function() {
var txtAmtval = $('#num1').val() + $('#num2').val();
$('#answer').val(txtAmtval);
});
Is that what you had in mind?
Obviously you'd need to include jQuery too.
Please see code in action here: http://jsfiddle.net/9KEsY/
I need to get result where PHP generated ID for current button click is displayed in html textfield...
Is there any easy way of doing this?
This is the link of what I am trying to do http://dtech.id.lv/lat.php
When user first comes he doesn't have code, so he clicks get code.
I need that php generated code is pasted in textbox after this click...
Could someone help?
Thank you!
Button clicked, something shows in the text field. Sometimes Javascript isn't necessary.
<?php
$code = "";
if (isset($_POST['buttonId']))
{
$code = 'Some code here';
}
?>
<form method="post" >
<input name="textField" id="textField" type="text" value="<?php echo $code; ?>" />
<input name="buttonId" id="buttonId" type="submit" value="Submit" />
</form>
Assuming your html looks like this:
<button id="myPHPid">...</button>
<input type="text" id="idRecipient" />
then
<button id="myPHPid" onclick="document.getElementById('idRecipient').value = this.id">...</button>
try this code
$('button').live('click',function() {
var $butVal= $(this).val();
alert($butVal);
$('input#buttonValue').val($butVal);
return false;
});
live DEMO