Using Karate I am not able to clear field (input, textarea) properly:
<input name="title" id="title" class="form-control" placeholder="e.g. My MacBook Key" value="">
1) insert to input field with id=title is OK.
retry().input('#title', 'something')
Everything is written to field. OK.
2) I need to clear the field. I use following:
retry().clear('#title')
Field seems to be deleted after this action (text in input field is not visible).
3) But when I use input again
retry().input('#title', 'new')
In field is displayed: somethingnew. It seems that first string was not properly deleted and strings are merged together.
It happens for input/text area fields.
Could you help me please? Any idea?
Thank you.
Try using value() or JS directly instead of clear():
* value('#title', '')
Or:
* script('#title', "_.value = ''")
First we need to focus on the web element
focus(webElement)
Then clear the input field/text area on the browser, use clear()
clear(webElement)
To clear the value from DOM, we are using Key.CLEAR
input(webElement, Key.CLEAR)
Finally insert your value/custom value into the input field as below
input(webElement, "Insert your value")
Related
I have an html form and i would like ALWAYS to have checkboxes to submit a value. How can i do that? I have one idea but i havent tried it and i am unsure if its the best way to do it (jquery to check if the box is checked or not, then set the value to 0/1 and check it off so it will submit)
Thanks to #Lazarus' idea, also mentioned by #BalusC, you can add an additional control to the form:
<input type="hidden" name="checkbox1" value="off">
<input type="checkbox" name="checkbox1" value="on"> My checkbox
Checkbox and the hidden fields must have the same name. The hidden input is always submitted as a default value. If the checkbox is checked then also it's submitted. So you have a list of 2 values for parameter "checkbox1", that you have to treat at server side.
...maybe a <select> tag would be more handy.
There is a legitimate reason for asking for something like this, although the behaviour envisioned here is not the right way to go about it. There is a problem with the checkbox when used correctly when editing existing data and that's that there is no way to determine whether no value was submitted because the field was not present on the form or because the user cleared all of the values. You can run into this sort of problem any time you include fields conditionally.
One could go to the trouble of maintaining a "view state", of course, but it's much easier to include a hidden "companion field" whenever a checkbox or select with the multiple option (which is also excluded when all selections are cleared) is displayed. The field should have a related but different name (a name from which the actual field name can be extracted). The Lotus Domino server has used fields named %%Surrogate_FieldNameHere for this purpose since (I believe) version 7 for exactly the reason I described here.
To tell you the truth, this feels like a big no-no.
Anyway here goes:
<script type="text/javascript">
$(document).ready(function () {
$('form').submit(function() {
$(this).find('input[type=checkbox]').each(function () {
$(this).attr('value', $(this).is(':checked') ? '1' : '0');
$(this).attr('checked', true);
});
});
});
</script>
HTML doesn't work that way. HTML checkboxes are specified as follows: if checked, then its name=value will be sent as request parameter. If unchecked, then its name=value will not be sent as request parameter. Note that when the value is unspecified, then most browsers default to "on". It's easier if you give all checkboxes the same name but a different and fixed value. This way you can obtain the checked ones as an array/collection.
If all checkboxes are already known beforehand in server side, you can just apply basic math to obtain the unchecked checkboxes:
uncheckedCheckboxes = allCheckboxes - checkedCheckboxes
If those checkboxes are created dynamically at the client side and therefore unknown beforehand in server side, then add for each checkbox a <input type="hidden"> field containing information about the dynamically created checkbox, so that the server side knows which checkboxes are all present as the moment of submission.
Although this goes against the HTML spec, if you know what you are doing, using this you no longer have to cater checkboxes which are handled completely differently when submitted - and for example naming fields with_brackets[] can actually be useable.
Complete solution
$(document).on('submit', 'form', function() {
$(this).find('input[type=checkbox]').each(function() {
var checkbox = $(this);
// add a hidden field with the same name before the checkbox with value = 0
if ( !checkbox.prop('checked') ) {
checkbox.clone()
.prop('type', 'hidden')
.val(0)
.insertBefore(checkbox);
}
});
});
Take note: the non-checked checkboxes now submit a value of "0"
Additionally, if you want to change the behaviour of a single form only, just alter the first line in the above snippet:
$(document).on('submit', 'form.your-class-name', function() {
// ...
});
if you have many checkbox, you can try this code:
<input type="checkbox" onclick="$(this).next().val(this.checked?1:0)"/> <input type="hidden" name="checkbox1[]"/>
If you have the following HTML:
<form id="myform" method="post" action="my/url">
<input type="checkbox" id="checkbox1" name="checkbox1"/>
<input type="checkbox" id="checkbox2" name="checkbox2"/>
<input type="checkbox" id="checkbox3" name="checkbox3"/>
</form>
Normal form submit:
On form submit, before submitting, change all values of checkboxes to 0 and 1 based on if checkbox is unchecked or checked. Like so:
$('#myform').submit(function() {
var $checkboxes = $('#myform').find('input[type="checkbox"]');// Select all checkboxes
$checkboxes.filter(':checked').val(1);// Set value to 1 for checked checkboxes
$checkboxes.not(':checked').val(0);// Set value to 0 for unchecked checkboxes
$checkboxes.prop('checked', true);// Change all checkboxes to "checked" so all of them are submitted to server
});
Note: Ugly thing about this code, while form is submitting, all checkboxes will appear as "checked" for a moment. But if you apply same concept for ajax form submit, it would be better.
AJAX form submit:
$.post('my/url', {
'checkbox1': $('#checkbox1').is(':checked') ? 1 : 0,
'checkbox2': $('#checkbox2').is(':checked') ? 1 : 0,
'checkbox3': $('#checkbox3').is(':checked') ? 1 : 0
}, function(response) {
// Server JSON response..
}, 'json');
I have a weird problem in my MVC app.
When the user selects a date from a drop down, it clears the StartDate and EndDate fields.
I have the following fragment of code:
<label>Start date: #Model.StartDate</label>
#Html.TextBoxFor(s => s.StartDate)
The weird thing is that you can wee where I'm outputting it in the label, the date comes out there. The textbox is unpopulated.
I've checked the produced markup and the textbox is not being populated.
<label>Start date: 19/05/2013</label>
<input id="StartDate" name="StartDate" type="text" value="" /> <br />
What am I missing here?
To add a little bit more information, when the page is initially populated the default start and end date are output. There is a bit of jQuery that empties those fields when a <select> is changed. If I comment that bit out then the fields retain their previous values as opposed to blank. Essentially, whatever is submitted to the server is output rather than the value in the model.
Essentially, whatever is submitted to the server is output rather than the value in the model.
This behaviour is actually by design. The idea being that generally the user would expect to see in the text box what they submitted to the server.
See here for a detailed explanation, and a work around.
Instead of doing this
<label>Start date: #Model.StartDate</label>
#Html.TextBoxFor(s => s.StartDate)
You should do this
<label id="someId"></label>
#Html.TextBoxFor(s => s.StartDate,new{#id="startdate"})
and using jquery on change event on your textbox you can set lablel
$("#startdate").change(function(){
var date="Start Date:"+$(this).val();
$("#someid").html(date);
});
Thinks that your model is a class named What like this:
public class What
{
public string StartDate { get; set; }
}
Then, think that your application is "MyApplication", you need to add to the view as if the view is stronglytyped:
#using MyApplication.Models;
#inherits System.Web.Mvc.WebViewPage<What>
Then all should we run as you expect
I have three drop down menus that are chained together. Year, Make Model. I need wordpress search results to show their matching results. If I give them all the name="s" then it only searches the final s= in the url.
I basically need to know how to make
mysite.com/?s=2001&s=Chevrolet&s=Express&Search=Search
turn into:
mysite.com/?s=2001+Chevrolet+Express&Search=Search
or whatever gets the job done.
Any suggestions?
I would not name the selects. Instead, give them ids and make a hidden form field, then use javascript to update the hidden field.
function updateHiddenField(){
var year = document.getElementById("YearDD").value; //this is conceptual
var make = document.getElementById("MakeDD").value; //this is conceptual
var model = document.getElementById("ModelDD").value; //this is conceptual
document.getElementById("s").value = year+"+"+make+"+"+model; //this is conceptual
}
Then later...
<input type="hidden" name="s" id="s" value="">
<select id="YearDD" onChange="updateHiddenField();">
...
Otherwise you could overwrite the "Submit" Button, generate your own query string/url and redirect the page.
Or, in a real dirty way, you could just search the string and convert "&s=" with "+".
I have search button on page. user input som data and click search button.
how can search with query string (like google search).
is it correct:
void search_click(...)
{
string item1 = text1.text;
string item2 = text2.text;
Responce.Redirect(currentPage.html?x=item1&y=item2);
}
or has better solution.(c#)
You need to use GET method on your search form.
Probably the easiest way would be not using ASP.NET controls and using plain HTML components instead:
<form method="get" target="search.aspx">
Search: <input type="text" name="q" value="Search"><br>
<input type="submit">
</form>
Then, when the user clicks on Search button, the user will be taken to a place with a URL like:
http://YOUR_SERVER/YOUR_APP/search.aspx?q=hello
Check out the answer to the same question here: How to build a query string for a URL in C#?
You can build a NameValueCollection and output it as the proper format. The top answer has a great example.
Your code has some errors. Use the following:
Responce.Redirect("currentPage.html?x=" + item1 + "&y=" + item2);
CheckBox newBox = new CheckBox();
newBox.Text = dtCommon[i].userName;
newBox.CssClass = "cbox";
newBox.Attributes["value"] = dtCommon[i].id.ToString();
ApprovalSelectPanel.Controls.Add(newBox);
Renders as:
<input id="ctl00_mainContent_ctl00" type="checkbox" name="ctl00$mainContent$ctl00" checked="checked" />
How can I get a value attribute on? My JQuery needs to access this!
I bet you it is setting the attribute, but on the containing span (look up one element).
You want to use the InputAttributes property instead:
newBox.InputAttributes["value"] = dtCommon[i].id.ToString();
newBox.Attributes.Add("yourAttributeName", "yourAttributeValue");
EDIT: Sorry I forgot checkboxes act a little diff so you need to do:
newBox.InputAttributes.Add("yourAttributeName", "yourAttributeValue");
If you want to access the span around the checkbox control the original would work or you could do:
newBox.LabelAttributes.Add("yourAttributeName", "yourAttributeValue");
Can you try newBox.Attributes.Add("Value", dtCommon[i].id.ToString());
If you need to store a value on the checkbox, I recommend using something besides value, such as "MyValue". You can still get this "MyValue" using the .Attributes method later in your processing. In jquery, you could use the .attr('MyValue') to obtain the value.