What's wrong here? The alert function was working until I added this new function to it.
Is there anything I am doing wrong? It just simply doesn't fire the alert anymore.
<input value="1" type="checkbox" name="salgsvilkar" id="checkbox2" style="float:left;"
/>
{literal}
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() {
//checkbox
$("#scrollwrap").click(function(){
$("#scrollwrap").toggleClass('highlight');
});
});
$(function(){
//button
$("#fullfor_btn").click(function(e){
if(!$("#checkbox2").is(':checked') == false)
{
alert("Please accept the terms of sale.");
e.preventDefault();
}
});
});
</script>
{/literal}
<button type="submit" class="submit" name="{$method}" id="fullfor_btn" title="Fullfør bestillingen nå" value=""> </button>
Instead of:
if(!$("#checkbox2").is(':checked') == false) {
why not just use the much more readable:
if($("#checkbox2").is(':checked')) {
EDIT: If your intention is for the alert to fire when the checkbox is not checked:
if(!$("#checkbox2").is(':checked')) {
Your logic is probably not what you intended, as karim79 said.
if(!$("#checkbox2").is(':checked') == false)
is identical in function to
if($("#checkbox2").is(':checked') == true)
so your alert will only trigger when the checkbox is checked.
you can put all your code in the same $(function(){ code }) in your example, you are setting the document ready twice
$(function() {
//checkbox
$("#scrollwrap").click(function(){
$("#scrollwrap").toggleClass('highlight');
});
//button
$("#fullfor_btn").click(function(e){
if($("#checkbox2").is(':checked'))
{
alert("Please accept the terms of sale.");
e.preventDefault();
}
});
});
Works for me.
Though it seems a little odd that you'd trigger the alert when the checkbox is checked, instead of when it is not.
Related
I am trying to create a button that is unclickable at first. But when the user types in anything in a textfield, the button should be clickable. How do I do that? I know this will involve AJAX and I really don't know how to use AJAX. Any ideas how? Thank you in advance!
EDIT: I forgot to add that my textfield and button are inside separate fields in a CGridView. I'm sorry.
$('#some_text_box').on('input', function() {
$("button").prop('disabled', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="some_text_box" type="text"/>
<button id="button" type="button" disabled>Click Me!</button>
with jquery
jQuery('#some_text_box').on('input', function() {
$("#button").prop('disabled', true);
});
Use jquery keyup function DEMO
<input type='text' id='t1'/><button disabled id='button'>submit</button>
jquery:
$('#t1').on('keyup', function(){
if($(this).val() != "") {
$('#button').prop('disabled',false);
}
else {
$('#button').prop('disabled',true);
}
});
Simply the question is that, how to off all events with one call, for example if I have another events like 'mouseleave, mouseenter, keyup, keydown ...'.
What I'm doing here is that each time the dialog is showed I turn off (off) the events, this 'off' works well with click, but I want a code to turn off all events with one call, I tryed: $('.dialog').off('**'); but it doesn't works. If I don't use off I get multiple calls to click (multiple hello worlds).
I have a code like this:
myform.php
<script type="text/javascript">
$(document).ready( function () {
$('.dialog').off('click');
$('.dialog').on('click', '.mybutton', function() {
alert('hello world');
});
});
</script>
<input type="button" class="mybutton" value="click me!"/>
html:
<html>
<head>
<script type="text/javascript">
$(document).ready( function () {
function openDialog()
{
$.post( '/myform.php', null, function (data) {
$('.dialog').html( data );
$('.dialog').show();
});
}
function closeDialog()
{
$('.dialog').hide();
$('.dialog').html('');
}
});
</script>
</head>
<body>
<div class="dialog" style="display:none">
</div>
<input type="button" onclick="openDialog();" value="show dialog!" />
<input type="button" onclick="closeDialog();" value="close dialog!" />
</body>
</html>
You can pass no arguments and it unbinds all of them.
$("element").off();
jsFiddle.
I think that the unbind() method would work here.
http://api.jquery.com/unbind/
"removes all previously attached event handlers
I have a dialog ($('.dialog').show()), that writes a form ($.post('/form/xyz', null, function (data) { $('.dialog').html( data );} )). That form has an script (javascript/jquery) like this:
<script type="text/javascript" src="myform/script.js">
<form>
<input type="text" value="click me!" id="clickme" />
</form>
The script has the following code:
$(document).ready( function () {
$(document).on('click','#clickme', function () { alert('you clicked me'); } );
});
The problem is: each time the dialog is showed I need to re-execute the script but when I click #clickme I get the alert showed the times that the script was executed.
I never noted this problem (I don't know why) but now that is happening. I'm working with jQuery 1.9.2, and I'm thinking to use the function (preventPropagation), but I think this isn't reliable because I should need to do this at each 'on' event. In addition, I believed that doing an 'script loading history' will solve the problem to control that, but I have the problem that when I need to execute functions when the form is loaded I will cannot re-execute automatically as well as I'm doing now.
What's the solution?
Full example:
HTML
<html>
<head>
<script type="text/javascript">
$(document).ready( function () {
$('#open-dialog').on('click', function () {
$.post( '/server-form.php', null, function (data) {
$('.dialog').html( data );
});
});
});
</script>
</head>
<body>
<div class="dialog">
</div>
<input type="button" value="Open dialog" id="open-dialog"/>
</body>
</html>
PHP (server-form.php)
<script type="text/javascript" src="dynamic-script/30a2f63d6276a21db19782b2d8c93363.js">
<form>
<input type="text" value="click me!" id="clickme" />
</form>
*DYNAMIC-SCRIPT dynamic-script/30a2f63d6276a21db19782b2d8c93363.js *
$(document).ready( function () {
$(document).on('click','#clickme', function () { alert('you clicked me'); } );
});
That's all!!!
You should try this:
$(document).ready(){
$("#clickme").click(function(){
alert("you've clicked me!");
})
}
i am building one form with fancy box, form work fine but i could not get value from text box.
my java script is
$(function () {
$("#button").click(function () {
var yourName = $("input#yourName").val();
alert(yourName);
if (yourName == "") {
$('input#yourName').css({
backgroundColor: "#F90"
});
$("input#yourName").focus();
return false;
}
$.ajax({
type: "POST",
url: "bin/form1.php",
data: $("#login_form").serialize(),
context: document.body,
success: function (res) {
var success = '<?php echo sprintf(_m('Success name % s '), "" ); ?>';
success = success.replace(/^\s*|\s*$/g, "");
var RegularExpression = new RegExp(success);
if (RegularExpression.test(res)) {
alert('Message Sent');
$.fancybox.close();
} else {
alert('Error While processing');
}
},
});
return false;
});
});
now my html is
<div style="display:none; height:450px">
<form id="login_form" action="">
<p id="login_error">
Please, enter data
</p>
<input type="hidden" name="action" value="send_friend_post" />
<label for="yourName" style="margin-right:110px;">
<?php _e( 'Your name', 'newcorp') ; ?>
</label>
<input id="yourName" type="text" name="yourName" value="" class="text_new " />
<br/>
<input type="submit" value="Submit" id="button" class="text_new" style="background:#930; color:#FFF; width:250px; margin-left:170px" />
</form>
</div>
i am opening this fancy box popup from
<a id="tip5" title="" href="#login_form"><?php echo "Login" ; ?></a>
every thing work fine but i can't get value of yourName even alert is showing blank.
Thanks
instead of this
var yourName = $("input#yourName").val();
try
var yourName = $("input[name='yourName']:text").val();
this will make ur function read the value of text box .
Firstly, with your form, it should be better to use
$(document).on('submit', 'form', function () { ... })
instead of
$(document).on('click', '#myButton', function () { ... })
Secondly, you should encapsulate your code into $(document).ready(function () { .. });
Here is a working example ;) http://jsfiddle.net/aANmv/1/
Check that the ID of Your input is not changed by fancybox at the time of opening the popup.
Instead of directly catching up the click event try to live the event if using jQuery 1.7 > or on when using jQuery 1.7 <.
live:
$("#button").live('click', function() { ... });
on:
$("#button").on('click', function() { ... });
Also try to load the javascript after the DOM is loaded:
$(document).ready(function(){
$("#button").live('click', function() { ... });
...
});
Instead of that
$(function() {
try
$(document).ready() {
this way you are sure that code is executed only after the document has loaded completely. Oh, and you could use #yourName instead of input#yourName, if i'm not wrong it should be faster.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btnSubmit').bind('click', function(){
var option = $('#option1').val();
if(option == ''){
alert('Answer empty');
}
return false;
});
});
</script>
...
<input type="radio" id="option1" name="option1 />
<input type="submit" name="btnSubmit" id="btnSubmit" value="submit" />
...
=> error click button submit not alert
Because the value of that radio is on (default value), look here: http://jsfiddle.net/DV9WP/
you should modify you code a bit get the value of :checked radio button and if its not checked it means the value is empty and alert the answer is empty
for example
$('#btnSubmit').bind('click', function(){
alert("");
var option = $('#option1:checked').val();
if(!option){
alert('Answer empty');
}
return false;
});
here is the working example http://jsfiddle.net/L8VY8/