I have created a Zend based php application.
I am looking for a simple way to create a popup or hoover-over help that I can use to to provide user help for the fields that the user should enter.
I guess I need javascript, and for the Zend form elements some decorator. But I have not been able to figure out how it should work. Maybe I need some CSS as well?
Does anyone have an example.
kind regards,
Vincent
you may use the jquery plugin for validation, which would prevent the form from submitting until first level checks have been passed. You find further information on the documentation page of jquery. But never trust those checks. You should always validate user input in the backend
http://docs.jquery.com/Plugins/Validation
or you use this, based on jquery
<!DOCTYPE html>
<html>
<head>
<title>Form Info</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(':input.form-input').live('focus', function(){ //get input field
$(this)
.closest("div") //get up to div element
.find(".form-info") //and search for corresponding form-info class to that input field
.show(); //show it
}).live('blur', function(){
//once you leave the input field you might to some things
//...
//or just remove the element
$(this)
.closest("div") //get up to div element
.find(".form-info") //and search for corresponding form-info class to that input field
.hide(); //hide it
});
});
</script>
</head>
<body>
<div>
<input type="text" name="blub" value="" class="form-input" />
<span class="form-info" style="display:none;">my info to the customer</span>
</div>
</body>
</html>
I think you are looking for a tool tip for your controls.
Check this out jQuery Tooltip Plugin Demo
or this jQuery tools: tool tip
Related
I am using React if that helps.
I'm working on some user actions analytics for my website which has a form. I'm adding a logger on some user actions. One of them being I want to log every time the user clicks on the input field to enter some value into it. How can I achieve this functionality?
I was thinking of onClick but I don't think that would be the best way to go about it cause that wouldn't serve the purpose.
<input onClick={logCount}>
More info about events:
https://reactjs.org/docs/handling-events.html
I'm not exactly sure why you're claiming an onclick event wouldn't be the right approach.
You can add an ID to the input tag and access it through a JavaScript file, adding an onclick event to it.
<!DOCTYPE html>
<html>
<body>
<input type="text" id="test">
<script>
document.getElementById('test').onclick = function() {
console.log('An input field with the id "test" has been clicked.')
}
</script>
</body>
</html>
In one of my webpage i need to add PayPal payment button, in which value has to be entered by input.
i got this script to add PayPal button:
<script
async="async" src="https://www.paypalobjects.com/js/external/paypal-button.min.js?merchant=email#adress.com"
data-button="paynow"
data-amount="5"
data-currency="USD">
</script>
Now i have to change the value of "data-amount" every time by Input from User.
I tried to use onkeyup, setAttribute but both don't seem to work. Please suggest what should i do or where i'm making mistake.
<!DOCTYPE html>
<html>
<script>
function showMe(e) {
var x=e.value;
document.getElementsById("paypal").setAttribute("data-amount", "x");
}
</script>
<body>
Amount: <input type="number" name="amount" id="amount" onkeyup="showMe(this)" required>
<script id="paypal"
async="async" src="https://www.paypalobjects.com/js/external/paypal-button.min.js?merchant=payPalmerchantId"
data-button="paynow"
data-currency="USD">
</script>
<br><br><br>
<p>You will be redirected to Payment Gateway..</p>
</body>
</html>
try this..
function showMe(e) {
var x=e.value;
$("#paypal").attr("data-amount", x);
}
or doing everything in jquery
$("#amount").on('input', function() {
$("#paypal").attr("data-amount", $("#amount").val());
});
I'm not familiar with PayPal scripts, but as I know, such types of embedding set attributes and any other features at step of initializing...
So you have to reload your script.
You could also search for the ability to change attributes with the help of API provided by PayPal
Update:
I've just tried to insert your code into my local page...
Your script searches for element with id "paypal", but if you look at your code after tha page loads, you won't see even "script" tag which refers to the paypal js file. You'll see a form instead. Try to search for "script" word here and you won't find that tag. At least this reason is why your script doesn't work.
I have a tiny issue if anybody can help... I am trying to implement a form, so when the page loads the textbox is disabled. If the user wishes to amend information they first have to press a button which will enable the text box.
<input id="text" type="text" disabled="disabled">
<br />
<button>Enable</button
So I have a basic textbox which is disabled. Then an event that should enable the textbox...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#text").attr("disabled","false");
});
});
</script>
I can get this working when the textbox is not initially disabled and I want to disable it, though I can not get it working the other way round - when it is disabled and I want to enable it.
Can anyone point me in the right direction?
Hi i have created a jsfiddle for you see the working example...
you should use removeAttr instead of attr
code:-
$(document).ready(function(){
$("button").click(function(){
$("#text").removeAttr("disabled");
});
});
link:-http://jsfiddle.net/L7S37/15/
You are giving boolean value as String
Use this
$("#text").attr("disabled",false);
instead of
$("#text").attr("disabled","false");
DEMO
Or you can use this, Even the last answer by Mr Soni is correct.
$(document).ready(function(){
$("button").click(function(){
$("#text").prop('disabled', false);
});
});
Code:
<script type="text/javascript">
$(".reset_form").click(function() {
$(this).closest('form').find("input, textarea").val("");
});
</script>
Button:
<div class="reset_form">
<a class="anchor_link">
<span class="reset_button">
Reset
</span>
</a>
</div>
Using the code above I want to be able to clean input fields of their content when a user clicks on reset_form. However, being new to JS/JQuery I am unsure as to how to accomplish this since I am not using an input button but a div that looks like a button.
Question
How can i tweak my code so that when a user clicks on .reset_button that the fields will be cleared?
<div class="form-container">
<form>
<input type="text" />
<textarea></textarea>
</form>
<div class="clear-form">
<span class="reset_button">Reset form</span>
</div>
</div>
$(document).ready(function() {
$('.clear-form').on('click', function() {
$(this).closest('.form-container').find('input, textarea').val('');
});
});
Fiddle
In order to help you use the DOM traversal selectors like closest() and find(), it is first necessary to know roughly where your form is in relation to the .reset_form <div>, does it have an ID attribute (which makes it very easy to select the form), etc.
However, assuming there is only one form on the page, then this code will work:
Working jsFiddle example
$(".reset_form").click(function() {
$('form').find("input, textarea").val("");
});
As Jedediah mentions below, the above code will reset/clear all forms on the page. If you only wish to clear one specific form, then you can specify an ID in your form tag, thus:
<form id="justthisform"> ... </form>
You can clear only that form by modifying the active line as follows:
$('#justthisform').find("input, textarea").val("");
If you want to clear all elements in the form (radio reset to defaults, dropdowns, etc) you can use the native reset on the form DOM object but use jquery to find it like this:
<script type="text/javascript">
$(".reset_form").click(function() {
$(this).closest('form')[0].reset();
});
</script>
Well one thing to note is that HTML forms natively support resetting via a reset function in the browser:
$(".reset_form").click(function() {
$(this).closest('form')[0].reset();
});
But yeah if your function isn't working then it looks like your (fake) button isn't embedded within the form itself. jQuery's .closest() function will find the form if you do
$(this).closest("form")
So the only thing you need to fix is finding that form.
I have the next trouble.
I am creating the web part in sharepoint. I need a Jquery datepicker.
When i try to bind it with the html textbox it works.
But when i try to bind it with the Asp:textbox it doesn't work.
Does anyone have any ideas?
Thanks. I will appreciate any help.
<script type="text/javascript">
$(document).ready(function() {
$('#tbDateOfPurchase').datepicker();
});
</script>
<asp:TextBox ID="tbDateOfPurchase" runat="server"></asp:TextBox> //doesn't work
<input id="tbDateOfPurchase" type="text" /> //works
This should work:
<script type="text/javascript">
$(document).ready(function() {
$('input[id$=_tbDateOfPurchase]').datepicker();
});
</script>
Like #redsquare noted it is the server side ID of the Textbox transforming into something else altogether on the client that is causing this.
The above code selects all the input elements that has a client id ending with _tbDateOfPurchase using Attribute Ends With Selector [name$=value]
You need to change the id in your jquery selector as the id at design time is not the rendered to client id. Check your html and see what the rendered id is.