I'm playing around with htmx and hyperscript, and I want all input fields in the form below to be cleared on submit:
<form hx-post="/example" hx-target="#table tbody" hx-swap="beforeend"
_="<what should I write here??>">
<label class="control-label" for="firstNameInput">First Name</label>
<input id="firstNameInput" name="firstName" class="form-control" type="text" required placeholder="John"/>
<label class="control-label" for="lastNameInput">Last Name</label>
<input id="lastNameInput" name="lastName" class="form-control" type="text" required placeholder="Doe"/>
<button class="btn btn-primary">Add User</button>
</div>
</form>
I've tried replacing <what should I write here??> with e.g. on submit put '' into <input/> and on submit put '' into <input[value]/> and lots of other combinations but I fail to get this work.
Q: How can I clear all input fields when the form is submitted?
Try with on htmx:afterRequest reset() me
Related
<input
#valueRef
tabindex="1"
type="number"
step="1"
name="value"
id="value"
placeholder="Enter value"
class="form-control"
formControlName="value"
[ngClass]="{ 'is-invalid': submitted && adjForm.controls['value'].errors && !this.data.isAdjAccount }"
/>
I set input step as 1, but it still supports to input decimal, what I want to show is: when you open this from, and enter value in this input box, it forbids user to enter decimals, only integer is valid.
Try this
<input type="text" class="form-control" placeholder="Enter value" id="txtvalueRef" name="valueRef" #valueRef="ngModel" pattern="[0-9]*">
<div [hidden]="valueRef.valid || valueRef.pristine" class="alert alert-danger">
<div [hidden]="!valueRef.hasError('pattern')">Items should be only numbers</div>
</div>
Until now I gave been using Avoriaz, but I would like to use Jest now ...
found some tuts... but could not get any hint on testing my contact view component sending POST to an external urk...
<form id="contactForm" action="https://formspree.io/mysite.com" method="POST">
<div class="form-group">
<input type="hidden" name="_next" v-model="next" />
<input type="hidden" name="_language" v-model="language" />
<input type="hidden" name="_subject" value="Contact from my site" />
<input v-model="sendername" ...>
<input v-model="email" ...>
</div>
<div class="form-group">
<div class="uk-margin">
<textarea v-model="message" ...></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary btn-gradient submit">Send</button>
</form>
As the external post URL is only valid for production... I would like mock it and use the _next property as a callback page url...
any useful links to put me on first tracks ?? thanks a lot for feedback
You should prevent submit and post data using axios for example and then mock axios.
<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
It's an easier way to unit-test that.
I tried to find the x-path of a text field username and password, but it keeps on changing dynamically.I won't be able to use starts-with or contains in a findelement using x-path. Here's the HTML DOM-
<div id="contents">
<h1 style="white-space:pre; width:80px; float:left;line-height:35px;">Login</h1>
<span style="float:left; padding-top:13px; COLOR:#990033; font-weight:bold;"> Student | Parent | Faculty</span>
<div class="form-elements">
<div class="form-elements">
<div class="form-elements">
<div class="label-txt">Password</div>
<input id="rcnr2uew1m0rkikeaaniwk" type="password" style="display:none;" name="rcnr2uew1m0rkikeaaniwk"/>
<input id="ko2xs123ebqyoluh15bulu" type="password" style="display:none;" name="ko2xs123ebqyoluh15bulu"/>
<input id="cuouek4bfz41etm4hroj0r" type="password" style="display:none;" name="cuouek4bfz41etm4hroj0r"/>
<input id="u2ta3gv2o2ce0azx5plpuh" type="password" name="u2ta3gv2o2ce0azx5plpuh"/>
<input id="g03nwjuzhqnkuwgsl4q2mu" type="password" style="display:none;" name="g03nwjuzhqnkuwgsl4q2mu"/>
<input id="gddwv4z3amojk0yvoxi2v4" type="password" style="display:none;" name="gddwv4z3amojk0yvoxi2v4"/>
<input id="kxecmkho2vf1vcfb42icjr" type="password" style="display:none;" name="kxecmkho2vf1vcfb42icjr"/>
<span id="ctl04" style="color:Red;visibility:hidden;">*</span>
</div>
I tried to find the input[4] with no style.
Absolute x-path- html/body/form/div[3]/div[1]/div[2]/div[1]/div[1]/div[1]/div[2]/input[4]
Next time how it changes-
Absolute x-path- html/body/form/div[3]/div[1]/div[2]/div[1]/div[1]/div[1]/div[2]/input[17]
id and name of the input also keeps on changing without any common trait
You can do it by locating sibling of the User name label that is displayed, i.e. without attribute style="display:none;"
User Name
"//div[contains(text(), 'User Name')]/following-sibling::input[not(#style='display:none;')]"
Password
"//div[contains(text(), 'Password')]/following-sibling::input[not(#style='display:none;')]"
Or something similar using type attribute:
//input[#type='password'][not(#style)]
I am working on an ASP.NET MVC 4 Project. I want to style data validation errors on my login page with Bootstrap 3.0. When I debug the page and it gives data validation errors, this codes are disappeared in source of my login form:
<form action="/Account/Login" class="col-md-4 col-md-offset-4 form-horizontal well" method="post"><input name="__RequestVerificationToken" type="hidden" value="Zbg4kEVwyQf87IWj_L4alhiHBIpoWRCJ9mRWXF6syGH4ehg9idjJCqRrQTMGjONnywMGJhMFmGCQWWvBbMdmGFSUPqXpx6XaS4YfpnbFm8U1" /><div class="validation-summary-errors"><ul><li>The user name or password provided is incorrect.</li>
</ul></div> <div class="form-group control-group">
<div class="col-md-6 col-md-offset-3">
<input class="input-validation-error form-control" data-val="true" data-val-required="User name alanı gereklidir." id="UserName" name="UserName" placeholder="Kullanıcı Adı" type="text" value="" />
<span class="field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">User name alanı gereklidir.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<input class="input-validation-error form-control" data-val="true" data-val-required="Password alanı gereklidir." id="Password" name="Password" placeholder="Şifre" type="password" />
<span class="field-validation-error" data-valmsg-for="Password" data-valmsg-replace="true">Password alanı gereklidir.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-4">
<button class="btn btn-default" type="submit">Giriş Yap</button>
</div>
</div>
</form>
How can I style these errors like "for=inputError" property of label with Bootstrap 3?
As it's shown in Bootstrap's docs, you need to apply class has-error to the div that contains the input and has class form-group:
<div class="form-group has-error">
...
</div>
It's a quite ugly to write a condition for each property you want to check and apply class has-error depending on the results of that condition, though you can do it like so:
<div class="form-group #(Html.ViewData.ModelState.IsValidField(Html.IdFor(x => x.UserName)) ? null : "has-error" )">
This takes care of the server side validation. However, there is also client side validation you need to think about. For that you'd need to write some jQuery that would check for existence of class field-validation-error and apply class has-error depending on the result.
You may do it all your self, though I suggest checking out TwitterBootstrapMVC which does all of that automatically for you. All you'd have to write is:
#Html.Bootstrap().FormGroup().TextBoxFor(m => m.UserName)
Disclaimer: I'm the author of TwitterBootstrapMVC. Using it in Bootstrap 2 is free. For Bootstrap 3 it requires a paid license.
let say a site has 2 forms: one search form and the other is a registration form...
<form>
Search: <input type="text" name="s">
<input type="hidden" name="a" value="search">
<input type="submit" value="Search">
</form>
[..]website content blabla[...]
<h2>Registration</h2>
<form>
E-Mail: <input type="text" name="email">
<input type="hidden" name="a" value="reg">
<input type="submit" value="Register">
</form>
If I submit a form, I want to know to which form the clicked submit button belongs. GetElementbyId is not possible because the id is not always available. I want to get the index. Any ideas? (WebBrowser Element in VB.NET or C#)
You cant refer to Form object of Input Element e.g btn.Form.Name should work; give it a try
http://msdn.microsoft.com/en-us/library/aa703812(v=vs.85).aspx (reference to IHTMLInputElement::form Property)