I have a form in which there is a reset button and three list box(Select Box) and submit button.
In which i have reset button like.
<s:reset name="reset" type="reset" id="reset" ></s:reset>
when i click on this before submit the page. it will reset the list box means it will select the default value of 'Select' Index = -1 means working fine. but after i submit the page. this will come to the same page with latest records. after that when i click the reset button. it will not give any response to that page. it should be change the default value of list box means "select" but it will select the last value of the list box (The value i selected before save button clicked). i change it to simple Html reset button also but still not get success. can you please help me abt this solution.
Thanks in Adv
Dhrumil Shah
the reset functionality only works in the current page stage (ie., it will reset the page to whatever state the page was in when it was loaded). since http is a stateless protocol it can't remember what was the value of the select box before the page was reloaded or submitted.
you can use javascript (jquery preferably) to accomplish things like this...
$("select").val(-1);// this would reset all combo boxes in the page to value -1
$(":text").val("");// this would reset all textboxes in the page to blank
$("textarea").val("");// this would reset all textarea in the page to blank
you can find more about jquery here.enter link description here
The <s:reset /> will renders as html <input type="reset"...>, of course it will not reset the submitted form.
#Dhrumil Shah
In which i have reset button like.
<s:reset name="reset" type="reset" id="reset" ></s:reset>
when i click on this before submit the page
The type is type of submit to use, valid values are input, button and image, default is input
You should use <s:a> to reset the form (reload the page). e.g.
<s:a><button>Reset</button></s:a>
Or
<s:a cssClass="button-like-css">Reset</s:a>
Related
I have 4 links. Previously implemented as A tags.
My goal is to switch the request method (GET) with POST. Everything else have to remain the same!
The problem - it must be implemented using pure HTML - to be exact - no ajax and no window.open().
My solution is half way there. Hopefully to get a creative second half from you (impossible is also an answer)
Here is the (simplified) HTML:
<form
id = "resultsForm"
target="_blank"
action="http://example.com"
method="post"
>
<input type="hidden" name="data" value="someData">
<button type="submit" value="submit">
<p class="contextual"> title </p>
<span></span>
</button>
</form>
Now, it looks and feels like the old implementation and also sends POST requests
But - contrary to a link - a button can't be middle clicked or opened in new window when right clicking on it (by default...)
Can I somehow wrap it in an A tag to achieve the explained behavior without using js events or be conflicted with form subbmission?
Your help is really appreciated
No, this is impossible.
Anchor elements cannot contain interactive elements such as button elements.
Forms should be posted to the target window, so a normal click on the submit button, by virtue of the _blank value, should open an unnamed browsing context (a new window or tab).
Users should be accustomed to not middle-clicking on buttons, although there is a habit of developers to style links to look like buttons, throwing off users' expectations (end rant:)).
How to make the html input field allow to be blank, when i click the submit button on the form view?
the idea is when I click the submit button, the input is a must to key in something else the behind code is unable to run, I am using the asp.net and the button is the asp button not html button
http://s15.postimg.org/wtl7xtuyx/myinputpic.png
I want to allow the new password can be blank
If clearing fields is what you want, use .reset() method.
document.getElementById("YourFormName").reset();
A working fiddle here:
https://jsfiddle.net/4fpk2z9o/
I may comprehend it wrongly as I do not really understand what do you want.
Update (To disable html 5 form validation) :
Add novalidate='' or <form action="yourform.asp" novalidate> to your form.
In my AngularJS project I have an account details page where you can change your personal account information. This page allows for multiple phone numbers and e-mailaddresses to be supplied. Using mouse input (or tabbing to buttons and pressing them with space bar) works perfectly, however I'd like to add the convenience of the enter key pressing the 'logical' buttons.
My form looks like (accidentally forgot to translate a few items):
A simplified version of the HTML for the form can be found on PasteBin, I've mainly removed the directives for managing the lists.
All buttons are <button> elements except for the cancel button which an <a> to the previous page, and the submit button is <button type="submit">.
When selecting any text box and pressing enter, the first (non-disabled) <button> element is 'clicked'. Meaning if I would change the last name, hit enter, the first phone number would be removed.
When you're in a new entry of phone numbers or e-mailaddresses (the row with the green + button) it should click that button, and if it's disabled do nothing.
When you're in any other text box on the form it should hit the save button, and also if the save button's disabled, do nothing.
Both buttons will be disabled based on form validation.
There'd be no trouble in changing the type of a button from button to submit if that'd help.
I would preferably have an all HTML solution, using just semantics, but I doubt that's really possible. So the logical alternative would be to use an AngularJS directive.
Please do not provide a jQuery or plain JavaScript solution relying on IDs or something like that. I don't want to hack my way around AngularJS, rather embrace it.
In the meantime I've worked on a directive that allows me to declare what I've called 'submit scopes'.
In essence you have actions (inputs) and targets (buttons), they're bound through a service by a key you can assign in the template. To avoid keys from clashing and from simple annoying work you can create a submit-scope which will cause it's children to prepend a unique key to the value they're accessing.
Within a submit-scope you can still override an action to use a global key instead by setting the attribute global-submit="true".
Example code:
<div submit-scope>
<input type="text" submit-action />
<button type="button" submit-target>Pressing enter in the above field will click this button.</button>
</div>
You can view the entire source code and a slightly larger example on Plnkr.
I just tried to replace
<button>Cancel</button>
with
<input type="button" value="Cancel">
and it seems to work correctly...
I have a very long form, so I need to separate it to different pages.
My questions are:
1) How to save the form input when the user navigate to next form, and when the user back to previous form, the data entered previously will still be there.
2) How can I save the data of the incomplete form and provide the user a link so that he can go to that link and continue to fill in the form before actually submit it.
Please advise me on how to achieve these. Thanks in advance.
Simply submit the form to next form page and in next form page you can populate hidden fields with the received data from form1
form2.php
$form1Field = $_POST;
form2.php
<form action="form3.php">
<input id='form1_name' type='hidden' value='<?=form1Field['name']?>' />
<input id='form12_email' type='text' value='' />
</form>
#katti's suggestion is good, easy way is to make divs for each form and hide using css "display:none" all divs except 1st, then on a click button, hide div1 and show div2 so on. that way you wont need many form and will need less code and faster solution.
You can use hidden fields for this purpose. Or save data in cookies.
You can divide the form by dynamically loading the next part of the form using JavaScript.
And it is a better user experience too not loading a new page completely.
In this case you can save the form content in a JSON object which can be posted to the server once the user hits submit.
This is a very rudimentary question, but I am sure someone out there knows why. In HTML, when I make a button element by itself, and do not give it and onclick and no jQuery .click() the button will just do nothing. Perfect. But when I do this and but the button inside a <form> element, it tries to send GET data of all the form elements to the root address of my website? Why is it doing that? I didn't make it a submit button or even define a method or action on that form??
Thanks for the info in advance!
** EDIT **
This is what I did to fix the problem. For buttons inside the <form>, use:
<button type="button"></button>
And it will not do anything by default.
As can be seen at the respective MDN entry, the default value for the type property of a button element is submit. So if you omit it or don't change it to button or reset, the default behaviour will kick in and the form gets submitted.
<form action="">
<button type="button">Nothing will happen</button>
<button>Form gets submitted</button>
</form>
I didn't make it a submit button
<button> elements have a type attribute. The default value is submit. Set type="button" if you don't want it to submit a form.
or even define a method
method defaults to GET
or location on that form??
action defaults to the current URI.
It was designed that way because you sometimes need to know WHICH button was pressed on the server-side. If you want button functionality without a button, use a styled A-tag.
Buttons are treated as submit controls in forms, not sure why.
The reason it gets posted to your root is because you didn't specify an action and so the default is used.
The reason it used GET is because that's the default method.
To prevent it happening, add return false; to the end of your button's onclick.