I have this problem :
I have a submit button defined as follows :
<input type="submit" name="actionName" value="search" />
<input type="submit" name="actionName" value="New" />
both submit buttons are included in an Ajax beginForm:
#using (Ajax.BeginForm("PFSearch", "Payer", ajaxOptions))
In the controller ... based on the actionName string provided .. i do different actions based on the value of button pressed within my Ajax befin form :
if (actionName="search")
{
//do something
}
And everything works like a charm .. until i want to add i want to add an image to the class of my submit button :
<input class="search" type="submit" name="actionName" value="search" />
<input class="search" type="submit" name="actionName" value="New" />
My search tab looks like this :
As you can clearly see my main impediment is that by adding value ... the text appears over my image.
How can i make those button act differently within my ajax begin form considering that giving value to the buttons doesn't work ? Any alternatives or workarounds are appreciated. Thanks !
Can you please give us a link to your project's demo? And try to use some margin, padding and background-position:center;
Related
I am using ASP.net for a program with a number of check boxes and a submit button which initiates an action depending on the selected check boxes.
However, one of my check boxes should behave as this submit button, i.e, upon selecting/deselecting this check box, the same action as the button must be triggered. Can someone please help me in doing this (or perhaps direct me to a tutorial)
I have a controller class and model.
Thanks you
EDIT
The program look like:
#using(Html.BeginForm("controllername", FormMethod.Get)) {
#html.CheckBox("check1");
#HTMl.Checkbos("check2");
<input type="submit" value="Submit" />
}
Everything else is pretty much handled in the controller.
You can use javascript to listen to the check event of your check box and then invoke the form submit.
Assuming your markup of view is like this
<form id="yourFormId" action="user/post">
<input type="checkbox" class="optionChk" value="1" /> One
<input type="checkbox" class="optionChk" value="2" /> Two
<input type="checkbox" class="optionChk" value="3" /> Three
</form>
<script type="text/javascript">
$(function(){
$(".optionChk").click(function(){
var item=$(this);
if(item.val()=="2") //check your condition here
{
item.closest("form").submit();
}
});
});
</script>
EDIT : As per the question edit.
Change the CheckBox Helper method usage like the below to add a css class to the checkbox so that we can use that for the jQuery selection.
#Html.CheckBox("check1",new { #class="optionChk"})
imagining you have something like this:
#using(Html.BeginForm()) {
<label class="checkbox">
<input type="checkbox" name="chb_a" id="chb_a"> Option A
</label>
<label class="checkbox">
<input type="checkbox" name="chb_b" id="chb_b"> Option B
</label>
<label class="checkbox">
<input type="checkbox" name="chb_c" id="chb_c"> Option C
</label>
<label class="checkbox">
<input type="checkbox" name="chb_d" id="chb_d"> Option D
</label>
<button type="submit" class="btn">Submit</button>
}
you can write a simple jQuery to complement:
$(".submit").click(function() {
// find the <form> the element belongs and submit it
$(this).closest('form').submit();
});
and with this, all you need is to add a class named submit to any checkbox or more buttons if you want them to submit
for example:
<label class="checkbox">
<input type="checkbox" name="chb_e" id="chb_e" class="submit"> Option E
</label>
You can bind the click events on the checkboxes.
$( '.myCheckboxes' ).click(function () {
var clickedBox = $( this );
// now do something based on the clicked box...
});
If you need to know which checkboxes are checked, that's just another selector.
$( '.myCheckboxes:checked' ).each(function () {
// Now you have access to each checked box.
// Maybe you want to grab their values.
});
Just bind the checkbox to a click event. Assuming you have a way of uniquely identifying the checkbox that submits the form.
$( '#formSubmitCheckbox' ).click(function() {
$( '#myForm' ).submit();
});
Hi all im trying to do is pass a value to the controller using an image instead of a button.
ive got it working using the button with.
<input type="submit" name="Vote" value="1" />
This works but when im try using a button type it fails saying that im sending a null parameter.
<input type="image" src="imagepath" value="1" alt="1" name="Vote" />
If anyone can help it would be a great thanks.
<input type="image" src="imagepath" value="1" alt="1" name="Vote" onclick="submit" />
But I think you'll lose submitting by hitting the enter key.
input image "sometimes"(?) just send the x and y coordinates of the image...
Input type="image" is anyway something to avoid for submit buttons.
Why not use Ajax ?
#Ajax.RawActionLink("Text", "Action", "Controller", null, ajaxOptions, new { #class = "button green small" })
Below is the form which i loaded via ajax. When i run the form page directly then autofocus on c_name works in firefox but when loaded with ajax it doesn't! It works fine with opera/safari/chrome though!
<form action="client_entry_action.php" method="post" id="client_entry_form" name="client_entry_form">
<fieldset id="client_info_1">
<label for="c_name">Name:</label>
<input type="text" name="c_name" required placeholder="Name" autofocus="autofocus" />
<label for="c_phone">Phone Number:</label>
<input type="tel" name="c_phone" required placeholder="Mobile/Phone Number" />
<label for="c_email">Email:</label>
<input type="email" name="c_email" required placeholder="email#example.com" />
<label for="c_address">Address:</label>
<textarea name="c_address" ></textarea>
</fieldset>
<fieldset id="client_info_2">
<label for="c_info">Additional notes:</label>
<textarea name="c_info" ></textarea>
<input type="submit" name="add_client" value="Add Client" />
</fieldset>
</form>
Autofocus is only done before onload has fired; it's meant to be a declarative way of specifying focus on initial page load.
use settimeout after ajax call on the div, or using jquery use .ajaxComplete, or .done
function theAjax(){
//after the ajax actions loaded......
//use settimeout to refocused on the input..
var t=setTimeout("focusMe()",500);
}
function focusMe(){
document.getELementById("theInput").focus(); //the new input
}
//using jquery use .ajaxComplete, or .done
$( document ).ajaxComplete(function() {
$("#focusOnMe").focus();
}
I know this is old, but I just had this problem and maybe it helps someone.
If you use jQuery this works:
$("input[name='c_name']").focus();
Javascript would be something like this (general example):
document.getElementById('element').focus();
But you have to call that function after your form is loaded via ajax!
This worked for me:
$.get("/url.html", function(html) {
var form = $("#form", html);// extract form with id=form from ajax response
if (window.InstallTrigger) {// Detect Firefox and add focus script
// place focus on first element containing autofocus attribute
form.append("<script>$('[autofocus]')[0].focus();<\/script>");
}
$("#element").replaceWith(form);// Replace element with id=element with form
});
This is different from other solutions posted here because the script that places focus on the autofocus element is added to the DOM at the same time as the autofocus element itself thus ensuring that the script runs after the DOM is finished updating.
Note that this solution requires jQuery. If you are not using jQuery you can still do this easily enough with querySelectorAll
document.getElementById("element").innerHTML = form+"<script>document.querySelectorAll('[autofocus]')[0].focus()<\/script>"
I am trying to invoke a form submit using javascript (jquery) to invoke a webflow transition. It works and the submit invokes the desired transition. But, the updated radio button values is not reflected on the model object which is posted.
Here is the code:
<form:form method="post" action="#" commandName="infoModel" name="pageForm">
<form:input type="input" path="testMsg" id="success" />
<input type="button" id="clearSelections" value="Clear Selections">
<div class="question">
<h4><c:out value="${infoModel.questionInfo.description}"/> </h4>
<form:radiobuttons path="infoModel.answerId"
itemValue="answerId" itemLabel="answerDescription" items="${infoModel.answers}" delimiter="<br/>" />
</div>
<input type="submit" name="_eventId_saveQualitativeInput" value="Save" id="save" />
$(document).ready(function() {
$('#tabs').tabs();
//Clear selections (copy is server-side)
$('#clearSelections').click(function() {
//$('input[type="radio"]').prop('checked', false);
$('input[type="radio"]').removeAttr('checked');
$('#save').trigger('click');
});
});
</form:form>
The form:radiobutton, generates the below html:
<div class="question">
<h4>Is this a general obligation of the entity representing a full faith and credit pledge? </h4>
<span>
<input type="radio" checked="checked" value="273" name="infoModel.answerId" id="infoModel.answerId1">
<label for="infoModel.answerId1">Yes</label>
</span>
<span><br>
<input type="radio" value="274" name="infoModel.answerId" id="infoModel.answerId2">
<label for="infoModel.answerId2">No</label>
</span>
<br>
<span class="error"></span>
</div>
The input id= "success" value is registered and when the control goes to the server, the value of input id= "success" is updated in the "infoModel" object. But the value of answerId is not updated on the "infoModel" object.
Thoughts if i am missing something in the form:radiobutton element or if there is something else wrong?
Thanks in advance!
EDIT:::::::
Thanks mico! that makes sense. I stripped of some of the code first time to make it precise, but i have a list which is being used for building the radio-buttons, below is the code:
<c:forEach items="${infoModel.list["index"]}" var="qa" varStatus="rowCount">
<div class="question">
<h4><c:out value="${question.questionInfo.description}"/> </h4>
<form:radiobuttons path="list["index"][${rowCount.index}].answerId" itemValue="answerId" itemLabel="answerDescription" items="${question.answers}" delimiter="<br/>" />
<br>
</div>
</c:forEach>
Could you please suggest how i could try this one out?
NOTE: The same code works on a regular form submit on click of a button of type submit. Its the javascript form submit which is not working. I also tried to do whatever i want to do in javascript and then invoke the button.trigger('click'); form got submitted but the changes made on form in my javascript didnt reflect.
With commandName inside a form:form tag you set "Name of the model attribute under which the form object is exposed" (see Spring Documentation). Then in path you should tell the continuation of the path inside the model attribute.
With this said I would only drop the extra word infoModel from path="infoModel.answerId" and have it rewritten as path="answerId" there under the form:radiobutton.
I have a problem with checkbox. I have a list of checkbox, and I want to mark only one check and unmark other.
I want do that this in the same view , is it posible?
How can I do that?
<div><input type="checkbox" id="<%= id %>" onchange='submit();'/> </div>
thanks
Sounds like you really need a radio button instead. Radio buttons are mutually exclusive if you give them the same name:
<input type="radio" name="something" ... />
<input type="radio" name="something" ... />
If you really want checkboxes you will have to write some JavaScript logic.
Use radio buttons, not checkboxes.
<div>
foreach (var foo in model.Foos) {
<input type="radio" name="foo" id="foo_#foo.Id" value="#foo.Id" />
<label for="foo_#foo.Id">#foo.Value</label> <br />
}
</div>
Something like that should create a list of radio buttons.
Also, why are you submitting when the selection is changed? You should be using jQuery to do any selection-based manipulation to the page on the client side.
You could use jQuery. on document.Ready you'll have to bind a change event on checkboxes to some function, then in your function you want to reset all other checkboxes. That's assuming you don't want to use radio buttons as suggested above.