Okay so I am converting some code to jQuery and currently the js is just changing the focus to a button with the target id using whenever you press enter or double click in a <select> tag. document.getElementById.focus() and then document.getElementById.click() and returning true to submit this form. Just looking for some example on how to do same thing using jQuery instead. I understand that there is a .keypress() and a .dblclick() function in jQuery and thats what I think I should be using but passing the values of the input box or the select values are a little difficult since there are multiples of each in the form. FYI this is a search page that sends SQL to an oracle database.
Update-
$(document).ready(function(){
$('form').submit(function(){
$(this).keypress()
if(event.which ==13){
}
});
});
This is what i have so far not sure if i am on the right track or not.
so here is an example of how the form is.
<form>
<tr>
<td nowrap="nowrap"><b> Search by Number </b></td>
<td style="vertical-align:top"><input type="text" name="revisor_number" value=revisor_number>" size="55" maxlength="100" /><br/><span style="font-size:75%">commas between numbers (10,15,20), dash for range(10-20)</span><br/></td>
<td> <input type="submit" name="submit_number" id="submit_number" value="GO"/></td>
</tr>
<tr>
<td style="vertical-align:top" nowrap="nowrap"><b> Search by Type </b></td>
<td>
<select name="subtype[]" size="3" multiple="multiple" onkeypress="keyPress(event, 'submit_subtype');" ondblclick="keyPress(event, 'submit_subtype');">
<option value="">>--- All ---</option>
<td style="vertical-align:top"> <input type="submit" name="submit_subtype" id="submit_subtype" value="GO"/></td>
You need to move it outside of your submit function, replace it with:
$('input, textarea').keypress(function(e) {
if(e.which == 13) {
$(this).blur();
$('#submit').focus().click();
}
});
Assuming '#submit' is the ID of your button.
I don't know if i understand what you want,
but submitting a form with a button in jQuery is something like :
$('button').on('click', function(){
$('yourForm').submit();
});
Related
I would like to display an HTML table clicking on a button.
This is what I've tried so far:
My SCALA code:
object Snippet {
def render = {
def showTable() = {
val table = <table border="1">
<caption>My Table</caption>
<thead>
<tr>
<td>Entry</td>
<td>Value1</td>
<td>Value2</td>
</tr>
</thead>
<tbody>
<tr>
<td>PREV</td>
<td>1</td>
<td>10</td>
</tr>
<tr>
<td>CURR</td>
<td>2</td>
<td>20</td>
</tr>
<tr>
<td>NEXT</td>
<td>3</td>
<td>30</td>
</tr>
</tbody>
</table>
SetHtml("table_div",table)
}
"#getTable" #> SHtml.button("Get Table", () => null, "onclick" -> "$('#msg_div').html('<span>Getting table...</span>')") &
"name=proc" #> SHtml.hidden(showTable)
}
}
And my HTML:
<div class="lift:Snippet.render">
<form>
<input type="hidden" name="proc"/>
<button id="getTable" value="Get Table" class="btn btn-inverse">Get Table</button>
</form>
<div id="msg_div"></div>
<div id="table_div"></div>
</div>
Nothing is displayed clicking the button.. Do you see what is the problem?
Or someone could tell me another way to do that?
I am not sure what you are looking to accomplish with the hidden input. Why not just do something like:
"#getTable" #> SHtml.ajaxButton("Get Table", showTable)
If you are looking to display a waiting indicator, Lift has a mechanism for setting the ajax loading animation. In Boot.scala:
//Show the spinny image when an Ajax call starts
LiftRules.ajaxStart =
Full(() => LiftRules.jsArtifacts.show("ajax-loader").cmd)
// Make the spinny image go away when it ends
LiftRules.ajaxEnd =
Full(() => LiftRules.jsArtifacts.hide("ajax-loader").cmd)
You can use any JsCmd instead to call your own function. I'd probably opt for that.
Totally agree with jcern. A slightly different way could also be:
"#getTable [onclick]" #> SHtml.ajaxInvoke(showTable)
(this way you won't override the original button name)
Also note that you don't even need to use the <form> tag -- you can delete it.
Help me understand this.
Isn't dijit.form.FilteringSelect (extended from ValidationTextBox) supposed to have property required = false by default?
Why is it that simply including a FilteringSelect in a declarative form like so below automatically results in dijit.form.Form.isValid() == false?
Even manually setting the filteringselect's required prop to false results in an invalid form submit. I feel like there's something I'm missing here.
I'm Using dojo toolkit version 1.6.1.
<!-- form.html -->
<form id="form" dojoType="dijit.form.Form">
<table>
<tr>
<td id="friend">
<select name="friend" id="friend-input" dojotype="dijit.form.FilteringSelect"></select>
</td>
</tr>
<tr>
<td>
<input type="submit" id="submit-input" value="Submit" label="Submit" dojotype="dijit.form.Button">
</td>
</tr>
</table>
</form>
/* form.js */
dojo.require("dijit.form.Button");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.Form");
dojo.ready(function() {
var form = dijit.byId("form");
var friendInput = dijit.byId("friend-input");
friendInput.required = false;
dojo.connect(form, "onSubmit", function(event) {
event.preventDefault();
if (form.isValid()) {
alert("Ready to submit data: " + dojo.toJson(form.get("value")));
} else {
alert("Form is not valid.");
}
});
});
Like Frode mentioned, we need to set the required to false.
But, lots of fields might be used. Not a good idea to set 'required' for each, in the dojo.ready section.
<select name="friend" id="friend-input"
dojotype="dijit.form.FilteringSelect" required="false"></select>
The better way is to mention it as attribute in the html itself. Let me give an example why it is better.
If the field is included in a tab, and if the tab is refreshed on certain actions, the html will be arsed again. So, in that scenario, the required will be true again for that field. So, therefore, provide it in the html declaration of the widget itself to avoid these scenarios.
Below is a working example of a form. I need to display additional text field if user selects "Other" in drop down menu.
Unfortunately, I can't use example below because it requires Mootools but I use Jquery. Don't want to force users to download one more file (Mootools) just for one form.
Is there any way how to do this without Mootools? Thanks.
<form action='user_friends_manage.php' method='POST'>
<table cellpadding='0' cellspacing='0'>
<select name='friend_type' onChange="if(this.options[this.selectedIndex].value == 'other_friendtype') { $('other').style.display = 'block'; } else { $('other').style.display = 'none'; }">
<option></option>
<option value='1'>Friend</option>
<option value='2'>Family</option>
<option value='other_friendtype'>Other</option></select>
</td>
<td class='form2' style='display: none;' id='other'> <input type='text' class='text' name='friend_type_other' maxlength='50' /></td>
</tr></table></form>
try this:
*if(this.value=='other_friendtype') {document.getElementById('other').style.display='block'}*
in onchage event of select control.
I am working on an e-commerce application shopping cart. I have a pricing page which display a list of products and their prices for multiple categories. User can choose to add multiple products to shopping cart (active shopping cart is being shown on right hand side of page). I am trying to use Ajax/jQuery for adding items to my cart. I have a form wrapped around each product which contains multiple hidden fields I would like to pass to my function and to the controller. You can see all these in the code below:
<% foreach (var _category in Model) { %>
<% foreach (var _product in _category.Products)
{ %>
<tr>
<td align="left" valign="top"><% = _product.Description %> (<% = _product.Code %>)</td>
<td valign="top" align="center">$<% = _product.TotalPrice %></td>
<td align="left">
<form id="frmProduct_<%=_product.Code%>">
<input type="button" onclick="JavaScript:addProductToBasket(this.form);" value="+ Add to cart" />
<input type="text" id="hProductCode" value="<% = _product.Code %>" />
<input type="text" id="Text1" value="<% = _product.TotalPrice %>" />
<!--Other hidden fields for passing data -->
</form>
</td>
</tr>
<% } %>
<% } %>
Since I have multiple forms on page, I am having hard time accessing a particular form inside my javascript function. What is a best way to handle this scenario?
<script type="text/javascript">
function addProductToBasket(_form) {
alert('Hi');
var str = $('#_form').serialize();
alert(str);
}
</script>
I am using ASP.NET MVC 2.0 and cannot move to MVC 3.0 at the moment.
Try to make your forms working without using javascript first. Then start thinking about all the ajax and jQuery stuff.
Remove the id attribute from the forms and add an action attribute (or use the MVC method: Using Html.BeginForm), add a class attribute to the form tag.
Remove the Totalprice field, you should always calculate this server-side, the only fields you need to submit are the product code (and a quantity).
Remove the javascript button and replace it with a classic submit button.
When you want to ajaxify the form, try something like this:
$(function () {
$(".addproductform").submit(function () { // turn all forms with the addproductform class into an ajax version
$.post($(this).attr("action"), $(this).serialize(), function (data) {
// data contains the confirmation or failure that the product was added to your cart, update the cart html on this page
});
return false; // form already submitted using ajax, don't submit it again the regular way
});
});
Strange bug I'm getting. I have a login form that is hidden by default, once a user clicks on an observed element, the element containing the form slides down (using Effect.BlidnDown in Scriptaculous)
Here is the function, which is part of the 'Interface' object:
revealLoginForm: function() {
$('a_login').blur();
if (!$('hform').visible()) {
Effect.BlindDown('hform', {
duration: 0.4,
afterFinish: function() {
$('f_login').focusFirstElement();
}
});
} else {
$('f_login').focusFirstElement();
}
},
The event observation:
Event.observe('a_login', 'click', Interface.revealLoginForm);
And the HTML:
<a id='a_login' href='javascript:void(0);'>Login to My Account</a>
....
<div id='hform' style='display:none;'>
<form id='f_login' action='...' method='post' name='sidelogin'>
<table cellspacing='0' class='login'>
<tr>
<th>Login ID:</th><td><input style='padding:2px;' type='text' size='18' name='enc_loginname' /></td>
</tr>
<tr>
<th>Password:</th><td><input style='padding:2px;' type='password' size='18' name='enc_password' /></td>
</tr>
<tr>
<th></th><td><input type='submit' class='submit' value='Login ยป' /></td>
</tr>
</table>
</form>
</div>
If I disable the $('f_login').focusFirstElement(); command in revealLoginForm(), the form does not disappear. What's strange is, the other call to this function does not adversely affect the element, it only seems to happen when called within the afterFinish callback to the Effect.BlindDown function.
Any ideas? It would be nice to have the first element of this form selected once the form has appeared. This works fine in Firefox.. it's just IE (Im using IE7) that's causing problems (go figure...)