I have two buttons inside a form call:
<% using (Html.BeginForm()) {%>
<input type="submit" value="Filter" />
<input type="reset" value="Clear Filter" />
The fields in question:
<td>
<%:Html.TextBox("filterId", Model.IdFilter, new {style="width:100px"}) %>
</td>
<td>
<%:Html.TextBox("filterTitle", Model.TitleFilter, new {style="width:500px"}) %>
</td>
<td>
<%:Html.TextBox("filterStatus", Model.StatusFilter, new {style="width:100px"}) %>
</td>
The first button calls the form action. The second button should either:
Clear the form and not post
Redirect to another action
Not sure why I'm having so much trouble with this, but it seems like there should be a very simple way to do this. However, all the solutions I've come across seem way too complicated for this.
Am I missing something?
EDIT: Here's the solution:
Change the reset button to a plain jane button with an id:
<input type="button" value="Clear Filter" id="clearFilter" />
Then add this script:
$(function () {
$("#clearFilter").click(function () {
$(':input', '#form0')
.not(':button, :submit, :reset, :hidden')
.val('');
$('#form0').submit();
});
})
You may have to write custom script to get the behavior you want. It is a reset button, after all, not a clear button.
At this point, if you change the values of the controls, then click the rest button, the form will be returned to its original state, of the state of whatever the model was when it was rendered.
Related
I have a simple (mostly-working) submission form:
<form action="http://127.0.0.1:3000/books" method="POST" class="addBook">
<input type="text" placeholder="Title" name="title" required>
<input type="text" placeholder="ISBN" name="isbn" required>
<button id="submitBook" type="submit" onclick="addingBooks()">Submit</button>
</form>
My form properly adds the input values to my database and it then appears in the DOM when I go back and refresh the page.
I have applied an preventDefault() function in my JavaScript code for the 'addingBooks()' function to stop it from submitting twice, but I am still unable to stop it from forwarding to the action page after submission which only shows the JSON of the submitted data.
If you need more then please let me know.
To prevent the default action of an event you'll need an event object to call preventDefault on. Some browser do in fact have a global event object but that might not be reliable.
The simplest option would be to return false from the onlick event, not from a function you call in it
<button id="submitBook" type="submit" onclick="addingBooks();return false;">Submit</button>
another simple and better solution would be to make the button be a regular button instead of a submit button and remove the preventDefault from addingBooks.
<button id="submitBook" type="button" onclick="addingBooks()">Submit</button>
another and even better solution would be to not use the onclick attribute at all, use the addEventListener function
document.getElementById('submitBook').addEventListener("click", function(e){
e.preventDefault();
//other stuff
});
This prevent enter submit,but at the moment prevent enter in inputs.
I need that enterkey work in inputs but not submit form.
<template id="form-template">
<form action="save-passport" #keypress.enter.prevent method="post" enctype="application/x-www-form-urlencoded" >
<input type="submit" v-show="loaded" v-on:click="saveForm" value="Save" />
<input type="text" required="required" name="field-11" >
<select required="required" name="field-13"><option value=""></option>
</select>
</form>
</template>
Had the same problem. Solution I did was to put the submit method on the opening form tag. Then no need for the input/button type="submit" inside the form at the bottom.
<form class="form" action="" method="POST" #submit.enter.prevent="createForm()">
Also other options available on inputs:
#keydown.enter.prevent
#keyup.enter.prevent
#submit.enter.prevent
I did it this way
first i removed vue modifiers from form tag.
second i chaged type of input from submit to button
and third this my saveForm function
saveForm:function(){
if (someCondition){
event.preventDefault();
}else{
document.forms[0].submit();
}
}
You need to use the prevent modifier. Another thing, your webpage itself must have the focus. Meaning, if you just visit the webpage, prevent won't work. But, if you click somewhere in the form, prevent will work for you.
You can still submit the form via JavaScript using something like document.forms[0].submit();
I need to get the value from outside the form. My gsp looks like this
<g:textField name="email" value="${someInstance?.email}"/>
<input type="button" id="checkEmail" class="button" value="Validate" onclick="checkEmail()"/>
<span id="responseDiv"></span>
<g:form action="save">
someCode
<g:submitButton disabled="true" style="color:#999999;" class="save" name="save" action="save" id="saveButton" value="${message(code: 'default.button.save.label', default: 'Submit')}"/>
</g:form>
First, to check if an email is in use, click button (id="checkEmail") and onclick goes to js code checkEmail() which has remoteFunction that updates responseDiv. After that, user enters information to the form, and user clicks submitButton. When that submit button is clicked, I would like my gsp to send email value along with other information to the controller. Any suggestion?
Thanks in advance.
Easy, put the input inside the form.
If that isn't an option for some reason, use the callback to update a hidden field inside the form with something like $("#hiddenEmail").val(emailAddress);
PS. I like how you gave a span an id of responseDiv :)
Can i use an anchor tag to submit a form? In this code i am using a submit button which is standard but how to use a anchor tag <a href=Cart?removeId=${cartItem.productId>Remove</a>
I tried this, but the doGet() method is being called in the servlet. I want to call the doPost() method obviously. So could i use a better approach.
<c:forEach items="${lstCart}" var="cartItem" varStatus="count">
<form action="Cart" method=Post>
<tr height="40px">
<td>${count.count}</td>
<td>${cartItem.productName}</td>
<td>${cartItem.quantity}</td>
<td>${cartItem.unitPrice}</td>
<td>${cartItem.totalPrice}</td>
<td>
<input type="hidden" name="id" value="${cartItem.productId}" />
<input type=submit value="x"></td>
</tr>
</form>
</c:forEach>
You need to use JavaScript to make an anchor link do a post. You might use CSS to style your submit button and make it look more like a link, though.
Yep as #JB said you can post the form using JScript. One example that comes to my mind is below with struts, here you are actually passing the product id as a variable to JS method (I changed the names so it matches your example).
<a href="#" onclick="removeProduct(${cartItem.productId})">
Remove
</a>
You can then have JS method to be
function removeProduct(productId) {
document.forms["formname"].elements["productId"].value =
productId;
document.forms["formname"].submitTestPost.click();
}
This also assumes the following is defined in the page (so JS can set it) and the submit property (tag SubmitTag). I am not sure in your case the setup but perhaps you can draw some points.
<input type="hidden" name="productId"/>
I am using mvc 2.0 with C#.Net
In my view page, I am creating multiple controls with required field validations. to plot my controls, I am using for loop through my mode object which is actually a collection of business object. For my TextBox control which represent 'user comments', I have put validation under it. like
<%:Html.TextBoxFor(model=>model.mycollection[i].Comment %>
<%:Html.ValidationMessageFor(model => model.mycollection[i].comments) %>
There is a sumit button for each row (for each comment textbox) like below
<input runat="Server" name="Button" id="Submit1" type="submit" class="button" value="save comments">
When the form loads, 3 rows are created, each containing a set of text box and a button to submit. This is because the model is a collection of 3 objects. So now I can submit each comments entered by user individually. But the problem is, when I click on any button, instead of validating corresponding textbox for required validation, it validates all of the textboxes on page at a time and gives error message for all of them. How to avoid this kind of behaviour? Mypage has a html.beginform method on top to put everything in a single form and to post the submit to an controller action.
Can you try to put each object from your collection in a separate form like this:
<table>
<% foreach(person in Model.Personlist) { %>
<tr>
<td>
<form>
<%=Html.TextAreaFor(...) %>
<%=Html.ValidationMessageFor(...) %>
<input type="button"......></input>
</form>
</td>
</tr>
<% } %>
</table>
..so then only that form will be validated when you click submit.
Also you can use divs instead of table .