I have this form here and want each radio buttons not to be able to be checked. I dont want disabled because if one happens to be selected I still want that value to be submitted to the database. This is just a basic example.
When I click on one of them it checks, then does not allow me to click the other one.
I want both buttons not to be able to be checked.
<form action="here.php" method="post">
<input onclick="return false" type="radio" name="firstone" value="Yes" /> Yes
<input onclick="return false" type="radio" name="firstone" value="No" /> No
<input type="submit" />
</form>
Does anyone know how to fix this? I dont want to use javascript.
Rather than trying to prevent clicking on radio buttons. You should use a hidden element to contain the values to send with your form.
The only reason I can imagine you want to have them disabled, but not 'disabled' is because they look ugly when they're disabled.
How about you just change the CSS on the page?
:disabled CSS selector
Related
I want to server-render an HTML form in such a way that it is not submittable until it has been asynchronously enhanced by my JavaScript.
It looks like there's no disabled attribute for the form element (MDN).
I could add a disabled attribute to the submit button (and then later remove this with JavaScript when ready), but the user could still submit the form by focusing any input and pressing Enter.
Is there any way to prevent submission without JavaScript (short of just hiding the form entirely in the server-rendered HTML, and unhiding it with JS)?
use type="button" attribute to your submit button and then change it to type="submit"
You can simply do
onsubmit="return false"
on the form tag:
<form onsubmit="return false">
<label>input
<input type="text" name="input" name="a" />
</label>
<input type="submit" value="submit" />
</form>
Sorry, answering my own question - it turns out it's easy to make a form unsubmittable (in Chrome 69 at least) just by disabling the submit button.
When the only submit button is disabled, then even focusing a text field and pressing Enter does not submit the form.
I want to create a checkbox which is unchecked always by default and users should not check it. I don't want to make the checkbox disabled as i want to pass the value of the checkbox when i submit the form. Please suggest.
The below code is not working:
<input type="checkbox" id="chkbox1" name="chkbox1" value="unChecked" checked="false" readonly="readonly">
With the above code checkbox is always selected, i want the checkbox always be unselected and users should not able to select it.I should not use the disable option too as i want to send the value of checkbox when i submit the form.Thanks.
Just remove the checked attribute all together
<input type="checkbox" id="chkbox1" name="chkbox1" value="unChecked" readonly="readonly" />
Setting the checked attribute with any string value (even false) makes the checkbox checked
i want the checkbox always be unselected and users should not able to select it.I should not use the disable option too as i want to send the value of checkbox when i submit the form
It doesn't really sound like you want a checkbox at all, but just a hidden input that sends a value
<input type="hidden" name="chkbox1" value="unChecked" />
checked attribute sets the checkbox to checked status, no matter what value the attribute checked has.
checked="checked"
checked="true"
checked="false"
checked=""
all these set to checked status
so there is no way to unset the checkbox (except some js solution) manuelly except for completely dropping the checked attribute
UPDATE: Simply change disabled to readonly, so that user cannot check it, but you still can submit this field with form
I'm new so I can't leave a comment. But according to my understand to your problem, like#adeneo suggested, why not first use a hidden one that does pass a value for the "do" with the program; then put up a dummy disabled one for the "look" with the users? As you only need it for the moment? Then later you just hide the dummy one and show the real one?
I have used jquery wizard plugin to create this form.
The form get submitted when I use the ID = "next" submit button.
when I use the ID = "quick" button it will redirect to the Feedback.Form but it will not submitted properly. (I cant see the db has been updated properly.)
$j("#quick").click(function(){
$j('#feedbackForm').submit();
});
<form id="feedbackForm" method="post" action="<openmrs:contextPath/>/module/feedback/addFeedback.form" class="bbq" enctype="multipart/form-data" >
<div id="bottomNavigation">
<input id="back" value="Back" type="reset" />
<input id="next" value="Next" type="submit" />
<input id="quick" value="Just submit now with all the defaults!" type="button" />
</div>
Please can any one help me on this?
Thanks,
Harsha
Full source : https://gist.github.com/3227043
Convert the "next" button to normal button and add and if or switch selection into the jquery code. So both buttons were normal and Jquery will decide which ones takes to submit getting the name of the button who calls the click event. Or you can do it trough a javascript function, well, you can do it in any way as you want, but both buttons must be "button" type
Really new to using jQuery and trying to find an example I need.
1) if I have, say, 5 radio buttons to choose an item, how do I pass the selected item to a hidden form field?
2) same question for a textarea. How do I pass the text written to a hidden form field and make sure it's escaped safely for a form submission?
Thanks for any help.
You can just bind to the change event:
<input type="hidden" id="myradiovalue" />
<input type="radio" name="myradio" value="0" />
<input type="radio" name="myradio" value="1" />
$('input[name=myradio]').change(function() {
$('#myradiovalue').val($(this).val());
});
And almost the same for textarea:
<input type="hidden" id="mytextarevalue" />
<textarea id="mytextareavalue"></textarea>
$('textarea').change(function() {
$('#mytextareavalue').val($(this).val());
});
For both <input type="radio"> and <textarea>, you will want to use jQuery change() method. If you want to sanitize the input before it is inserted into a <input type="hidden"> then you will need to use some regex or a library that does it for you, like jQuery Validation Plugin. Keep in mind that any sanitation/validation you do with javascript/jQuery will need to be double-checked server-side after the form is submitted.
But I don't know why you are copying data from one form input to another, can't you just use the form input as it is? What is the point of having the data in both a <textarea> and a <input type="hidden">?
I want the form to be submitted when the user chooses one of the radio button options. I know how to do this with select fields:
<select name='something' onchange="this.form.submit()">
But how to do this with radio buttons?
You can use onclick:
<input type="radio" name="something" onclick="this.form.submit()">
You can test for compatibility (of keyboard entry like left/right or tabbing then pressing space/enter and even keyboard only navigation plugins) using this example.
Try hooking into the onclick event.
<input type="radio" name="something" value="somethingvalue" onclick="this.form.submit();" />