I have a form with a radio-button group:
<form name="search" class="form-inline" asp-controller="controller" asp-action="action" method="get">
<div class="btn-group" data-toggle="buttons">
<label onclick="document.search.submit()" class="btn btn-default #ActiveTime("AM")" onclick="document.search.submit()">
<input type="radio" name="time" value="am" autocomplete="off">AM
</label>
<label onclick="document.search.submit()" class="btn btn-default #ActiveTime("PM")" onclick="document.search.submit()">
<input type="radio" name="time" value="pm" autocomplete="off">PM
</label>
</div>
</form>
#ActiveTime:
public string ActiveTime(string time)
{
if (ViewData["time"].ToString() == time) { return "active"; }
return "";
}
Relevant section of controller\action:
string time = ( (String.IsNullOrEmpty(HttpContext.Request.Query["time"].ToString())) ? "am" : HttpContext.Request.Query["time"].ToString() ).ToUpper();
ViewData["time"] = time;
Clicking the AM or PM label will submit the form, but doesn't include the radio button's value. What am I missing?
It is not sending the value of the radio button because when user clicks on the label, the browsers javascript engine will execute the onclick event handler you wired up on that element. Your current handler will execute this code document.search.submit() which submits the form immediately, even before bootstrap library could adjust the radio button state.
You can solve the issue by hijacking the click handler and set the radio button value yourself and then submit the form (all in javascript).
Another option i would try is, to remove the form submit behavior from the radio button selection/click event. What if user want to change his selection ? I would create a separate "Submit" button for the form submission.
I also noticed you have onclick handler registered two times on your element. clean that up.
Related
When using method handlers to execute OnGet or OnPost methods, &handler=[action] query string gets added.
Problem is if user manually refreshes the page afterwards by hitting browser's refresh button, the same action will get executed for the 2nd time unintentionally.
What is the recommended approach to avoid this?
Problem is if user manually refreshes the page afterwards, same action
will get executed for the 2nd time.
For the browser refresh button click event, we can't prevent it. But, as a workaround, you could defined a TriggerCount property in the page model, and use a hidden field to store the value in the form, then in the handler method, get the hidden field value and based on the count to do something. Code as below:
code in the .cshtml.cs page:
public void OnPostDelete()
{
if (Request.Form["TriggerCount"].Count > 0)
{
TriggerCount = Convert.ToInt32(Request.Form["TriggerCount"]);
TriggerCount++;
}
if (TriggerCount < 2)
{
// do something.
Message = "Delete handler fired, Count:" + TriggerCount;
}
else
{
Message = "Over 2 times";
}
}
Code in the .cshtml page:
#page
#model RazorPageSample.Pages.HandlerPageModel
#{
}
<div class="row">
<div class="col-lg-1">
<form asp-page-handler="edit" method="post">
<button class="btn btn-default">Edit</button>
</form>
</div>
<div class="col-lg-1">
<form asp-page-handler="delete" method="post">
<input type="hidden" asp-for="TriggerCount" />
<button id="btndelete" disabled="#(Model.TriggerCount>=1?true:false)" class="btn btn-default">
Delete
</button>
</form>
</div>
</div>
<h3 class="clearfix">#Model.Message</h3>
the screenshot as below:
I have created a template and a controller for it in ODOO v8. Following is the template:
<template id="myTemplate">
<t t-call="myTemplateHeader"/>
<div class="myClass">
<form action="/myControllerAction" name="myTemplateForm">
<input type="text" id="name" name="name"/>
<input type="text" id="lname" name="lname"/>
<input type="text" id="email" name="email"/>
<input type="submit" value="Submit"/>
</form>
</div>
</template>
And I have written a controller for the action /myControllerAction.
#http.route(['/myControllerAction'], type='http', auth="public", website=True)
def index(self, **post):
data = {}
# some action here
# to submit and fetch values
request.website.render("my_module.mySecondTemplate", data)
I have added validations on the fields in the form so that one cannot submit the form without entering the values in all the text fields given. The validations in JS works, it shows an alert message when the text fields are blank(one alert for each text field). But, after clicking the OK for the alert message of email field, it submits the form even when the field is empty. I have checked the issue and found that the problem exists only if I provide
<input type="submit" value="Submit"/>
and it will be solved if I am using
<input type="button" value="Submit"/>
But I have to make some calculations in the controller and need to retrieve some data from the database to show on the next page. For this, type="button" cannot be used as it just submit the form and redirect to next page without making a call to the controller function. type="submit" will make the call to the controller, but validations are not working as described earlier. Also submitting the form using onclick event of the button in javascript won't call the controller. I want validations on the form and then call the controller(on submit). Is there any way I could implement this in ODOO v8?
For making fields mandatory in ODOO templates, the attribute required="required" can be used on input fields.
<input type="text" id="name" name="name" required="required"/>
I want to Trigger boot-strap model on click of disabled text-box or text Area
I have tried it but it works fine with text box if the text box enabled
<input type="text" data-toggle="modal" data-target="#myModal" disabled="disabled"/>
Disabled elements don't fire click event on all the browsers, or all the inputs.
https://developer.mozilla.org/en-US/docs/Web/Events/click
Try this:
<span class="disabled">
<input type="text" data-toggle="modal" data-target="#myModal" disabled="disabled"/>
</span>
Javascript:
$('span.disabled').on('click', function(event) {
$('#myModal').modal('show');
});
OR if you want to collect the target from the input:
$('span.disabled').on('click', function(event) {
var modal_target = $(this).find('input').data('target');
$(modal_target).modal('show');
});
I have a set of radio buttons that reveal more options on a page when they are clicked. Here is the set of radio buttons...
<div class="field">
Single
<input id="selection_single" type="radio" value="single" name="selection" checked="checked">
Repeating Dates
<input id="selection_repeating" type="radio" value="repeating" name="selection">
</div>
I am trying to click the 2nd button w/id selection_repeating. In my spec file I have choose("selection_repeating"), but am getting an error when running the script saying Unable to find radio button "selection_repeating". Any ideas?
I want to submit multiline text with Enter key pressing and I can see full-text before submitting it. I know there are two way to submit a form with textarea and input type=text, but both of them do not reach my requirement. Any help, please!
Note: Submit button is hidden
Form with textarea.It shows full-text but when I press Enter button, it creates a new line, not submit.
<form data-ng-submit="sendMessage(message)" >
<textarea data-ng-model="message" placeholder="Add your message"></textarea>
<input style="display:none" type="submit" value="Submit">
</form>
Form with input type=text.Enter pressing to submit is ok, but It can not show multiline in text input field, so I can not see full-text
<form data-ng-submit="sendMessage(message)" >
<input type="text" data-ng-model="message" placeholder="Add your message"></textarea>
<input style="display:none" type="submit" value="Submit">
</form>
Textfields can't be multi-line, so that option is out. Intercepting a button press is complicated across browsers. jQuery provides a standardised interface into this data (if you're not using jQuery this will be difficult).
Extract from Form submitting when pressing enter in Textarea
$('#myTextArea').keydown(function(event) {
if (event.keyCode == 13) {
$(this.form).submit()
return false;
}
}