My question is:
May I put submit button not in the end of form, I need to put submit somewhere in the middle of form for comfort design layout.
For example:
<form name="wide-search" action="/wide-search/" method="get" class="form-wide-search">
<select class="form-control cars">
<option>1</option>
<option>2</option>
</select>
<input type="text" class="form-control" placeholder="Поиск по всем объявлениям доски">
<select class="form-control region-search">
<option>1</option>
<option>2</option>
</select>
//HERE IS FORM SUBMIT BUTTON
<div class="input-group">
<input class="form-control" id="searchInput" type="text" name="q" placeholder="Искать среди всех товаров и услуг" value="" x-webkit-speech="">
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">Найти</button>
</div>
</div>
//AND THEN WE HAVE SOME SELECT'S WITH PARAMETRES, THAT ALSO CONNECTED TO THIS FORM BUT THEIR
PLACE IS AFTER SUBMIT BUTTON
<select class="form-control mark">
<option>1</option>
<option>2</option>
</select>
<select class="form-control model">
<option>1</option>
<option>2</option>
</select>
<select class="form-control year">
<option>1</option>
<option>2</option>
</select>
</form>
I need to create Html and Css design layout for this form, I get this task from programmer, and I'm not shur will this work true, or it is wrong layout. I didn't find answer in internet for this question. So I believe someone can explain me. In the end I add image of this form.
You can put the submit button anywhere inside the form. Also with the HTML5 form attribute you don't even have to put it inside the form, e.g.
<form id="form-id">
...
</form>
<button type="submit" form="form-id">Submit from outside</button>
The location for where you place elements inside a form does not matter. A quick example would be:
Submit Button On Top of Input
Also, a submit button can be located outside the form with the the form attribute and the form's id.
Submit Outside Form
Related
I have 3 radio buttons in a form which have to checked by robotframework. Below is part of the html code:
<div>
<div>
<label for="doc-22-Confirm">
Confirm
<input id="doc-22-Confirm" class="radiocheckbox" type="radio" checked="checked" value="Confirm" name="data[doc-22]"/>
</label>
<label for="doc-22-Reject">
Reject
<input id="doc-22-Reject" class="radiocheckbox" type="radio" value="Reject" name="data[doc-22]"/>
</label>
</div>
<div>
<label for="doc-23-Confirm">
Confirm
<input id="doc-23-Confirm" class="radiocheckbox" type="radio" checked="checked" value="Confirm" name="data[doc-22]"/>
</label>
<label for="doc-23-Reject">
Reject
<input id="doc-23-Reject" class="radiocheckbox" type="radio" value="Reject" name="data[doc-22]"/>
</label>
</div>
</div>
Ids are dynamic. So I'm trying to check all radios with this code but it just select one of them:
click element xpath=//input[contains(#id,'Confirm')]
I even tried this:
click element xpath=//input[contains(#id,'Confirm')][1]
click element xpath=//input[contains(#id,'Confirm')][2]
click element xpath=//input[contains(#id,'Confirm')][3]
But still it doesn't work.
Try the following:
Click element xpath=(//input[contains(#id,'Confirm')])[1]
I added the '( )' , it should solve the issue.
Hello I've created a custom form in WP's Newsletter plugin and showed it on a pop-up plugin. the form shows but it seems I am unable to register for subscription. The modal closes upon submission so I cant know anything after submit. There's nothing listed on the subscribers list.
here's my custom newsletter form:
<div>
<input class="subscribe email" type="email" name="ne" size="30" required placeholder="Email">
</div>
<div>
<input class="subscribe name" type="text" name="nn" size="30" required placeholder="Full Name">
</div>
<div>
<select class="subscribe guardian" name="np1" placeholder="Guardian">
<option value="parent/guardian">Parent/Guardian</option>
<option value="corporate visitor">Corporate Visitor</option>
<option value="teacher">Teacher</option>
</select>
</div>
<div>
<input class="subscribe submit pop-up-btn" type="submit" value="KEEP ME IN THE LOOP!"/>
</div>
And I've called the shortcode:
<div class="popup-form">[newsletter_form form="1"]</div>
I have a select box that is showing up as a multi-select box when I want it to be a drop down. I cannot figure out how to change it.
<form:select path="roles" id="role" cssClass="form-control">
<form:options items="${roles}" itemLabel="description" itemValue="id"/></form:select>
The html that is produced as a result of this (see below) has the multiple box attribute added.
<select id="role" name="roles" class="form-control" multiple="multiple">
<option value="1">Administrator</option>
</select>
<input type="hidden" name="_roles" value="1"/>
It also produces that hidden input and I don't understand why.
Any help would be appreciated.
I'm updating website and gradually changing all bits over to jquerymobile to make it more phone friendly.
I had a page where a user can select either a specific month or a date range. I toggled between them using some javascript. However, since changing things the display:block etc doesn't seem to work properly. It displays them out of position. The input fields are now displayed above the selector when you toggle between them. Please see http://jsfiddle.net/pfLme/1/
Obviously I would like to get them into the correct position.
(The next task will be to try and get Datepicker working - if anyone fancies pointing me in the right direction for that)
Thank you.
(code is all on jsfiddle, but stackoverflow tells me i need to include it here too)
function showType(allornone) {
if (allornone == '1month')
{
document.getElementById('btwdateselector').style.display = 'none';
document.getElementById('monthselector').style.display = 'block';
document.getElementById('datestart').value = '';
document.getElementById('dateend').value = '';
}
if (allornone == '2dates')
{
document.getElementById('btwdateselector').style.display = 'block';
document.getElementById('monthselector').style.display = 'none';
}
} //end function
...I realise now of course that I have to get used to thinking about & taking advantage of the jquery side of jquery mobile too.
So far I came up with
$(document).on('click', '#certainmonth', function(a) {
$('#monthselector').hide();});
$(document).on('click', '#btwdates', function(a) {
$('#btwdateselector').show();});
I'm not sure yet how to include the if statement and toggle between the show and hide.
The error was only occurring in Firefox 27.0.1
Solution was to change <fieldset data-type="controlgroup"> to <div data-type="controlgroup"> around the radioboxes. Thanks to Omar for the help.
http://jsfiddle.net/pfLme/11/
<form action="page.php" name="mileageform" class="responsive_block" data-ajax="false">
<div data-role="controlgroup">
<legend>Should be at TOP</legend>
<input type="radio" name="searchtype" value="certainmonth" id="certainmonth" checked="checked" />
<label for="certainmonth">Mileage for certain month</label>
<input type="radio" name="searchtype" value="btwdates" id="btwdates" />
<label for="btwdates">Mileage between two dates</label>
</div>
<fieldset id="monthselector" data-role="controlgroup" data-type="horizontal">
<select name="month" data-native-menu="false">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="year" data-native-menu="false">
<option value="2000">2000</option>
<option value="2001">2001</option>
</select>
</fieldset>
<fieldset id="btwdateselector" class="ui-screen-hidden">
<div class="ui-field-contain">
<label for="datestart">Start Date:</label>
<input type="date" id="datestart" name="datestart" placeholder="dd/mm/yyyy" />
</div>
<div class="ui-field-contain">
<label for="dateend">End Date:</label>
<input type="date" id="dateend" name="dateend" placeholder="dd/mm/yyyy" />
</div>
</fieldset>
<input type="submit" onclick="return checkForm();" value="Display Mileage" />
</form>
$(document).on('change', '#certainmonth, #btwdates', function (a) {
$('#monthselector').toggleClass("ui-screen-hidden");
$('#btwdateselector').toggleClass("ui-screen-hidden");
});
I ran into a strange problem with checkbox groups. I am trying to get the values from a group of checkboxes, but I have to hit the submit button twice for it to get the values... I have no idea why. I also use a dropdown box on the same form and I only need to hit the button once to get its value.
my asp code to write it to page
Dim selectFormValue
selectFormValue = Replace(Request.Form("selectTest"), """", "")
Response.write Request.Form("checkGroup")
here is the html being generated
<form method="post" name="formTest">
<select name="selectTest">
<option value='123"' selected="">Option 1</option>
<option value='124"' selected="">Option 2</option>
<option value='125"' selected="">Option 3</option>
</select>
<input type="checkbox" name="checkGroup" value="1" CHECKED />
<input type="checkbox" name="checkGroup" value="2" CHECKED />
<input type="checkbox" name="checkGroup" value="3" CHECKED />
<input type="checkbox" name="checkGroup" value="4" CHECKED />
<input type="submit" name="submit" value="Update" />
</form>
Thanks!
One thing i note is, that you don't specify an action in your form.