I am creating a web application where I want to pass the selection done by radio button to controller.Now,I want this action to be performed without submit button.I googled a lot but did'nt get the way to do this without submit button.
here is the HTML Code for this requirement
<form action="${pageContext.request.contextPath}/env" method="post">
QA71<input type="radio" name="env" value="QA71" checked="checked">
QA72<input type="radio" name="env" value="QA72" >
</form>
Here is the code of java for this requirement
#RequestMapping(value = "/env", method = RequestMethod.POST)
public String env(HttpServletRequest request){
logger.info("parameter is "+request.getParameter("env"));
return "home";
}
I appreciate your help.
If you don't want to use a submit button you should use javascript to submit the form one way to do that is:
document.getElementById("myForm").submit();
so first you need to put an id attribute to your form, and second you need to decide in what event you want to submit the form in this example I chose on blur of the second radio:
<form id="myForm" action="${pageContext.request.contextPath}/env" method="post">
QA71<input type="radio" name="env" value="QA71" checked="checked">
QA72<input type="radio" name="env" value="QA72" onBlur="submitForm()">
</form>
function submitForm() {
document.getElementById("myForm").submit();
}
Related
I am writing a search box in HTML that takes the user input and append it to the URL as a parameter. The code of the form looks like this.
<form name="form" action="" method="get">
<input type="text" name="id" id="idresponse">
<input type="submit" value="Submit">
</form>
This will bring the user from example.com/test.html to example.com/test.html?id=12345678 assuming they entered 12345678 at the text box.
However, if the user inputted nothing and clicked Submit, they will be brought to example.com/test.html?id=, which I don't want. How can I modify the code so that the form knows that a certain field is left blank and do not send the parameter with the URL? In this case, the desired URL would be example.com/test.html.
edit 20210405 2057 changed the id of the input from idresposne to idresponse to avoid confusion
The so-called URL parameters is the querystring of the URL.
The following code does not use jQuery, but achieves a similar effect. (written by RobG)
<form name="form" onsubmit="disableEmptyInputs(this)" action="" method="get">
<input type="text" name="id" id="idresponse">
<input type="submit" value="Submit">
</form>
<script>
function disableEmptyInputs(form) {
var controls = form.elements;
for (var i=0, iLen=controls.length; i<iLen; i++) {
if (controls[i].value == '') controls[i].disabled = true;
}
}
<script>
This will remove all the parameters but the ? will still trail the URL. i.e. the URL will be example.com/test.html? instead. However, this does not matter because they both point to the same address.
Refer to these links (kindly provided by Progman) for other ways of doing this, including using jQuery.
Delete empty values from form's params before submitting it
Delete empty values from form's params before submitting it
How can I remove empty fields from my form in the querystring?
Thanks.
I have a simple form to get a table's row/column numbers, with a button type = "submit" that reloads the page onClick .
I want to keep the warnings when the user enters an invalid value, since the inputs have a maximum/minimum number required, which is not possible with the return false; in the end of the onClick method, or event.preventDefault();
Any ideas how to do that?
This code is in JSX:
<form id="table_form">
<label>how many rows ?</label>
<input
type="number"
name="rows"
min={min_tablerows}
max={max_tablerows}
required
value={tablerows}
onChange={onChangeHandeler} />
<label>how many columns ?</label>
<input
type="number"
name="columns"
min={min_tablecolumns}
required
value={tablecolumns}
onChange={onChangeHandeler} />
<button
type="submit"
form="table_form"
onClick={onClickHandeler}>
<FontAwesomeIcon icon={faCheck} />
</button>
</form>
You want to keep the default html warnings if I understand your question well. I would like to suggest the following:
Firstly, you don't need to attach onClick event handler for the button because a button in an HTML form or with the type submit by default submits to the form it is contained.
You can attach onSubmit event handler to the main form and in its callback function prevent the default behaviour.
With this, html5 will handle any errors and prevent the form from even submitting in the first place. When it doesn't find any error, it will run the callback function attached to the form's event handler.
So your code might be as follows:
handleSubmit(e) {
e.preventDefault();
// Do what you like here
e.target.submit(); // if you want to submit the forms
}
<form id="table_form" onSubmit={this.handleSumbit.bind(this)}>
<label>how many rows ?</label>
<input
type="number"
name="rows"
min={min_tablerows}
max={max_tablerows}
required
value={tablerows}
onChange={onChangeHandeler} />
<label>how many columns ?</label>
<input
type="number"
name="columns"
min={min_tablecolumns}
required
value={tablecolumns}
onChange={onChangeHandeler} />
<button
type="submit">
<FontAwesomeIcon icon={faCheck} />
</button>
</form>
For a webapp i'm currently developping, i need to hide the standard IOS keyboard when focusing on a textbox.
This can be done simply by adding the 'readonly' tag, and opening my custom input using a onClick function.
<form method="post" action="" enctype="multipart/form-data">
<input type="text" id="test123" onClick="doSomething();" readonly required />
<button type="submit" value="submit">
Save
</button>
</form>
(JSFiddle)
This works. Partially. By enabling the readonly i'm able to keep the keyboard hidden. But, another problem rises. When using the readonly, 'required' is not called. You can submit the form with an empty field, because its assumed a readonly field contains what it has to contain.
How can we possibly keep the readonly, and the required? We can't. We need a workaround.
Edit:
In regards to the possible duplicate.
The answer in THIS post is to add JQuery readonly with preventDefault. The problem with this is, that on ios devices the keyboard will stil open, which is ultimately our goal. The keyboard must not open, and still it should be a required field. In theorie, i think this can be achieved using Javascript validation. But that means, my submit button will be calling a js function, while it has to be calling our php function to submit our data.
Here's how i solved this problem. I tried to make a JS validator, as simple as possible.
$('#dataInput').submit(function (e) { //Form is submitted, it calls this function automatically
var empty = 0;
$('input[type=text]').each(function(){ //Check each input (had to be done like this, because i dont know the amount of input beforehand)
if (this.value == "") { //The textbox is empty
empty++;
}
})
if(empty === 0){ //No empty textboxes
}else{
alert(empty + ' empty input(s)'); //There are empty textboxes
e.preventDefault(); //Prevent the submit from happening
}
});
You can check out the fiddle here
You can set and remove READONLY before enter or leave the field.
$(".datepicker").on("touchstart", function(e) {
$(".datepicker").attr("readonly", "readyonly")
})
$(".datepicker").on("blur", function(e) {
$(".datepicker").removeAttr("readonly")
})
First Approach: You can assign a dummy value and then check in the backend whether the value is changed or not, if it is not changed, you can show an error message. Other wise save into database.
<form method="post" action="" enctype="multipart/form-data">
<input type="text" value="dummy" id="test123" onClick="doSomething();"
readonly required />
<button type="submit" value="submit">
Save
</button>
</form>
Second approach: when you fire the onclick event of the input field, you can remove the readonly attribute using the following code.
function doSomething()
{
$("#test123"). removeAttr("readonly");
}
I have form:
<form:form id="searchForm" modelAttribute="fbosAttributes" action="result" method="get">
....
</form:form>
Inside of this form I have two submit buttons with name:
<input type="submit" name="ashtml" value="${labelbuttonhtml}"/>
<input type="submit" name="asexcel" value="${labelbuttonxls}"/>
Those two buttons works fine for different method in my controller, I use params to recognize:
#RequestMapping(value="/result.xls", method=RequestMethod.GET, params="asexcel")
The question is how to make this to buttons react on different action and also how to add two actions inside of form?
use javascript functions to post your form. You can call two different javascript functions onClick of buttons and you may submit your form from that function.
Assuming you can use Jquery,
HTML
<input type="submit" id = "ashtml" name="ashtml" value="${labelbuttonhtml}"/>
JQuery
$(document).ready(function(){
$("#ashtml").click(function(){
document.searchForm.action = "<%= request.getContextPath()/ashtml.htm %>";
});
});
Controller
#RequestMapping(value="/ashtml.htm", method=RequestMethod.POST)
I have the following code in my form:
<form action="mail.php" method="POST">
Is there a way to add another submit button and let php know that if button1 is used it sends the data to mail.php while is button two is used it send the data to mail2.php ?
Thanks for the help
It would be correct to use the value of the radio-button, passing the parameter option, like:
<input type="radio" name="how" value="mail1" id="radio1"><label for="radio1">Name of parameter1</label>
<input type="radio" name="how" value="mail2" id="radio2"><label for="radio2">Name of parameter2</label>
and on the server:
$mail = $_POST['how']==mail1?'mail1':'mail2';
include($mail.'.php');