I have an HTML form that needs multiple submit buttons, like this:
<input type="submit" name="foo" value="1"/>
<input type="submit" name="foo" value="2"/>
<input type="submit" name="foo" value="3"/>
The problem is that I want it to display on the button something other than what is in the value attribute (in the example above: 1, 2, 3). For example, I want to show "Bar" for the button with value="1". Is this possible?
I've considered using the <button> tag, like this:
<button name="foo" value="1">Bar</button>
The problem with using <button> (from w3schools):
If you use the element in an HTML form, different browsers
may submit different values. Internet Explorer, prior version 9, will
submit the text between the and tags, while other
browsers will submit the content of the value attribute. Use the
element to create buttons in an HTML form.
Thoughts?
Give each of the buttons a unique name and then check for their existence in the POST vars instead. Then you can set the value to whatever you want.
Every button must have unique name so that you can set any value/values to one or more buttons. eg
<input type = "button" name = "foo1" value = "Bar1">
<input type = "button" name = "foo2" value = "Bar2">
<input type = "button" name = "foo3" value = "Bar3">
implement it..
Related
I have an HTML form on a web page. I want to send users an email with a URL that they can click to fill out the form. I want to pre-populate the value of a radio button group using URL parameters only.
The platform I am using does not allow me to do any scripting of any kind. I need to do this using only the URL parameters.
This is trivial for other types of input tags. For example, if I have a page called form.html and within that page I have an input tag as follows:
<input name="firstname" type="text">
Then I can use the following URL to pre-populate the field with the value "James":
http://form.html?firstname=James
What I am looking for is how to do this with a radio button. For example, let's say my page form.html has a radio button group with three options as follows:
<input name="status" type="radio" value="New">
<input name="status" type="radio" value="Expired">
<input name="status" type="radio" value="Renewed">
How do I pre-set the value of this radio button group with a URL parameter?
I have tried the following:
http://form.html?status=Expired
But this doesn't work. Is there any way to do this without JS or JQuery? You may think I can just set the value I want to be selected by default using the checked=true attribute in the HTML itself, but the problem is that the value I want to pre-populate is different depending on the user, so I need to set it in the URL parameter.
Came across this when looking for same answer and surprised no one answered it. Bit late but I figured this out and thought I'd put in answer here. Basically, I ran an pageload function and grabbed the parameters via URLSearchParams then selected the radio button via an ID. For example:
Add IDs to your radio buttons:
<input id="new" name="status" type="radio" value="New">
<input id="expired" name="status" type="radio" value="Expired">
<input id="renewed" name="status" type="radio" value="Renewed">
Then run the javascript below upon pageload (add if statements to handle different statuses):
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const status = urlParams.get('status');
if (status == "expired") {
document.getElementById("expired").checked = true;
}
I based this off the following answer but modified it for radio butons: https://stackoverflow.com/a/70267794/7901491
When i open the html file with the code snippet, mentioned below, in my browser i see a checkbox and a submit button.
<form >
<input type = "checkbox" name = "q">
<input type = "submit">
</form>
However, when I move the first line along with the form(as shown in the code snippet below) and then reload the file in my browser, I don't see the checkbox. I see only the submit button.
I infer that mentioning the first line along with form keyword means something different. Can someone explain what is the difference ?
<form input type = "checkbox" name = "q">
<input type = "submit">
</form>
PS: I am new to html and web development. This may be a noob question.
As per definition, the <form> tag is used to create an HTML form for user input. This form contains other elements such as <input>, <button>, <textarea>, etc. These elements cannot be clubbed into the form tag.
When you write :
<form input type = "checkbox" name = "q">
it creates an element form with attributes type="checkbox", name="q" and input="" and therefore it doesn't create the checkbox you wanted.
The correct format is :
<form>
<!-- form content -->
</form>
A form and an input are two different kinds of elements. You can't just merge them together, it makes no sense. If you want an input, you have to have an input element
For a bit of explanation, when you open a tag like so:
<form
everything you type within thhat tag before it is closed by a '>' is usually a property of that element. E.g.
<form prop1='a' prop2='b'>
blah blah
</form>
Such properties would things like classes or ids. An element can't be a property.
<input type = 'submit' value = '1'>
^---Instead of the input type displaying '1', I would like for it to display 'first page'. Is that possible?
With <input type="submit"> or <input type="button">, it's not possible to separate the value that's sent from the label on the button. If you want to do that, you need to use <button>.
<button type="submit" value="1">First Page</button>
Use of the button tag for this purpose is a new information for me and thanks for sharing that.
Depending on your requirement you can use a hidden filed to hold your value which gets submitted when the form is submitted.
if you want to use it with JS then you can use another attribute to hold the value such as "title" or a custom one, eg:cusval
If your intention is to see if the particular submit button was click at the server side then you can check if the variable is available in the post data.
PHP eg: if( isset($_POST['submitbtn']) )
Just value="First Page". value will display whatever you want. It may be string or int.
I am creating a html form with textboxes. I want default values to be shown in the textboxes when the page loads.
see code below:
<form action="" onsubmit="">
Zip Code: <input id="address" type="textbox" value="">
Zip Code:<input id="address" type="textbox" value="78728"/>
Radius:<input id="radius" type="textbox" value="#session.preferences.view_Radius_Map#"/>miles
<input type="button" value="Add Radius" onclick= "drawCircle()">
<input type="button" value="Undo" onclick=" Undo()">
<input type="button" value="Reset" onclick= "clearMap()">
</form>
for some reason when I try to remove the line that has no value for the Zip Code, the value for the second Zip Code textbox (which has a value set for the zip code) does not display. What is causing this and how can I correct this so that I have to textbox fields Zip Code and Radius in which the default values are displayed when the page loads?
It works fine for me when I remove the first zip code <input>: http://jsfiddle.net/LFYnH/
Try to give the second field a different id. You have two input fields with the same id="address".
Do like this:
Zip Code: <input id="address" type="textbox" value=""/>
Zip Code: <input id="address2" type="textbox" value="78728"/>
try giving them different id. Eg. "Address" and "Address2"
An id is intended for a single use. If you require it to be on more than one element you should use a class instead.
How are you removing the line without a value in it? With Javascript, JQuery?
Both of those lines shouldn't have the same ID. Make them like address1 and address2 or something.
You can then use JQuery or something to remove the first one (or just hide it), by doing like:
$('address1').hide();
You can also check if it doesn't have a value by looking at it's value through JQuery as well:
$('address1').val();
Some of your input tags are missing the closing '/'
Zip Code: <input id="address" type="textbox" value="">
That could be causing a problem.
Change the id in the first two input tags to classes so that they can be re-used and make sure all of your input tags(and other tags) are properly closed. The first input you have isn't properly closed.
using jQuery you can do something like this:
For each input text set a default value
<input type='text' data-default='your default text' />
Then you have to add two step in javascript. First load the default text into the field when the page loads and listen for focus event
jQuery(document).ready(function(){
jQuery(input)
.each(function(index, element){
jQuery(element).val(jQuery(element).data('default'));
})
.focus(function(evt){
var taget = evt.target;
if(jQuery(target).data('default') == jQuery(target).val()) jQuery(target).val("");
});
});
When the input get the focus it checks if the current text is the default text and in this case javascript empty the field otherwise your text is safe into the text box
Remember that ID are unique you can't have two elements with the same id "address"
Hope this helps
I have a form with a set of inputs, and I want my page to refresh when one of them changes. I have a second set of inputs on the OTHER side of the page, and the css layout doesn't make it convenient for me to put them in the same <form> </form> tag. I was wondering if there is a way that I can make sure those "inputs" that are located outside of the <form> tag are still associated with that form.
Is there some way we can assign a "form id" to the inputs?
In HTML5, you can use the form attribute:
A form-associated element is, by default, associated with its ancestor form element, but may have a form attribute specified to override this.
If a form-associated element has a form attribute specified, then that attribute's value must be the ID of a form element in the element's owner Document.
Example:
<form id="myform">
<input id="something" type="text">
</form>
<button form="myform" type="submit">Submit that form over there</button>
You should however make sure that it is clear to the user that these visually separated form elements are in fact connected.
<input type="text" form="myform" /> worked for me.
Update
This worked great with FireFox, however gave me trouble in IE 11 as the form attribute is not recognized with IE (as of writing this).
I had to just set a hidden input field inside the form, and transferred value to hidden input field from input outside form; with onclick using jQuery.
<input class="checkbox" id="staff_recruiting" name="company_type"
value="staff_recruiting" type="checkbox">
<input type="hidden" value="all" name="keyword" id="search-keyword-input">
$('#search-keyword').keyup(function() {
$('#search-keyword-input').val($(this).val());
});
Your problem will be solved bro:
Add a hidden input field in your form.
Using jQuery or JS to change that hidden input field value with that outside input box.
Your page will refresh and your outside box value will be grabbed.