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;
}
}
Related
I'm running into a really baffling problem where I have an extremely simple (read, newbie trying to understand) web form. The form looks like this:
<form id="myform">
<input type="text" name="t" id="t" />
<input type="submit" id="sub" value="Submit" />
</form>
Then I have some also very simple js that I just want to use to check what the value is that the user has before doing some other things and submitting.
function search()
{
var form = document.querySelector("form");
s = form.elements[0].value;
alert(form.elements[0].type);
alert(form.elements[0].value);
}
What I don't understand is why, whatever I do, the first alert shows type "text" like I want, and the second one returns nothing at all. It doesn't matter what's in the field, when I submit, it goes away before the javascript even catches it.
I also tried
document.forms["myform"].addEventListener("submit", function(event) {
event.preventDefault();
});
And it seemed to have no effect on the fact that the page always submits when I refresh, but it did stop my button from submitting.
;tldr I just want the text value from my text field so I can do some validation, but it's always empty.
edit
Let me know if I can "close" questions. The problem was how I bound the function to the button, which I hadn't even considered. Be careful with those "()"
You may have to change the keyword "search" to something else like:
<script type="text/javascript">
function doSearch() {
var t = document.getElementById('t');
alert(t.type);
alert(t.value);
}
</script>
Then this will work:
<input type="text" name="t" id="t" />
<input type="submit" id="sub" value="Submit" />
do search
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.
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 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 cannot solve this because i have many third party content (open licensed) that have some rules that doesnt work with this.
This is the principal code:
<input id="submit" class="btn-success" name="submit" type="submit" value="Comment" tabindex="7" />
This show a good button to submit my content. But now i want to include in the "value" a little icon image before the text. The other third party give me this code to include an icon where i want, just putting tag with the class of the icon that they offer, in this case:
<i class="icon-comment icon-white"></i>
Normaly, this will work, but in this case is not printed correctly cause is inside "value":
<input id="submit" class="btn-success" name="submit" type="submit" value="<i class="icon-comment icon-white"></i>Comment" tabindex="7" />
If you can see the value content, it only read until class= cause there is another quote.
How can I include all the content inside value without this kind of errors?