I have a form in html (generated in php), which contains also a text field.
To submit the form I use a submit button and the results appear on the left side of the page. Now, I would like to add another button which would clean the text in the text field
and resubmit the form (with value="" in the text field). Do you have any idea how to do it?
Simple <input type="reset"> does not submit the form.
your button should be like this:
<input type="button" onclick="DeleteText();" value="Delete text" />
and your javascript code:
function DeleteText() {
document.getElementById('my_text_input_id').value = '';
document.getElementById('my_form_id').submit();
}
suppose the text box has id="myText" and the new button has id="clearBtn", and the form has id=myForm. You can do the following:
$(#clearBtn).on("click",function() {
$('#myText').val("");
document.forms["myForm"].submit();
})
This is untested, but proposes an idea. Also, This is a jquery solution, which I recommend over pure javascript in most cases.
HTML5 brings us the "placeholder" attribute, which allows for a Pure CSS implementation of this.
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
I have successfully used Shidhin's solution, found here:
http://codepen.io/shidhincr/pen/ICLBD
Related
I have this code, I use formaction attribute to return in home.html
but it's not working because of required attribute.
<form action="post">
Name:
<input type="text" name="name" required>
<br>
Email:
<input type="email" name="name" required>
<button name="Send" id="send">Send</button>
<button name="Return" id="return" formaction="home.html">Return</button>
</form>
The formaction attribute working fine. I can use the Network tab in my browser's developer tools to observe that when I click Return (in the live demo in your question) the form is submitted to home.html.
The required fields are still required (so I have to fill them in before that happens), but that is to be expected.
It sounds like your goal is to provide an exception and not need the user to enter any data when submitting the form to Return.
That isn't possible without adding a bunch of JS but you're approaching the problem from the wrong angle in the first place.
It looks like you want something for the user to click on that will abort filling in the form and just go to a different URL. There's no data submission involved.
That isn't a job for a submit button.
Use a link instead.
Return
You can apply CSS if you want it to look like a button, but I wouldn't recommend it. The visual appearance of the button implies that the form data will be sent somewhere, and that isn't what you are doing.
You should refer to homepage at the form tag
<form action="home.html" method="POST">
and for the submit
<input type="button" name="Return" id="return">
I have a form with <input type="submit">. In Chrome submit doesn't do anything. On a Network tab in developer tools I see nothing. No errors in developer tools either. Meanwhile, if I do save a page and open a saved page, then after I press submit button, I see something appears in Network tab. This happens in Chrome and Firefox. This works as expected in IE.
Does anybody have a hindsight, what should I look at?
I don't need a direct answer, I only need to know, where should I look at. If someone posts a direction and that'll help me to solve my problem, I'll accept it as a correct answer.
Structure of a page looks like this:
html
head
body
div
div
form
form
form
form
form
input
input
table
table
tbody
tr..td..input type=submit
If you are not using any JavaScript for form validation then a simple layout for your form would look like this:
<form action="formHandler.php" method="post">
<input name="fname" id="fname" type="text" value="example" />
<input type="submit" value="submit" />
</form>
You need to ensure you have the submit button within the form element and an appropriate action attribute on the form element is present.
For a more direct answer, provide the code you are working with.
You may find the following of use: http://www.w3.org/TR/html401/interact/forms.html
Are you using HTML5? If so, check whether you have any <input type="hidden"> in your form with the property required. Remove that required property. Internet Explorer won't take this property, so it works but Chrome will.
I faced this problem today, and the issue was I was preventing event default action in document onclick:
document.onclick = function(e) {
e.preventDefault();
}
Document onclick usually is used for event delegation but it's wrong to prevent default for every event, you must do it only for required elements:
document.onclick = function(e) {
if (e.target instanceof HTMLAnchorElement) e.preventDefault();
}
Hello from the future.
For clarity, I just wanted to add (as this was pretty high up in google) - we can now use
<button type="submit">Upload Stuff</button>
And to reset a form
<button type="reset" value="Reset">Reset</button>
Check out button types
We can also attach buttons to submit forms like this:
<button type="submit" form="myform" value="Submit">Submit</button>
Check if you are using any sort of jquery/javascript validation on the page and try disabling it and see what happens. You can use your browser's developer tools to see if any javascript file with validate or validation is being loaded. You can also look for hidden form elements (ie. style set to display:none; or something like that) and make sure there isn't a hidden validation error on those that's not being rendered.
I ran into this on a friend's HTML code and in his case, he was missing quotes.
For example:
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<input type="text" name="fname" id="fname" style="width:90;font-size:10>
<input type="submit" value="submit"/>
</form>
In this example, a missing quote on the input text fname will simply render the submit button un-usable and the form will not submit.
Of course, this is a bad example because I should be using CSS in the first place ;) but anyways, check all your single and double quotes to see that they are closing properly.
Also, if you have any tags like center, move them out of the form.
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<center> <-- bad
As strange it may seems, it can have an impact.
You can't have a form element as a child (directly or indirectly) of another form element.
If the following does not return null then you need to remove the excess form elements:
document.querySelectorAll('form form');//Must return null to be valid.
check your form is outside the table
There is a HTML form which has some text input fields and 2 buttons, say Yes and No. Instead of accessing the URL first and then filling up the form, how can I fill up those text fields which I need to fill and do the action of either one of the buttons in a single URL?
E.g. Take this form for example: there are 2 fields text1 and text2.
http://www.mysite.com?text1=value1&text2=value2
In the above e.g.(hope that is right) how to add the button action also, is my question.
Appreciate your help.
Typically YES/NO choices are represented with a pair of radio buttons. These values would automatically be sent back with the form submission, based on the name of the radio buttons.
Use submit inputs instead of buttons.
<form>
<input type="submit" name="submitbutton" value="Yes" />
<input type="submit" name="submitbutton" value="No" />
</form>
Then you can grab what button the user pressed to send the form using PHP, JSP, ASP or whatever is your server-side language.
This is not possible unless you have control over the file displaying the form. If you do have control over that file I can show you how with JavaScript. It would make much more sense to use the serverside language filling the form in though.
Can be done through javascript:
Put input type=hidden in your form, and fill the value with a button and submit right after that.
<form name="name_of_form" action="" method="GET">
<input type="hidden" name="button_value" value="" id="hidden_value" />
<button type="button" onclick="javascript:submit_form('yes');">Yes</button>
<button type="button" onclick="javascript:submit_form('no');">No</button>
</form>
And add this JS function at the top somewhere
function submit_form(yesno)
{
document.getElementById('hidden_value').value=yesno;
document.name_of_form.submit();
}
note: Although it should work, I can't tell for sure, cause i suck at JS.
I was looking for a fix to stop IE refreshing the page instead of submitting my single line form, when a user hits enter instead of clicking go.
I found this solution, which works well, but I was wondering if anyone could explain why it works?
The solution I used is to add a hidden text input within the form tags, like this
`<form name="SearchForm" id="SearchForm" method="get" action="">
/*This is the hidden text input*/
<input type="text" style="visibility:hidden;display:none;" name="ieSearchEnter">
</input>
<fieldset>
<span><input type="text" name="Search" id="Search"/></span>
<div class="field actions">
<input type="submit" name="Go" id="Go" class="submit" value="Go"/>
</div>
</fieldset>
</form>`
which i found here.
Thanks!
Are you really setting the ACTION value to an empty string, or did you just do that for your code sample?
I don't think IE is really "refreshing the page"-- I think it's automatically submitting your form.
Here's a simple test page: http://www.enhanceie.com/sandbox/simpleform.asp. When you hit enter, you'll see that the URL is updated to pass the user's value.
IIRC, there is code in IE's form-handling that says that if you have form containing a single test field, then hitting ENTER will submit that form. In your workaround, you've added an additional text field so that optimization is not applied.
I think maybe your server-side code is REQUIRING that the form submission contains "Go=Go" or it ignores the submitted value (Search=Whatevertheuserhadtyped) and simply re-displays the form. If you change the server-side script such that it does not require Go=Go, then your problem should go away.
Ok so I am new here and was wondering if someone a little more advance then me can help me out.
I have text box on my website with code for user(s) to copy the code that's in the text box and paste the code in Orkut scrapbook which will generate a imagine.
I am using onclick so when user clicks on code it highlight it and then they can copy.
The problems is that you can delete or remove text from within box, if your not careful.
I DONT want the user to be able to delete code in text box. How can I prevent this from happening without removing the onclick scrip.
Please if you could when reply maybe include the sample code above and highlight the new added code so I can see where to make my changes.
I hope I explained this well for anyone to understand!
You can add readonly="readonly" to your textbox tag. Example:
<input type="text" name="someNAme" readonly="readonly" >
you can also try with:
<input type="text" name="someNAme" disabled="disabled" >
Here is a totally editable textbox, and a not editable textbox. The difference is that in the second textbox, there is a readonly attribute, which prevents the user from editing the text. (Run the code snippet!)
function copy(what) {
var copyText = document.getElementById(what);
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
}
<textarea id="selectable">This is totally editable!</textarea>
<button onclick="copy('selectable')">Copy this !</button>
<br/>
<br/>
<textarea id="unselectable" readonly>This is not editable!</textarea>
<button onclick="copy('unselectable')">Copy this !</button>