I would like to pass a value to an input area on another page by clicking on a specific link.
For example, if a user clicks on a Inquire Now button/link:
<a href="/contact.html">Inquire Now<a>
it will take them to the Contact page and the subject input of the form will automatically fill to "Inquiry about Service".
<input type="text" name="subject" value="Inquiry about Service" required />
Is there a way to do this with HTML?
Related
As you know, the <input type="text" name = "input_field"> element creates a space for the user to type in an HTML form. But in this case, I know what the user is going to enter.
For instance, the user wants to send 'hello' to the action page. It isn't a particular piece of information like his/her name, email id, etc. It will be the same for everyone. Then why not just create a button like this:
<input type="submit" value="click to send 'hello'">
When the user will click on the button, 'hello' will be sent to the action page specified in the action attribute of the <form> element.
How do I do it? Also, I need to mention that I am not much experienced in HTML or JS, so I would appreciate a beginner-like solution.
I apologize if this question already exists somewhere.
Thanks in advance!
You can include predefined information when submitting a form by using a type="hidden" field:
<input type="hidden" name="input_field" value="hello">
That doesn't appear visibly on the page, but is submitted just like any other field when you submit the form.
As far as I understand your problem, you want to create a form where few fields will have predefined information
I would suggest not to hide the input according to the UI/UX perspective but instead, you can show those fields as read-only.
In this way, the user will have an idea of predefined values
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="number" disabled readonly id="custId" name="custId" value="3487">
<input type="submit" value="Submit">
</form>
In Wordpress I have a 'single' template for a certain post type. One of the metas displayed on the page is an address which is displayed in a span.
Additionally I have a FacetWP template which returns other posts. There is a single 'facet' for location.
I need to take the address from the span and enter it into the input and effectively hit 'return' on the input. This will trigger a refresh of the results which will now be sorted according to their proximity to the address entered in the location input.
So the markup abstract is in effect this..
<span>1 main street, london, uk</span>
<input type="text" class="facetwp-location" value="" placeholder="Enter location" autocomplete="off" id="facetwp-location">
Does anyone know how I might achieve this?
UPDATE:
This is the FULL markup associated with the input. Ordinarilya user would begin typing in the area and a google list of addresses would appear. The user would select one and the facets would be triggered upon making that selection. Alternatively an address could be fully entered manually and the user may hit enter.
<div class="facetwp-facet facetwp-facet-location facetwp-type-proximity" data-name="location" data-type="proximity"> <span class="location-wrap"><i class="locate-me"></i><input type="text" class="facetwp-location" value="" placeholder="Enter location" autocomplete="off" id="facetwp-location"><div class="location-results facetwp-hidden"></div></span>
<input class="facetwp-radius facetwp-hidden" value="250" id="facetwp-radius">
<input type="hidden" class="facetwp-lat" value="">
<input type="hidden" class="facetwp-lng" value="">
</div>
Screenshot of page's markup;
My project has a form with an input field and a button.
<input id="inputID" form="IDForm" type="text" autocomplete="off" data-ng-model="User.getInfo().ID" placeholder="Enter ID">
<button form="IDForm" type="submit" class="forward-button" ng-if="User.getID()" data-ng-click="sendID()">
Verify ID
</button>
Currently the ng-if makes the button not appear until the user enters an ID. When they enter an ID and click Verify ID, they are taken to the next page. However, if they press back from that page then the input field is automatically filled with the ID they previously entered because of the two way ng-model binding. Is there a way to prevent the input field from automatically filling in that bound attribute when the page loads?
When the button is enabled, set the current form to pristine state, $scope.form.$setPristine(); which will ensure even when you press back, the form values will not populated and would be in the initial state.
I have a form which includes a dropdown. A user can either select an option from that dropdown which in turn fills the form field in question, or the user can type their choice manually into the form field.
I want to make sure my dropdown resets upon the user typing in the form field. I'm thinking about some sort of click handler, but know ng-click is not appropriate here.
<form class="form-inline" name="tagForm">
<div class="form-group">
<isteven-multi-select
input-model="header.tagNames"
output-model="tagsOutput"
button-label="name"
item-label="name"
tick-property="ticked"
selection-mode="single"
on-item-click="header.selectTag(data)">
</isteven-multi-select>
</div>
<div class="form-group">
<input class="form-control" type="text" id="tag" placeholder="Tag" ng-model="header.newTag.tag" ng-required="true">
</div>
So for example, a user selects 'passed' from the dropdown, then rethinks their decision and clicks in the form field to delete 'passed' and type in 'failing'. As soon as the user begins typing (or clicks delete, really any keystroke) the dropdown should reset so no field is selected. How would I call a method from within the form field whenever a keystroke occurs in this field?
How can I add the linked from page #nodename as a text input value on my form?
The input will disabled, so that the user cannot change the text.
<input type="text" name="jobtitle" id="jobtitle" value="Job Title to be Prefilled here by linked from page #nodeName - Disabled field" disabled="disabled" />
I assume this is razor? Try #Model.Name instead.