I have a JSP page with multiple form elements (textbox,drpdown menu,textarea etc), I want to clear them on click of a button, i have written the below JavaScript code:
function clearForm(frm){
alert("in clear form");
$("textarea").val("");
document.getElementById("City").selectedIndex = 0;
document.getElementById('STREET_NAME').value="";
return false;
}
JSP code:
<form action="<%=request.getContextPath()%>/insertData.htm" id="myForm">
//here i have form elemetns like textbox, dropdown meny,text area etc.
<button name="clearButton" id="clearButton" onclick="return clearForm(this.form);">CLEAR</button>
<button name="buttonName" type="submit" id="submitButton" value="submit">SAVE</button>
</form>
When I click on CLEAR button, its going to JavaScript clearForm(frm) function ,clear the fields, then the form is getting submitted and the control is going to the controller class(Spring controller).Where I am going wrong, the form should not get submitted.
--EDITED--
When I use the below code , only textarea field is getting cleared.
function clearForm(frm){
$("textarea").val("");
document.getElementById("City").selectedIndex = 0;
document.getElementById('STREET_NAME').value="";
return false;
}
<button type="button" style="font-size:9px; height:20px;text-transform:uppercase;" name="clearButton" id="clearButton" onclick="return clearForm()">CLEAR</button>
Please find the same in jsfiddle
According to the MDN, without specifying a type attribute, a <button> element defaults to type="submit".
Add type="reset" to your button, and you won't need any JavaScript to clear out the form.
<button type="reset" name="clearButton" id="clearButton">CLEAR</button>
Otherwise, add type="button"…
<button type="button" name="clearButton" id="clearButton" onclick="return false;">CLEAR</button>
DEMO: http://jsfiddle.net/7TBW2/2/
EDIT:
As per OP's comments as to why his jsFiddle is not working.
OP's HTML:
<input type="text" name="relName" value="REL100" required="true" />
<textarea name="NOTES" cols="50" rows="4" />aklsdjj</textarea>
OP's JavaScript:
document.getElementById('relName').value = "";
$("textarea").val("");
You have lots of errors and inconsistencies:
1) document.getElementById('relName') is looking for the id attribute, but you don't have an id on this input, only a name attribute.
Add an id:
<input type="text" name="relName" id="relName" value="REL100" required="true" />
2) $("textarea") is a jQuery selector but you don't have any jQuery library included in your jsFiddle. Not sure why you would be mixing jQuery selectors with getElementById() in the first place, so I assume you're not really using jQuery for anything.
Use jQuery or don't, just be consistent:
document.getElementById("NOTES").value = "";
3) Your HTML is invalid on the textarea. You do not need a "self-closing" slash inside the opening tag since textarea is a container element.
It should be:
<textarea name="NOTES" id="NOTES" cols="50" rows="4">aklsdjj</textarea>
FIXED: http://jsfiddle.net/z9uGv/2/
Related
I have a form with id theForm which has the following div with a submit button inside:
<div id="placeOrder"
style="text-align: right; width: 100%; background-color: white;">
<button type="submit"
class='input_submit'
style="margin-right: 15px;"
onClick="placeOrder()">Place Order
</button>
</div>
When clicked, the function placeOrder() is called. The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone).
The above code works, but now the problem is that I can't get the form to submit! I've tried putting this in the placeOrder() function:
document.theForm.submit();
But that doesn't work.
How can I get the form to submit?
Set the name attribute of your form to "theForm" and your code will work.
You can use...
document.getElementById('theForm').submit();
...but don't replace the innerHTML. You could hide the form and then insert a processing... span which will appear in its place.
var form = document.getElementById('theForm');
form.style.display = 'none';
var processing = document.createElement('span');
processing.appendChild(document.createTextNode('processing ...'));
form.parentNode.insertBefore(processing, form);
It works perfectly in my case.
document.getElementById("form1").submit();
Also, you can use it in a function as below:
function formSubmit()
{
document.getElementById("form1").submit();
}
document.forms["name of your form"].submit();
or
document.getElementById("form id").submit();
You can try any of this...this will definitely work...
I will leave the way I do to submit the form without using the name tag inside the form:
HTML
<button type="submit" onClick="placeOrder(this.form)">Place Order</button>
JavaScript
function placeOrder(form){
form.submit();
}
You can use the below code to submit the form using JavaScript:
document.getElementById('FormID').submit();
<html>
<body>
<p>Enter some text in the fields below, and then press the "Submit form" button to submit the form.</p>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
HTML
<!-- change id attribute to name -->
<form method="post" action="yourUrl" name="theForm">
<button onclick="placeOrder()">Place Order</button>
</form>
JavaScript
function placeOrder () {
document.theForm.submit()
}
If your form does not have any id, but it has a class name like theForm, you can use the below statement to submit it:
document.getElementsByClassName("theForm")[0].submit();
I have came up with an easy resolve using a simple form hidden on my website with the same information the users logged in with. Example: If you want a user to be logged in on this form, you can add something like this to the follow form below.
<input type="checkbox" name="autologin" id="autologin" />
As far I know I am the first to hide a form and submit it via clicking a link. There is the link submitting a hidden form with the information. It is not 100% safe if you don't like auto login methods on your website with passwords sitting on a hidden form password text area...
Okay, so here is the work. Let’s say $siteid is the account and $sitepw is password.
First make the form in your PHP script. If you don’t like HTML in it, use minimal data and then echo in the value in a hidden form. I just use a PHP value and echo in anywhere I want pref next to the form button as you can't see it.
PHP form to print
$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
<input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
<input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';
PHP and link to submit form
<?php print $hidden_forum; ?>
<pre>Forum</pre>
I am trying to remove a required attribute from an input on the fly. The general idea is I have a field that is set to required, this field has custom validation with the pattern attribute. When the user clicks a button I am attempting to remove the required field.
I have put together a fiddle here:
https://jsfiddle.net/paulmatos/t1p1wub3/
HTML:
<form>
<input type="text" oninvalid='this.setCustomValidity("Enter a number in the Specified Range");' oninput="try{setCustomValidity('')}catch(e){}" pattern="[0-9]" required="required" name="password" id="password" />
<input type="text" required="required" name="temp" />
<input type="submit" class="btn btn-primary form-control" value="Submit" />
<div class="btn btn-default removeReq">Remove Required</div>
</form>
Jquery:
$('.removeReq').click(function() {
$('#password').removeAttr('required');
});
The issue I am experiencing has to do with the order of submission.
If you click remove required, and then submit the form you will see that it works as intended.
However, if you do those steps in reverse order, click submit first, then remove and try and submit again, you will notice I am still getting the validation error on the first input.
Is there anyway to get around this with this intended functionality, I am trying to get this to work just with the html5 validation.
I did have a look at the fiddle and the only way I could get the behaviour you wanted was by literally detaching, cloning and reinserting the field. Works tho.
$('.removeReq').click(function() {
var password = $('#password').removeAttr('required oninvalid oninput pattern').detach().clone();
$('form').prepend(password);
});
https://jsfiddle.net/t1p1wub3/2/
Think you are getting this due to the code in the oninvalid handler. Try this.
$('.removeReq').click(function() {
$('#password').removeAttr('required oninvalid');
});
You can try this instead of removeAtt():
$('.removeReq').click(function() {
$('#password').prop('required', false);
});
Lets say I have this: http://jsfiddle.net/oh0omatq/2/
<form>
<input placeholder="my value">Country
<button name="subject" type="submit" value="england">England</button>
<button name="subject" type="submit" value="wales">Wales</button>
<br />Your country is: Wales
<input type="submit">
</form>
Can I use this submit buttons for england and wales to set a value within the form, and reload the form, but also not loose the information already entered in the form, such as in the input box.
This above is just a preview, but I want to be able to reload and filter the input elements in the form depending on the button the user clicked, but also not loose any previously entered data in the fields.
I would recommend using javascript for this. I've edited your fiddle to use an onclick function.
<form>
<input placeholder="my value">
Country
<button name="subject" value="england" type="button" onclick="document.getElementById('value').innerHTML = this.value">England</button>
<button name="subject" value="wales" type="button" onclick="document.getElementById('value').innerHTML = this.value">Wales</button><br />
Your country is: <span id="value">Wales</span>
<input type="submit">
</form>
Changing the buttons to a type="button" so they don't submit the form allows the javascript to edit the value. Ofcourse you can make an input out of the span, allowing the chosen value to be sent with the form. Ofcourse, a select box would work as well then.
Would that do what you want?
You can see the edited fiddle here.
Keep in mind, this is a quick sketch. It is not recommended to use javascript inline.
Okay, I'm pretty sure I'm missing something very obvious here, but I just couldn't find a proper solution so far. What I'm trying to do is simple: Have a user write something into a form, have him submit the form, and write that input into a textarea on the same page.
This is my code:
<html><head></head>
<body>
<form name='registration'>
<label for="input">Input:</label>
<input type="text" id="input"/>
<input type="submit" id="submit" value="Submit" onclick="execute()"/>
</form>
<div id="results">
<span>Result</span>
<span><textarea cols="30" rows="5" id="resulttext" readonly="readonly"></textarea> </span>
</div>
<script>
function execute()
{
var result = document.getElementById("input").value
document.getElementById("resulttext").value=result;
}
</script>
</body>
</html>
Now what happens if I enter something into the form is that the textarea briefly shows my input before reverting back to showing nothing. My guess is that the textarea field is only changed for the duration of the execute() function.
When I change input type="submit" to a <button> everything works as intended, but I'm pretty sure I'm not supposed to do that.
You need to cancel the default event for the submit button, otherwise it just submits the form (which in this case essentially reloads the page since there are no form elements with names). Add return false;after execute() (put a ; in between the two pieces)
Because your button is of type submit, it will submit your form after executing the execute() method. You can change the button type to type="button" and you will not have this submit behavior.
http://jsfiddle.net/PCCbh/
Note - using <button> is okay in this case. It is essentially the same as <input type="button".
I have a search form with a myName textfield.
On load, the field in the form is set using session attribute.
Something like:
<% String nameValue = (String)session.getAttribute("nameValue"); %>
And below code where the text field is defined:
<form name="myForm" method="POST">
<input type="text" name="myName" id="myName" size="45" maxlength="49" value="<%=nameValue%>">
</form>
In the same form I have a reset field defined as below:
<input type="reset" value="Reset" id="Reset"/>
However, on clicking this field, the myName field is not getting empty.
I also tried defining a javascript function:
<input type="reset" value="Reset" onclick="fnFormReset()"/>
function being:
function fnFormReset(){
alert("here");
document.myForm.myName.value = "";
}
However, this is also not working.
Any solution ??
The <input type="reset"> does not clear the input values. It just resets the input values to its initial state. Change the value and then click the reset button. Its actual job will be clear.
As to the problem with the JS function; the onclick will run before the type="reset" does its default job (redisplaying the original value). So, you need to either change type="reset" to type="button":
<input type="button" value="Reset" onclick="fnFormReset()"/>
or to add return false; to end of onclick to block the default action:
<input type="reset" value="Reset" onclick="fnFormReset(); return false;"/>
Unrelated to the concrete problem, I suggest to use EL (Expression Language) to redisplay the value:
value="${nameValue}"
this way you don't need that ugly <% %> anymore to get the session attribute. Also, whenever it concerns user-controlled input, then EL offers you the possiblity to prevent XSS attacks by escaping it using JSTL fn:escapeXml():
value="${fn:escapeXml(nameValue)}"
See also:
How to avoid Java code in JSP files?