Is "name" attribute mandatory in <input>, <textarea> and <button> elements? Or maybe we can use id or class instead?
If these tags are inside a form tag and you are subbmitting that
form to a server, then name is required,
If you are just using them for client-side purposes and don't want to send them to server, then it is optional.
Name is not a required attribute. A small quote from the HTML spec:
The name content attribute gives the name of the form control, as used
in form submission and in the form element's elements object. If the
attribute is specified, its value must not be the empty string.
Notice the "if" in the quote, indicating that it is not required, from a standards perspective.
However, if the input is used with the browsers standard form submission, you won't be able to retrieve the value of the input on the server-side, if you don't have a name to refer to.
If you only need to retrieve the value on the client using JavaScript, then you can use an id, a class, or any other means to select the given input - in that case you can leave the name out if desired.
name is what gets sent to php scripts for processing so for example $_POST['Telephone'] when used as <input name="Telephone" type="text">. Not required unless being used for processing really.
No its not, but generally you would want it.
Try this
<?php
foreach($_GET AS $key=>$val)
{
echo "name '$key' has value '$val'<br>";
}
?>
<form>
<input type="text" name="abc">
<input type="text" id="a">
<input type="text" class="b">
<input type="text">
<input type="submit">
</form>
Related
I have to send text field value using href to php is something like below. But it is not correct way. Can anyone please give me any solution?
<input type="text" id="myText" value="Mickey">
<a href="test.php?id=javascript:document.getElementById('myText').value;">
<input type="button" value="Click"></a>
Put content inside a form. You can also change the button type input to a submit type, this way the form is sent automatically on click.
<form method="POST" action="yourURL.php">
<input type="text" id="myText" name="myElement" value="Mickey">
<a href="test.php?id=javascript:document.getElementById('myText').value;">
<input type="submit" value="Click"></a>
</form>
More information on forms: MDN
Whether you use GET or POST as a method, you'll be able to access the content of the form through PHP variables: $_GET, $_POST or the generic $_REQUEST.
More information in the PHP documentation
Note: PHP uses the name attribute of your HTML elements for those variables. Make sure to add this attribute to your HTML elements otherwise you'll have a hard time getting a value from $_REQUEST['myText']. I added the attribute holding the value "myElement" in the above code. It is accessible through PHP by typing $_REQUEST['myElement'].
Content sent through GET method is visible in the URL,
like this: www.example.com/test.php?var1=test&var2=test
<input type="text" id="myText" value="Mickey">
test
Simply, how can I do this?
<input type="hidden" value="some javascript value" />
I have a form whereby when a user clicks on Add More, more input fields are added via javascript.
I'm also using javascript-declared values to track and limit the number of fields a user can add.
I need a way for my php code to retrieve these javascript values.
Use append
$('#hidden').val('my Text');
input field should be
<input type="hidden" id="hidden"/>
the question is a bit vague, but i will give it a go
try adding a name as an array and then you can use get or post
<input name="myjavascriptinputs[]" type="hidden" value="some javascript value" />
in your php you will be able to use
foreach($_GET['myjavascriptinputs'] as $ajavascriptinput)
From the button you must be calling a javascript to add these fields dynamically. Simply append the code to that function to hand over these values to the field.
<input id="myinputfield[]" type="hidden" value="" />
<script>
function addOneMore(){
var newField = // code to add one more field
newField.value = newValue;
}
</script>
Will solve your purpose.
I am reworking on a code of an old developer and I'm trying to do a form for reservation.
I've looked across the whole code the only thing called reservation is the name and the id of the form.
Form who's is in style : display:none ...
So two question in one : First of all what the heck is supposed to do
document.reservation.submit(); Is it suppose to get the form by his name ?
Shouldn't it be something like document.getElementById('reservation').submit() instead ?
And my second question is : How the form can be sent if all the value are set to display:none I tough it couldn't work and if you want to hide them you shall use hidden property...
I need a bit of help on this guys pls :)
Form for beter comprehension :
<form name='reservation' action='http://xxxx/reservationFormAction.to' method="POST" id="reservation">
<input type="hidden" id="productLive" name="product" value="{$product.info.code}"/>
<input type="hidden" name="complementaryParameters" value=""/>
<input type="text" name="depCityCode" id="depCityCode" style="display:none" />
<input type="text" name="dateDep" id="dateDep" style="display:none" />
<input type="text" name="nightDuration" id="nightDuration" style="display:none" />
<input type="text" name="dayDuration" id="dayDuration" style="display:none" />
<input type="text" name="provider" value="{$product.tourOperator.code}" style="display:none" />
<input type="text" id="toProduct" name="toCode" value="{$product.info.toProductCode}" style="display:none" />
<input type="text" name="catalogCode" value="{$product.info.code}" style="display:none" />
{if $ecall}
<input type="text" name="reservationProfileChannelCode" value="ECALL" style="display:none" />
{else}
<input type="text" name="reservationProfileChannelCode" value="ADV" style="display:none" />
{/if}
<input type="text" name="nbAdults" id="nbAdults" style="display:none" />
<input type="text" name="nbChildren" id="nbChildren" style="display:none" />
<input type="text" name="nbBabies" id="nbBabies" style="display:none" />
<input type="text" name="productUrl" id="productUrl" style="display:none" value="http://www.xxxx.com/{$product.slug}_{$product.info.code}.html" />
<input type="text" name="homeUrl" id="homeUrl" style="display:none" value="http://www.xxxx.com" />
<span id="ageChild" style="display:none"></span>
<div class="update-search clearfix">
document.reservation gets the HTMLFormElement for the form with the name reservation. Then calling submit submits the form (without triggering the submit event).
So why not document.getElementById? That would also work, but document.reservation works because the document object gets various properties created on it automagically, including properties referring to forms by their name. This is covered in ยง3.1.3 of the HTML5 spec *(you have to scroll down a fair bit):
The Document interface supports named properties. The supported property names at any moment consist of the values of the name content attributes of all the applet, exposed embed, form, iframe, img, and exposed object elements in the Document that have non-empty name content attributes, and the values of the id content attributes of all the applet and exposed object elements in the Document that have non-empty id content attributes, and the values of the id content attributes of all the img elements in the Document that have both non-empty name content attributes and non-empty id content attributes.
The value of those properties is the element the name or id came from.
The window object also gets properties for every element with an id, as described here:
The supported property names at any moment consist of the following, in tree order, ignoring later duplicates:
the browsing context name of any child browsing context of the active document whose name is not the empty string,
the value of the name content attribute for all a, applet, area, embed, form, frameset, img, and object elements in the active document that have a non-empty name content attribute, and
the value of the id content attribute of any HTML element in the active document with a non-empty id content attribute.
Where again the value of those properties is the element the name or id came from.
In both cases, this is the HTML5 specification standardizing the previously-widespread-but-nonstandard practice most browsers had, which is widely used on pages in the wild.
How the form can be sent if all the value are set to display:none I tough it couldn't work and if you want to hide them you shall use hidden property...
It's best to ask one question per question.
The CSS display property has no effect at all on whether form fields are submitted; you're probably thinking of the field's disabled state: Disabled form fields are indeed left out of the form on submission.
the display none or hidden info will always be sent even that you can't see.... Usually we pass some info that the user doesn't need to know, like USER_ID=20 .....---- and the
document.reservation.submit
------- it submits the form with name="reservation"
HTML has 13 form elements and the input element has 23 different types. My question is what is the reasoning behind making a form element a type of input or its own element?
At first I thought maybe its because all input types are just variants on input type=text, but that doesn't make sense when you throw checkbox and radio into the mix. Perhaps they would be better as their own form elements?
<input type="checkbox" name="check" value="yes">
// Would become
<checkbox name="check" value="yes">
Another form element that doesn't make sense to me is textarea for two reasons.
According to How to change the Content of a with Javascript you can use element.value to both set and retrieve a textarea's contents. Yet textarea doesn't have the value attribute, at least its not shown in the DOM.
The way textareas behave when resetting a form is inconsistent with other form elements. All input elements will be reset to the value of their value attribute. But a textarea is reset to whatever its 'value' (quotes because it doesn't have a value attribute in the DOM) was set as when the page loaded.
Example 1 (consistent with input): If you click the reset button, both input and 'textarea' will be reset to their 'initial' values (Example use jQuery). JSFiddle
<form>
<input type="text" name="text" value="initial" />
<textarea>initial</textarea>
<button type="reset">Reset</button>
</form>
<script>
$('input, textarea').val('set by javascript');
</script>
Example 2 (inconsistent with input): You cannot use .attr('value') with textarea elements, which means the following example doesn't work. You have to use $('textarea').text() or $('textarea').html() in order to set the default value.
<form>
<input type="text" name="text" value="initial" />
<textarea>initial</textarea>
<button type="reset">Reset</button>
</form>
<script>
$('input, textarea').attr('value', 'set by javascript');
</script>
There are other things that don't make sense to me but I will only highlight these two in my question. I'm hoping someone can explain to me why HTML and Javascript treat form elements differently (specifically when its comes to getting, setting, and resetting their values), and why certain form elements have their own elements and why others are just types of the input element.
I have a form that works flawlessly until I add the required attribute to the input tag. Then the form doesn't post. I'm not sure where in the form the required attribute is breaking the $_POST function but once broken all required attributes have to be removed. Has anyone experienced this behavior?
The ONLY thing that comes to mind is I have about 17 <div> with display:none set. Using Javascript, when a selection is made from a drop-down <select> tag the JavaScript changes the display to display:block as each <div> has unique set of <input> and <select> tags based on the building type selected. All of this is inside the <form> </form> tags.
There's nothing special about the <input> tags. Only when I add the required attribute to the <input> tags inside a <div> does it have a problem.
A typical <input> tag looks like this:
<input name="total_meters" type="number" id="total_meters" tabindex="20" size="40" min="1" max="99999999999" value="2" />
The required attribute is going between <input and name.
I'm asking here before I code my own validation routines.
Use jQuery function to add attribute "required" to the require input tag or
Make multiple form tag and multiple summit button for each div tag and adding attribute "required" into input tag.