my problem is about a form-control which has no validation conditions but after submit it shows the success mark which i don't need it
so is there a way to remove the validation from it?
<Form
noValidate
validated={validated}
onSubmit={e => this.handleSubmit(e)}
>
<Form.Control as="textarea" rows="3" />
Delete type="submit" from the insert button. It makes the form call the onSubmit function and then it decides whether it is going to reload the page if form is filled or not. You don't need this props noValidate
validated={validated}
onSubmit={e => this.handleSubmit(e)} as well.
Related
I have a simple problem yet it seems impossible to solve in AMP!!
I have a simple form with an input and a submit button like this:
<form id="myform">
<input type="text" id="srchInput"/>
<button type="submit">Submit</button>
</form>
All I want is to be able to concat a static url to the input value and redirect the page to the result, when the form is submitted.
For instance if the user inputs: "Hello" and submits the form, I would like to redirect him to a page like "MY/STATIC/URL/Hello".
Is there any way to achieve this in amp?
One way of doing this is by setting the AMP-Redirect-To header in the response (See AMP-form-redirection). Send the user input on form submission, and then generate your desired url from your API endpoint and set AMP-Redirect-To header in your response to the generated URL.
Another way of doing it would be by using navigateTo(url=STRING) action (See AMP Actions & Events) on for the form submit event. In this case you have to store the value in input to a state by using events like input-throttled, and then use url substitution in the navigateTo url string to append amp-state value.
The first method is guaranteed to work.
The second method should work in theory, but I was unable to figure out how to get AMP-STATE value by url substitution. The code for the same should be something like:
<form id="myform" on="submit:AMP.navigateTo(url="MY/STATIC/URL/AMP_STATE(endValue)>")">
<input type="text" id="srchInput" on="input-throttled:AMP.setState({ endValue : event.value })" />
<button type="submit"> Submit </button>
</form>
If you can figure out how to substitute amp-state value to the url this should work. Let me know if it helped.
The easiest way to do this is via a GET action:
<head>
...
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
</head>
<body>
<form method="GET" action="MY/STATIC/URL" target="_top">
<input type="text" id="srchInput" name="srcInput" value="test">
<button type="submit">Submit</button>
</form>
</body>
The form submit will navigate to /MY/STATIC/URL?srcInput=test.
I have a form in my ASP .NET project that takes the users input, and appends it to a URL to search a wiki. The form works perfectly when you enter in a search term, and click the 'search' button, however when you type into the input box and hit enter, the page refreshes and the box clears.
my html
<form>
<label id="sideBarLabel"> Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
Search Wiki
</form>
my js
function searchWiki(){
var siteQuery = $('#query-string').val();
window.location.href = "/dosearchsite.action?queryString=" + siteQuery;
}
Can anyone help ?
Your searchWiki() js method is only called when the evenement onclick is raised on your button, but not when your form is submitted.
There is several ways to achieve what you want:
Add a js method to catch the onsubmit event of your form:
$("form").on("submit", searchWiki());
Or add a tag on your form:
<form onsubmit="searchWiki()">
Or specify the action attribute on your form:
<form action="/dosearchsite.action">
Note that in ASP.NET, the ModelBinder will link your form inputs to your controller action parameters, using the name attribute of the inputs. That means that you should not specify them in the url yourself.
You should also declare your form using Html.BeginForm or Ajax.BeginForm if you want your form to be submitted by ajax.
#Html.BeginForm("ActionName", "ControllerName")
{
<label id="sideBarLabel">Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="submit" class="button" value="Search Wiki"/>
}
This will call searchWiki when you press enter.
$('#query-string').keypress(function(event) {
if (event.keyCode == 13) {
searchWiki();
event.preventDefault();}});
I want to have a top menu with New, Save, Cancel buttons and below, 3 different entry forms, similar to a "desktop application". When form1 is filled up, Save button would submit the form. Also, if form2 or form3 are filled up, the same Save button can submit the form, taking into account that is in a different form.
Is it possible to do this, a submit button outside form tags ?
If not, any suggestion how to fake submit?
Thanks for your help
You just have to trigger the submit event with .submit in jQuery by example.
Here is the doc : http://api.jquery.com/submit/
Instead of an <input type="submit"> button or jQuery call you could use the new HTML5 <button> element and its form attribute to specify which form(s) the button belongs to. Then just set its formaction attribute to the required destination. Documentation
Example:
<form id="form1">
...
</form>
<form id="form2">
...
</form>
<form id="form3">
...
</form>
<button form="form1 form2 form3" formaction="processForm.php" formmethod="POST">
Submit
</button>
You can use
$("#formId").submit(function() { /*your stuff*/ });
I have following form
<form id="myForm" action="/Problems/Post" method="post" enctype="multipart/form-data">
<input type="text" id="problemSubject" name="problemSubject" />
<input type="file" id="uploadFile" name="uploadFile"/>
<textarea rows="" cols="" class="form-textarea" id="problemDescription" name="problemDescription"></textarea>
</form>
I have to submit form to controller method(which i have done), but it should be first validated i.e. it should not contain empty fields. What i want is that "a message should appear telling that field is blank". How this can be done. Please help me. Thanks.
Take a look at some of the samples. (http://www.asp.net/mvc/tutorials/older-versions/javascript/creating-a-mvc-3-application-with-razor-and-unobtrusive-javascript)
Essentially you can validate on client side and on server side, which you should do both.
It is very easy to do validation in asp.net mvc3. Look at some tutorials like above.
Or this one: http://www.codeproject.com/Articles/249452/ASP-NET-MVC3-Validation-Basic
u can use server side validation controls...
plz hv a look [link]http://msdn.microsoft.com/en-us/library/aa479013.aspx
or use the jquery gven below--->
function callOnload(){
if($('#problemSubject').val() == '')
alert('fill the values');
if($('#uploadFile').val() == '')
alert('fill the values');
}
I am working on a Spring WebFlow project that is using Dojo (dijit) for the forms and if the user does now fill in a textfield that is required the field does turn red on the click of the submit button. But radio buttons and checkboxes dont..
1) How can I make a radio button and checkbox act like text fields and turn red?
2) How can I change the following code popup a messages that the user has to fix some text fields.
<input type="submit" name="_eventId_submit" id="submit" value="Submit" tabindex="11" />
<script type="text/javascript">
Spring.addDecoration(new Spring.ValidateAllDecoration({
elementId : 'submit',
event : 'onclick'
}));
</script>
for 2) you can use Spring.validateAll() instead of the ValidateAllDecoration. (you have to remove the ValidateAllDecoration)
the function Spring.validateAll() return true or false depending on the validation results.
something like that on the onClick:
onclick="if(!Spring.validateAll()){alert('errors')}else{Spring.submitForm(...)}"
should work