I have a problem with javascript. I have downloaded a rating star plugin , this one to be exact: http://www.fyneworks.com/jquery/star-rating/#tab-Testing
I have multiple things to rate on one page, so i thought i could use an onclick to send it to a function, that sends it to my database with ajax. The problem is, when a rating star is clicked nothing happens, ive tried it on a regular submit button and the function gets executed.
Here is the code :
<script type="text/javascript">
function postform(){
alert('Thing is clicked');
};
</script>
And the star is actually a radio button:
<input name="adv1" type="radio" class="star {split:4}" value="0.50" onclick="postform()"/>
I can't see what is wrong with the code, because when i test it on a regular button like this :
<input type="submit" value="testbutton" onclick="postform()"/>
It gives me the alert Thing is Clicked.
Somehow the star doesn't like the onclick stuff..
Ive tested it in IE, Chrome and FF, nothing ever happens
could someone help me out here?
Thanks alot!
Edit:
As requested by Lukas , i have this in my head :
<script type='text/javascript' src='jquery.min.js'></script>
<script src='jquery.MetaData.js' type="text/javascript"></script>
<script src='jquery.rating.js' type="text/javascript"></script>
That library is handling the onclick event of the radio button for you, so you cannot handle it by adding an attribute onclick to the input element.
According to their documentation you need to put some code like this in a script:
$('.auto-submit-star').rating({
callback: function(value, link){
alert(value);
}
});
Then add the class auto-submit-star to the class list of your radio button:
<input name="adv1" type="radio" class="auto-submit-star {split:4}" value="0.50" onclick="postform()"/>
Related
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);
});
});
I'm having a strange behaviour with this code:
<script type="text/javascript">
function get()
{
alert("gggg");
jQuery.get (
"http://localhost:8080/c/portal/json_service",
{
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : document.getElementById("nombre")
}
);
}
</script>
<div>
<form>
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="button" value="Submit" onClick="javascript:get()"/>
</form>
</div>
Liferay portal gets blocked when the button "Submit" is pressed. The pop-up with the message "gggg" is showed, but after click ok on it, the page becomes blocked.
If I remove the line 'param : document.getElementById("nombre")', it doesn't block.
Can anyone explain me where is the error, or the reason of this behaviour?
Thanks in advance,
Rafa
The problem is that you're trying to pass an entire DOM element as the value for param, which jQuery isn't going to like. What type of element has ID nombre, and what property from that element do you want? If it's some kind of input, you likely want the value property, so you'd do:
param : document.getElementById("nombre").value
Updated Answer:
Thinking this through a little more, you should probably do this in a different way altogether. You're sending the data when the user clicks on the submit button, but remember if a user hits enter while typing in the input text box the form will submit but your code will not catch that.
A more robust solution would be to do it this way instead:
<div>
<form id="nombre_search">
<input type="text" id="nombre" value="<%=searching%>"/>
<input type="submit" value="Submit"/>
</form>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#nombre_search").submit(function(){
$.get("http://localhost:8080/c/portal/json_service", {
serviceClassName: "com.liferay.test.service.TrabajadorServiceUtil",
serviceMethodName: "findByName",
servletContextName: "TrabajadorPlugin-portlet",
serviceParameters: "[param]",
param : $("#nombre").val()
});
return false;
});
});
</script>
Changes to your code:
Added an id to the form.
Made the submit button a submit button instead of just a button.
Placed code inside $(document).ready block.
Code runs when form is submitted not when button is clicked.
Hope this helps,
Sandro
I am using the following code to make a custom checkbox with my own images and it works but it's using a Checkbox and I need to use Radio buttons.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#moreinfo").change(function() {
if(this.checked) {
$(this).prev().attr("src", "checkbox_unchecked.gif");
} else {
$(this).prev().attr("src", "checkbox_checked.gif");
}
});
});
</script>
Next...here's the HTML:
<label for="moreinfo">
<img src="checkbox_unchecked.gif"/>
<input name="moreinfo" type="checkbox" id="moreinfo" style="display:none">
</label>
If it a question of changing from checkbox to radio type or does the jquery need changing too?
How do I go about this?
Change the type="checkbox" to type="radio" (and add some more radio buttons for testing, grouping them via the name attribute, they may not have the same id as IDs are unique!). Then, you also need to handle the click event of the replacement images.
But actually, that's going beyond your original question, which you could have solved by simply trying it out. ;)
A Radio Button uses also the attribute checked. So you can switch the element without changing the script (perhaps the gifs).
But your script will never run, because your checkbox/radio button is not displayed.
So you need some functionality to change the status when clicking the image.
I have written this code for Firefox:
<html><head><title>No</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
<body>
<form action="javascript:void(alert('Yes'));">
<input type="submit" value="Submit">
</form>
<script>$($('form').submit())</script></body></html>
It correctly displays the alert box.
However, when i run this inside an iframe, with this code:
<html><body><iframe src="click.php"></iframe></body></html>
i don't get the alert box, not even if i click the submit button myself.
What is going on exactly? The same code works in Chromium
Well, don't do that then!
It doesn't make any sense to submit a form to a javascript: URL. Use a submit event handler to pick up the form submission and execute script, eg using jQuery:
$('#someform').submit(function() {
alert('Yes');
return false;
});
A good rule of thumb about when to use javascript: URLs is: never.
It looks like it's a problem with FF4 so I'll discuss it on their bugzilla if it's really their fault. I have modified the source so I'm not even sure it is a bug...