<form id="file_upload_form"> ...
<input type="submit" value="Submit" name="submit">
</form>
Just need a alert box to appear on clicking the input. I'm a jQuery man so not sure how to target the DOM with prototype. I can't edit the HTML otherwise I would just give it an ID.
Must be easy but can't figure it out.
$$('#file_upload_form > input[type="submit"]').first().observe('click',
function()
{
alert('Hello');
});
$$ is Prototype's Selector engine shortcut. You can use any CSS selector to pick up the elements you are interested in. first() just grabs the first element returned, and observe() is the standard way to subscribe to events in Prototype.
Edit: Wrong quote marks
Related
What code would I start with? I know onChange won't work with input=hidden. Would it be best to write something to re-name the hidden fields and then build it into the existing onchange for the dropdown?
Not 100% sure what you are wanting to do. I don't believe its possible to make a tag with <input type="hidden" show on the browser unless you change its type.
Just tested this at W3Schools and worked on Chrome
<input type="hidden" value="OK">
<p id="demo">Click the button below to set the type attribute of the button above.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction()
{
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
};
</script>
<p>Internet Explorer 8 and earlier does not support the setAttribute method.</p>
Granted this code obviously states it won't work with IE8 or earlier and it would probably be better to set the id attribute for each of the hidden fields you want and probably use something like document.getElementById(IDVALUE).setAttribute("type", "text") Though this will allow the user to change the value in the tag.
Now all that is left is to give a dropdown with an onChange function that runs a statement like above based on what was selected.
You'll have to forgive me for asking a somewhat trivial question here, but I'm generally curious if there's a better way of detecting if a button has been pressed. I'm guessing this would apply to anchor tags also.
Presently I have two submit buttons (so I cannot use $(form).submit in this case), both of which will change another field when they are activated:
<button id="accept" type="submit">Accept</button>
<button id="decline" type="submit">Decline</button>
To achieve this I have detected a click event, and the Enter keypress event separately:
$('#accept').click(function(){ $('#decision').val('Agree'); })
$("#accept").keyup(function(event){
if(event.keyCode == 13){
$('#decision').val('Agree');
}
});
I guess more than anything I'm wondering if there is a way to simplify this code, as it's rather cumbersome, especially if there's a lot of processing (you could create a function, but that's yet another step) and since jQuery seems to have most things covered, I'm surprised after trawling the internet I can't find a cleaner solution.
(with the above I was worried about other ways to mimic the button press, such as hitting space, although that seems to be covered!)
Thanks!
For a button element, both the spacebar and the enter key being presses on a button will generate a click event according W3C event specifications. You should not have to do any special processing to handle that.
As for using $(form).submit(), you can. Just change your buttons to not implicitly submit the form by chaning them to push buttons (W3C):
<button type="button" id="...">...</button>
Then in your handler you can do:
$('#accept,#decline').click(function(event){
$('#decision').val($(event.target).text());
$(form).submit();
}
If you need to you can do some processing on $(event.target).text() to make 'Decline' null/emptystring if necessary.
you can do something like this to make the click a little better: (using a function is necessary here to get something better):
function setDecision(value){
$('#decision').val(value);
}
$('button[type=submit]').click(function() {
var val = $(this).text();
setDecision(val);
});
$("button[type=submit]").keyup(function(event){
var val = $(this).text();
if(event.keyCode == 13){
setDecision(val);
}
});
I think I understand your question, and there may be some precedence to be found in this related topic.
jQuery: how to get which button was clicked upon form submission?
This method avoids adding the .click() event to each button, though that may be a viable option for your application.
Hope this helps!
Mason
Add name="decision" and value="Accept" / value="Decline" (accordingly) to the submit buttons
This way you do not need javascript to handle this at all...
And if the 'Accept' button is the first, then pressing enter inside any form field will also trigger that one
Sample:
<form action="1.html" method="get">
<input type="text" name="in">
<button type="submit" name="decision" value="Accept">Accept</button>
<button type="submit" name="decision" value="Decline">Decline</button>
</form>
I have two checkboxes in my code as mentioned below:
<input type="checkbox" id="event_id" name="data[Noncompetitor][event_id][]" value="1">
<input type="checkbox" id="event_id" name="data[Noncompetitor][event_id][]" value="2">
Now I am doing Ajax function like onCreate and onComplete, where I want to disable checkboxes when its initiated and want to enable again as completed request. I am not sure how that can be achieved in Prototype JS and both above checkboxes have same id.
onCreate: function(){
document.getElementById("event_id").setAttribute("disabled", "disabled");
Element.show('loading_message');
},
onComplete: function(){
document.getElementById("event_id").removeAttribute("disabled");
Element.hide('loading_message');
},
My Above code works, but it disables only first checkbox, so please help me here.
Thanks !
You can't have two ids of the same in a HTML page, nothing is stopping you from putting two ids of the same in a HTML page you can but you kill a kitten everytime you do that, and furthermore having two ids will confuse yourself in cases like this. document.getElementById would return the first id it finds and stop caring about the other everytime you have two ids of the same in a HTML page, thus why it only works for one checkbox.
You can either assign classes to your checkboxes, or you can reference your checkbox using name attribute if your form is also named.
http://jsfiddle.net/Q5qNg/7/
I'm using Dojo 1.5, and I'm trying to create a context menu that can invocate a function myFunction passing the event and other arguments. So far I've the following code:
<div dojoType="dijit.Menu" id="bankerMenu" style="display: none;">
<div dojoType="dijit.MenuItem" onclick="copyDocuments('bankerFolder');" iconClass="dijitEditorIcon dijitEditorIconCopy">Copy to Client</div>
<div dojoType="dijit.PopupMenuItem" onclick="doNothing()" iconClass="dijitEditorIcon dijitEditorIconCopy">
<span><s:text name="CopyTo.label"/></span>
<div dojoType="dijit.Menu" id="bigsubmenu">
var="distributionList">
<div dojoType="dijit.MenuItem" onclick="myFunction(event,'bankerFolder',1)"><s:property value='distributionListName'/></div>
</div>
</div>
</div>
But it is not recognizing the 'event' that I want to pass to the function. I know I can susbtitute the call using this:
<div dojoType="dijit.MenuItem" label="Some menu item 2">
<script type="dojo/method" event="onClick" args="evt">
myFunction(evt,'bankerFolder',1);
</script>
</div>
but I would like to simplify it and used the first syntax. How can I do that?
Passing event literally would likely end up leaving you at the mercy of cross-browser inconsistencies. However, since events connected through Dojo worry about this for you, and since onClick is a widget event that already receives the event object as an argument, you should be able to get away with the following:
<div dojoType="dijit.MenuItem" onClick="myFunction(arguments[0],'bankerFolder',1)"><s:property value='distributionListName'/></div>
Also note the capital C in onClick - widget events always use camel case; they are not actual DOM events, though they are often mapped to analogous DOM events. I get the impression you were testing with capital C though, based on the problem you described encountering.
Here's a simplified example of the idea working (initially provided/suggested by Dustin Machi in the Dojo IRC channel): http://jsfiddle.net/xwFC5/5/
Following from Ken's comment to the answer above, I managed to figure this out as outlined here: http://blue-networks.net/wp/?p=37 It connects to onCellContextMenu and pulls the relevant information out of the event, saving it into the grid object.
While trying the bassistance.de's jQuery form validation plugin I ran into something interesting.
If I provide an errorPlacement option to append errors in a <div id="errContainer"></div> and place this div outside the <form>, the error messages are duplicated each time a validation occurs. Whereas, if the errContainer div is placed inside the <form>, things work just fine.
Example HTML:
<form id="frmQuote" action="#" method="get">
<input type="text" name="txtQuote"/>
<button type="submit" id="btn">Send</button>
</form>
<div id="errContainer"></div>
plugin option:
errorPlacement: function(error, element){
error.appendTo($("#errContainer"));
}
//... further options
For this case, the errors duplicate as and when an element is validated. If I submit the form, the whole bunch of errors is displayed again, below the previous errors.
Is the placement of the div a dependency? Or am I doing something wrong?
Thanks for the help :)
Instead of using errorPlacement in this case, you should use the errorLabelContainer, which would do exactly what you are wanting, and also manage the errors correctly (i.e. not duplicate them):
$('#my-form').validate({
//other options, rules, etc
errorLabelContainer:'#errContainer'
});