I have two input boxes, the first input box will accept a value that will be subtracted from the value stored in a cookie. The second input will auto generated the difference while I am typing.
What is the best solution for this?
The best solution is to use vanilla Javascript only.
You can read cookies directly from Javascript:
http://www.quirksmode.org/js/cookies.html
You can make the second input un-editable using readonly attribute:
http://www.w3schools.com/tags/att_input_readonly.asp
You can do math directly in the onkeyup event of the first input:
http://www.w3schools.com/jsref/event_onkeyup.asp
Hook the keyup and mouseup events on the first input box. In the handler do parseInt() on its value, if !isNaN() calculate the difference and write it to the second input box.
I don't see, why you would need ajax for a subtraction!
As cookies can be created, read and erased by JavaScript you can accomplish this task using javascript. As Eugen Rieck points out you can use keyup/down events.
You only need Javascript. Use Serverside (PHP|PYTHON|JAVA|PERL) only if you need to store it on server. Or wants to show results to other people.
For your case , server side is only needed If you want to:
Store it on the server so other people can see it.
Multi User subtraction ?
Log what visitor did.
<script>
function subtract(first, second)
{
total = first - second;
obj("total").value = total;
}
function obj(id)
{
return document.getElementById(id);
}
</script>
<input type="text" id="first" onkeyup="javascript:subtract(this.value, obj('second').value)" />
-
<input type="text" id="second" onkeyup="javascript:subtract(obj('first').value, this.value)"/>
=
<input type="text" id="total"/>
Related
I would like to be able to get as many properties from a button to show as I can.
The button:
<input name="Accept" type="submit" class="button" id="Accept" value="Accept" />
The button code:
if(isset($_POST['Accept'])){
//show button properties here
}
What I would like it to show on button press:
name: Accept
type: submit
class: button
id: Accept
value: Accept
and what ever else can be shown
Thank you in advanced.
One possible way, without using javascript would be to store a copy of the data in the name of the element:
<input name="Accept" type="submit" class="button" id="Accept" value="Accept" />
becomes:
<input name="Accept.submit.button.Accept" type="submit" class="button" id="Accept" value="Accept" />
You can get the value from your $_POST array. For the rest of the properties, just split up the key of the element using explode().
There is no way how to get properties of HTML element by normal HTML behavior - but you can use JavaScript function that handles "onSubmit" form event by which you can send all you need.
There is no way to submit properties of an input besides the name and value, however you can have hidden inputs on the form with whatever information you want, and you can even create them or populate them dynamically in the button's onclick even or the form's onsubmit event.
As another option I would stuff in the information in the button's value in JSON form, since the button's value usually anyway serves no purpose.
And if you are really out for ideas then you can stuff the info in the query string of the url in the action attribute of the form, and then get the info by checking the GET array (however if the form method is get instead of post then the values might get overwritten!)
But if yout problem is only that you need a way to distinguish between many buttons, then just have a different name or value for each of them, and this is probably the only reason why buttons have names and values.
Regarding andrejd's answer please note that while you can use the onSubmit function to to submit with Ajax and then return false to cancel the default submit, please note that the following problems exist with that approach:
1) That the onSubmit function doesn't know which button was pressed, however you can instead use the button's onClick event, but you will have to bind to every submit button on the form (you can do this much easier with jquery etc.)
2) Since Ajax does not affect the page content so ypu will refresh it on your own or navigate the page on your own, the latter can be done using "location.href"
3) If you are submitting files you will have a hard time doing it with ajax, you can try the use the jquery fileupload plugin.
4) Ajax is restricted to the same origin (something tgat form submittion isn't), you can try to workaround using JSONP.
5) Ajax will not work if the client doesn't have JavaScript (such as some mobile phones or some text browsers such as linux browsers) or has disabled JavaScript or is using an older browser, and in general it is not recommended to rely solely on Ajax but instead at least provide an alternative for these cases.
For problems 2-4 you can aldo solve them by having the Ajax just the extra content and then return true to let the default submission submit the form.
I have got a shopping cart which is build using jquery and php. and I need to generate hidden values for item id. Every time I click add, the value must be different.
I do not know how to create dynamic values which will be different on each click.
At the moment I created with php the following code.
<form method="post" action="" class="jcart">
<? $unique = md5(uniqid()); ?>
<input type="hidden" name="my-item-id" value="<?=$unique;?>" />
<input type="submit" name="my-add-button" value="add to cart" class="button" />
</form>
The problem is unless I refresh the page I'm getting same hidden value. What can I do to get different values without refreshing the page.
with the date ?
Date.getTime();
You could store a simple integer in a cookie and use that as the basis for an incrementing counter to generate that "unique" value. As long as you take care to not have multiple 'add' scripts running at the same time and make sure your cookie updating code is bulletproof, it should take care of the uniqueness problem.
if you are adding using ajax, set it in the return of the ajax call
If the value can be random, you could use a javascript time call like getTime() that will get the number of milliseconds since 1972. It's not likely you'll get a duplicate ID, but you could append a random number to it to be sure.
The best approach would be to use an Ajax call (via jquery) to your server and get the ID from the server.
I think you may need to use jQuery load() function and have a PHP page that generates the md5() id for you like this:
<script>$('input[type=hidden]').prev().load('ajax/uniqueId.php');</script>
the jQuery would be placed next to the Add button.
And your PHP page would look like this...
<?php
echo md5(uniqid());
?>
Try uniqid() http://php.net/manual/en/function.uniqid.php
I'm using Codeigniter and wants to know how I can make a checkbox that submits the form on click?
Secondly, this checkbox will be one of several checkboxes that will act as a filter like products > $20, products < $30, how do i pass it in the url? I'm thinking /1+2+3
Haven't worked with Codeigniter much, but I can answer how to make the form submit on checking the checkbox with JS:
<form id="something">
<input type="checkbox" name="foo" id="foo" value="yes" />
</form>
<script type="text/javascript">
$("#foo").click(function() {
if ($(this).is(":checked"))
$("#something").submit();
});
</script>
The javascript questions seem to have been solved already; let's step to the codeigniter ones.
You can pass the url in one of those two ways.
Idiomatic but limited: as /1/2/3/4/etc. The controller function handling that url could both use func_get_args to read them or, if you already know how many parameters will be passed at the most, give a default value of null to all non-necessary paramenters;
Not Codeigniterish but seriously better for search parameters: enable the query strings on your config file, pass arguments as you would normally with GET (min=2&max=3 and so on) and get their value with CI's input class ($min = $this->input->get('min')).
This has nothing to do with PHP, nor CodeIgniter. The solution is to submit the form in the onclick event of the element.
<input type="checkbox" name="filterx" onclick="document.forms[0].submit()" />
You can use the OnSubmit event of the form to nicely format the url, if you like.
To do this, you can
get the values of all desired elements,
build a nice url from it,
set the url using location.href = yourniceurl,
cancel the regular submit by returning false.
Note that both solutions require javascript to be enabled. So it is a good thing to have other means of submitting the form (submit button). Don't rely on submitting by pressing Enter. Opera will use the Enter key for toggling the checkbox instead of submitting the form.
If you like, you can hide the submit button using Javascript, that way, users having Javascript will have their form auto-submitted, while users without can use the button.
You will need to make sure that your server side form validator not only accepts the nice url, but the ugly url (which posts values like ?filterx=on) too.
I've got a pretty complicated (for me!) form validation to do. I did all js and now I'm doing php stuff.
The thing is I've put a possibility to copy part of the inputs to other, similar section (recipient -> payer). It's all done by jQuery first copying $("input.payer_sth").val() to $("input.payer_sth"), and then doing it again and again on keyup and blur.
All my inputs are built like that:
<input id="payer_name" name="payer_name" class="foo" type="text" value="<?=$_POST['payer_name']?>"/>
as long as the ones that aren't modified by jQuery work all right on submit and "back", the ones that has modified val() are empty on back.
What's obvious for me is that jQuery is overwriting value="<?=$_POST['field']?>" .
How can this be fixed?
Based on my comments above, you may want to do this on server-side instead of client side.
Example (not the cleanest, but you'll get the point)
<input id="payer_name" name="payer_name" class="foo" type="text" value="<?= (!isset($_POST['player_name'])) ? 'Enter your name' : $_POST['payer_name']?>"/>
So what this will do, is if there is no post set it will output "Enter your name" into the field, if the $_POST is set it will output the value of the post into the field.
The construct is called a ternary operator: http://php.net/manual/en/language.operators.comparison.php
You can clean it up a bit on your side, but this will do the trick and it'll avoid the use of JavaScript for something like this where JS should not be required by the end-user.
In PHP, in a particular CMS I am using a custom field, which works like google suggest.
As in, for each letter I type an SQL query is performed and matching records are displayed. When clicking on a record it fills the field with that record.
I am fairly certain this is all done with JavaScript.
I need to know how I can access the resultant content of that field, with the text placed through JS, before it is submitted so I can explode() it.
The CMS I am using is using mootools, so a solution relying on mootools would be ideal.
(This answer assumes that you have control over the markup of your forms (the form that requires a string "explosion" before submit) and/or you feel comfortable tinkering with whatever plugins you're using.)
first, make sure that you aren't submitting your form using an actual submit button (). We'll need to submit the form using javascript after fiddling with the field's contents.
next, make sure that your input box (the one you're grabbing text from) and your hidden inputs have unique ids. This will make it easier to query the DOM for the data we need.
Inside your form, in place of a "real" submit button, create a form button:
<form action="something.php" name="myform">
<input type="hidden" id="hiddenItem">
// SOME STUFF
<input type="text" id="autocomplete_field" value="whatever"/>
// SOME OTHER STUFF
<input type="button" value="Submit" onclick="processForm(this)"/>
</form>
Then, write a javascript function to process the string and submit the form:
processForm = function(el){
text = $('autocomplete_field').get('value');
// Lets assume the strings separates words (what you're exploding apart) using spaces
// something like 'DOGS CATS BIRDS PETS'
var array = text.split(' ');
// returns ['DOGS','CATS','BIRDS','PETS']
$('hiddenItem').set('value',array[0]);
// #hiddenItem now has the value 'dogs'
//SUBMIT THE FORM
el.getParent('form').submit();
};
Hope this helps!
You could try to use JS to send the field on some event (onkeyup?) to your php script. After it does it's part, store the result as a session variable and you can retrieve that later.
Try using jquery's get function.
Was that your question?