I have a html code and its.
<input type="submit" class="sub" /><div class="img"></div>
Now the CSS code is
.img{backgound: url(image.png);height:10px;width:10px;}
img class position (located) on the submit. now when i try to click the submit (the img class is over it). it not clicked because of the img class.
now i want to make the div class is visible but at the same time it not blocks when i click the submit.
I dont want to use background for the submit, because im already using it on the submit with another image.
i wish that you understand me.
and im sorry for my english ...
Thanks,
assuming ur code looks like
<form id="myform" action="myaction.php">
...
<input type="submit" class="sub" /><div class="img"></div>
...
</form>
Jquery:
$('#myform .img').click(function(){
$('#myform').trigger('submit');
})
Try :
$('.img').click(function(){$(this.parentNode).click();});
So what you want is to have an img on top of a submit, and make it so that when you click that img, the form is still submitted? If so, then you're probably better off using JavaScript. Here's a sample of what it'd look like with jQuery:
$('.img').click(function() {
$('.img').siblings('[type=submit]').click();
});
This makes it so that when you click the image, it will act as if you clicked the submit button too.
On that note, there must be a better way to do this (i.e. without JavaScript and extra divs), but since I don't know much about your problem, I can't think of anything.
if you have a button with already a background image on it ,
and you want that when you press the div above - the button will also be pressed youll need to do this :
on the div element you put:
onclick='simulateButtonPress();'
and in js : (via Jquery)
function simulateButtonPress()
{
$("#btnId").trigger('click');
}
$('.img').click(function() {
$(this).prev('input.sub:submit').trigger('click');
});
// click event for submit
$('input.sub:submit').click(function() {
// here goes you submit actions
alert('submit');
});
$('.img').click(function() {
return true;
});
Related
I want to make below code works for Check box with collapse button.
<label>
<input type="checkbox" id="postageyes" name="postage1" value="Yes" />Yes</label>
<div id="conditional1">
<p>This should only show when the 'Yes' checkbox <input> element is checked.</p>
close
</div>
Javascript
var conditionalContent1 = $('#conditional1'),
group = $('input[type=checkbox][name=postage1]');
group.change(function() {
conditionalContent1.toggle(group.filter(':checked').val() === 'Yes');
}).change();
when i checked check box new div open, I want to get done is. when i click close link, the open div close and unchecked the checked box.How to do this.
anyone can help?
You can use change event on checkbox. And toggle to hide/show div.
$('#postageyes').on('change', function() {
$('#conditional1').toggle($(this).is(':checked'));
});
$('#conditional1').on('click', 'a', function() {
$('#postageyes').prop('checked', false);
$('#conditional1').hide();
return false;
});
Demo: http://jsfiddle.net/tusharj/n7044syx/1/
You can use the toggle function and click event to achieve what you have mentioned.
$('#postageyes').click(function() {
$('#conditional1').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="postageyes" name="postage1" value="Yes" />Yes</label>
<div id="conditional1" style="display:none">
<p>This should only show when the 'Yes' checkbox <input> element is checked.</p>
close
</div>
EDIT: Tushar updated his answer while I was writing this so... yeah, never mind! That would also work. The point still stands, though.
I think part of the problem is that you're trying to use an anchor tag inappropriately. Leaving the href blank will reload the page, so Tushar's answer looks right but doesn't actually do what you're asking. Use a button (and style it appropriately if you still want it to look like a link) and then handle its click event to toggle the checkbox and hide the content.
I've modified Tushar's jsfiddle to show what I mean. You'll probably be able to make it more streamlined than this, but the simple version is:
Replace the a tag with:
<button id="closeButton">close</button>
Then add the following to the js:
$('#closeButton').on('click', function () {
$('#postageyes').click();
});
https://jsfiddle.net/pnq8zu0L/
In HTML, I have a button with the id of "submit1"
<div id="first">
<form>
<input type="radio" name="school" value="pitt">Pitt<br>
<input type="radio" name="school" value="memphis">Memphis<br>
<button id="submit1">Submit</button>
</form>
</div>
Now in Jquery, I try to use a .click() to trigger the div "first" to fadeOut, like so:
$(document).ready(function() {
$('#submit1').click(function(){
$('#first').fadeOut('slow');
});
});
Weirdly enough, nothing happens when I click submit. I thought maybe it wasn't calling my .js file, but alas, when I change it to a .mouseenter( ), it works perfectly to trigger a fadeOut of the div.
$(document).ready(function() {
$('#submit1').mouseenter(function(){
$('#first').fadeOut('slow');
});
});
I saw an old Stack Overflow post where they used alert instead of an animation, so I tried that too during debugging and it still worked. It is literally just animations that seem to break things (tried .slideToggle, .slideDown, etc. just to check). Thanks!
Since the submit button is inside a form element, the default click behavior is to submit the form to the server. Internally, the JS is being called but this also causes the whole page to refresh so you don't see the animation happening. In order to prevent this, change your code to prevent the default submit behavior:
$('#submit1').click(function (e) {
e.preventDefault();
$('#first').fadeOut('slow');
});
I have a form which is made like this:
<form id= 'lol' name = 'whyyyyy'>
<input name='dumbo'>
<input name='idiot'>
<input type='submit' value='I have no idea why its like this' onclick='document.lol.submit()'>
</form>
Now, I want to prevent the actual sending of the form, but so far all attempts failed.
My current code looks like this:
$(document).ready(function(){
$('form[name="whyyyyy"]').submit(function(e){
e.preventDefault();
alert(1);
return false;
});
})
but the inline submit command bypasses as it seems the jQuery function.
Can someone shred light into it?
EDIT:
The form CANNOT be changed, I don't have permission to change.
the on click code should trigger the submit function, it some complex validation wall of code in it. So I have to cache the submit action that it triggers, but I can't do that at moment.
the submit function should be triggered on send but it does not get triggered.
Here is an example of the code in jfiddle. As you can see it gets past by jQuery...
http://jsfiddle.net/StCPp/4/
if you don't need a submit button, why don't you use a regular button instead
<input type="button" />
<input type='button' value='i have no idea why he done it like this' onclick='document.getElementById('lol').submit()'>
Just use a normal button instead of a submit.
If you want to bypass a submit button you can make the class of the button cancel.
<input type='submit' class='cancel' value='i have no idea why he done it like this' onclick='document.lol.submit()'>
In your add-on JavaScript, remove the inline onclick event and replace it with whatever you desire. Problem solved.
You could also completely remove his button and replace it with one of your choice.
Remove the document.lol.submit function. This way, you can do whatever you want.
// Magic line
delete document.lol.submit;
// Or
$('form[name="whyyyyy"] input[type=submit]').attr('onclick', '');
$(document).ready(function(){
$('form[name="whyyyyy"]').submit(function(e){
e.preventDefault();
alert(1);
return false;
});
});
Ok so if I got this right you could remove the inline event handler onclick and add your custom handler (where you do the validation and all necessary steps):
$(document).ready(function() {
var $submit_button = $('input[type=submit]');
$submit_button.removeAttr('onclick');
$submit_button.click(function() {
//TODO: implement your custom handler
//execute validation etc.
});
});
Remove the onclick
$('input[type=submit]').attr('onclick','')
Then add the click event to function ready
$('input[type=submit]').on('click',function(){
//do your event
});
You aren't necessarily required to use jquery to implement this. You could use standard javascript.
$(document).ready(function(){
document.whyyyyy.submit = function(e){
alert(1);
return false;
};
});
This example works, but you might be hitting a jquery bug.
I have the following jQuery Tools overlay:
<div id='editDescriptiontOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
Background info: The HTML for this overlay is static. I have a list of items each having their own Edit link. When a given Edit link is clicked, the overlay is generated by calling: $('a[rel=#editDescriptionOverlay]').overlay( { ... } ); and the input is populated with the respective text.
The Save button needs to validate the text in the input element and close the overlay if and only if the validation is successful. Otherwise, the overlay must remain open. The Cancel button simply closes the overlay without validation.
The validation logic has been independently verified to work.
I've tried setting the onBeforeClose event during overlay generation as a means of validation. Taking this approach, both the Save and Cancel buttons needed the same class .close. Unfortunately, the condition applies to all .close elements in the overlay so even the Cancel button was validating.
I've also tried binding a click event to the Save button immediately after generating the overlay, like so:
$('.save', $('#editDescriptionOverlay'))
.unbind('click')
.bind('click', function() {
if (validateText) {
console.log("Validation passed.");
$('a[rel=#editDescriptionOverlay]').overlay().close();
}
else {
console.log("Validation failed.");
}
});
The console.log's confirm that the validation is working, but the overlay doesn't close.
Any insight is appreciated, thanks.
For jquery widgets, public methods should be called as follows:
$('a[rel=#editDescriptionOverlay]').overlay("close");
wherein close is the method name that you wish to call.
If a method accepts parameters, then, these should be added as parameters right after the method name.
Updated:
I am sorry. I just had time to check what jQuery Overlay Tools is and I am mistaken. This is not similar to any jQuery widget, hence, my comment above will also not work for this case. I tried your code above and it worked. The overlay was closed. But, when I tried it with multiple <a rel="#editDescriptionOverlay">, which I think is what you did. It did not work. My suggestion would be to use just one <a rel="#editDescriptionOverlay"> and use a dummy anchor element for the Edit link, which when clicked would trigger a click to <a rel="#editDescriptionOverlay">. You can do something like this:
<script type="text/javascript">
$(document).bind("ready", function(e){
$("a[rel]").overlay();
$('.save', $('#editDescriptionOverlay')).unbind("click").bind("click", function(){
if (validationValue){
$("a[rel=#editDescriptionOverlay]").overlay().close();
}
});
});
function clickThis(){
$("a[rel=#editDescriptionOverlay]").trigger('click');
return false;
}
</script>
Edit1
Edit2
<a rel="#editDescriptionOverlay">Dummy</a>
<div id='editDescriptionOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
I'd prefer binding an event to the save button (the second one you mentioned). Actually your code looks fine, except that you probably don't need to bind the event to $('#editDescriptionOverlay') and you have typo in your html markup above (<div id='editDescriptiontOverlay' should be <div id='editDescriptionOverlay').
See here for an example.
I made the following small Javascript script to enable some form elements on my page:
function unHide()
{
if($('#UserName').val() == "")
{
alert('Please Enter a User Name first');
}
else
{
$('#radio-choice-1').checkboxradio('enable');
$('#radio-choice-2').checkboxradio('enable');
$('#radio-choice-1-board').checkboxradio('enable');
$('#radio-choice-2-board').checkboxradio('enable');
$('#TransNum').textinput('enable');
$('#UserContinue').remove();
$('#nextButton').show();
}
}
The problem is, this isn't being called when the correct button is clicked. Even the alert doesn't show up. Here is the HTML:
<label for="UserName" style="vertical-align: top;">User Name:</label>
<input type="text" name="UserName" id="UserName" placeholder="Ex: LesniakBjEVS101" />
...
<a data-role="button" data-icon="check" data-mini="true" id="UserContinue"
style="float:right;" onclick="javascript:unHide(); return false;">Continue...</a>
...
<section id="nextButton" hidden>
<a href="salamanderSelect.html" data-role="button" data-icon="forward"
data-mini="true" style="float:right;">Next</a>
</section>
The problem I am encountering is when I click on the submit button, absolutely nothing happens. I am not getting any feeback from the Javascript, nor anything.
Any help would be greatly appreciated!
Thanks!
Edit:
After trying out suggestions, I still am unable to get the javascript to do anything. I have tried multiple browsers, but still nothing.
And I just had this working yesterday too...without any changes to the code too
Edit 2:
Apparently it works if my script is the last thing in the HTML file, even outside of the tags.
While onclick doesn't need javascript:, it should still work in many browsers. Here is a jsfiddle of your example: http://jsfiddle.net/ukWcp/2/
Only use javascript: in an href.
While i suggest debugging using the javascript console and debugger in firebug or chrome, others have mentioned using an all javascript solution for your bindings. That is preferrable.
As you're using jQuery already, why not use it to attach your events, rather than using the clunky onclick attribute.
<a data-role="button" data-icon="check" data-mini="true" id="UserContinue"
style="float:right;">Continue...</a>
$("#UserContinue").click(function(e) {
if($('#UserName').val() == "") {
alert('Please Enter a User Name first');
}
else {
$('#radio-choice-1').checkboxradio('enable');
$('#radio-choice-2').checkboxradio('enable');
$('#radio-choice-1-board').checkboxradio('enable');
$('#radio-choice-2-board').checkboxradio('enable');
$('#TransNum').textinput('enable');
$('#UserContinue').remove();
$('#nextButton').show();
}
e.preventDefault();
});
$(document).ready(function() {
$("#UserContinue").click(function() {
if($('#UserName').val() == "")
{
alert('Please Enter a User Name first');
}
else
{
$('#radio-choice-1').checkboxradio('enable');
$('#radio-choice-2').checkboxradio('enable');
$('#radio-choice-1-board').checkboxradio('enable');
$('#radio-choice-2-board').checkboxradio('enable');
$('#TransNum').textinput('enable');
$('#UserContinue').remove();
$('#nextButton').show();
}
return false;
);
});
If you're using jQuery, why not fully use it? The return false at the end stops the click event from continuing if that was what you desired.
Edit:
You say in your original post "The problem I am encountering is when I click on the submit button, absolutely nothing happens. I am not getting any feeback from the Javascript, nor anything."
Yet you have attached a click event to your incomplete anchor tag (it's missing the href). So are you expecting the behavior to trigger on clicking the submit button or clicking the anchor tag? If you are expecting the trigger to fire on clicking the submit button, then you need to change $("#UserContinue") to reference the submit button and not the anchor tag. Or use the .submit() event handler instead of .click(), http://api.jquery.com/submit/.
If this is not the issue, then I suggest editing your post to include all of your code and saying what behavior you expect after clicking which elements.
Edit 2:
I believe you are not wrapping your jQuery around the .ready() function, please see the revised code snippet that now includes .ready(). .ready() ensures the DOM is fully loaded before working with your jQuery.
Keep your function and add the event handler to your javacript and NOT in markup:
$(document).ready(function() {
$('#UserContinue').click(function() {
unHide();
});
});
short version:
$(document).ready(function() {
$('#UserContinue').click(unHide);
});