I cannot solve this because i have many third party content (open licensed) that have some rules that doesnt work with this.
This is the principal code:
<input id="submit" class="btn-success" name="submit" type="submit" value="Comment" tabindex="7" />
This show a good button to submit my content. But now i want to include in the "value" a little icon image before the text. The other third party give me this code to include an icon where i want, just putting tag with the class of the icon that they offer, in this case:
<i class="icon-comment icon-white"></i>
Normaly, this will work, but in this case is not printed correctly cause is inside "value":
<input id="submit" class="btn-success" name="submit" type="submit" value="<i class="icon-comment icon-white"></i>Comment" tabindex="7" />
If you can see the value content, it only read until class= cause there is another quote.
How can I include all the content inside value without this kind of errors?
Related
I'm playing around with htmx and hyperscript and I want the "submit button" (Add User) to be enabled when all required input fields are valid in a form. In this case, a non-empty name and a valid email address must have been defined.
<form hx-post="/example" hx-target="#table tbody" hx-swap="beforeend">
<label class="control-label" for="nameInput">Name</label>
<input id="nameInput" name="name" class="form-control" type="text" required placeholder="John Doe"/>
<label class="control-label" for="emailInput">Email</label>
<input id="emailInput" name="email" class="form-control" type="email" required placeholder="john#doe.org"/>
<button _="<what should I write here??>" class="btn btn-primary" disabled>Add User</button>
</div>
</form>
What should I write instead of <what should I write here??> to make this happen?
Something like this should work:
<button _="on change from closest <form/>
for elt in <[required]/>
if the elt's value is empty
add #disabled then exit
end
end
remove #disabled" class="btn btn-primary" disabled>Add User</button>
https://jsfiddle.net/xy8vn5jk/20/
I like #1cg answer
I have slightly more stringent requirements than the OP.
What I required is such that when the user types but doesn't leave the focus, the button should still disable or enable correctly.
If use keyup is wiser to use debounced,
hence my version is
<button _="on keyup from closest <form/> debounced at 150ms
if (<[required]:invalid/>).length > 0
add #disabled
put 'Check All Fields' into me
then exit
end
remove #disabled
put 'Submit' into me
" disabled type="submit">
Fill Out Required Fields
</button>
https://codepen.io/simkimsia/pen/LYQgZZK
by using [required]:invalid and comparing the length you can avoid doing a for loop and a nested if. Please note the parenthesis to wrap ([required]:invalid)
In my website i have a contact form, and i've integrated it with a Google form. I've added the google form's execute URL as the action URL so once its submitted the form is being populated with the form data. the way i have done it
But when its being submitted, its redirecting to a google form's response page. What i need is once its submitted, to stay on the same page and give an alert. Im not sure how to do this in vue js. Any suggestion will be appreciated.
the content on the redirected page
{"result":"success","data":"{\"name\":[\"sdvsdv\"],\"company\":[\"dsvdv\"]}"}
Form in vue js view
<form method="POST" id="appointment-form" action="https://script.google.com/macros/s/AKfycbzRHvjfmIZdwKnOm26PeFv64OyyyGAfcr68MxvYw/exec">
<div class="form-group">
<input type="text" placeholder="Your name" name="name" class="form-control" id="name" required>
</div>
<div class="form-group">
<input type="text" placeholder="Company name" name="company" class="form-control" id="company" required>
</div>
<buttontype="submit" class="btn btn-default btn-block form-submit-btn">Submit</button>
</form>
After read your code properly, i found many errors.
How are you saving input values?
To save, you have to use ```v-model directive````
I guess you save the input values in somewhere. To avoid your problem, you can add a method and call it on submit, and inside the method save your input values.
I have created a template and a controller for it in ODOO v8. Following is the template:
<template id="myTemplate">
<t t-call="myTemplateHeader"/>
<div class="myClass">
<form action="/myControllerAction" name="myTemplateForm">
<input type="text" id="name" name="name"/>
<input type="text" id="lname" name="lname"/>
<input type="text" id="email" name="email"/>
<input type="submit" value="Submit"/>
</form>
</div>
</template>
And I have written a controller for the action /myControllerAction.
#http.route(['/myControllerAction'], type='http', auth="public", website=True)
def index(self, **post):
data = {}
# some action here
# to submit and fetch values
request.website.render("my_module.mySecondTemplate", data)
I have added validations on the fields in the form so that one cannot submit the form without entering the values in all the text fields given. The validations in JS works, it shows an alert message when the text fields are blank(one alert for each text field). But, after clicking the OK for the alert message of email field, it submits the form even when the field is empty. I have checked the issue and found that the problem exists only if I provide
<input type="submit" value="Submit"/>
and it will be solved if I am using
<input type="button" value="Submit"/>
But I have to make some calculations in the controller and need to retrieve some data from the database to show on the next page. For this, type="button" cannot be used as it just submit the form and redirect to next page without making a call to the controller function. type="submit" will make the call to the controller, but validations are not working as described earlier. Also submitting the form using onclick event of the button in javascript won't call the controller. I want validations on the form and then call the controller(on submit). Is there any way I could implement this in ODOO v8?
For making fields mandatory in ODOO templates, the attribute required="required" can be used on input fields.
<input type="text" id="name" name="name" required="required"/>
I'm having trouble getting Cucumber to "choose" a radio button and hoping someone can give me a sanity check. Without quoting a huge mass of HTML junk, here's the relevant portion (which I collected from print.html). It's within a modal div that is activated by a button. I can "click" that button and see the modal window appear (I'm running it as a #javascript scenario in Selenium).
<div class="modal-body pagination-centered">
<img src="/assets/payment.png" alt="Payment" />
<form novalidate="novalidate" method="post" id="edit_cart_1" class="simple_form edit_cart" action="/carts/complete" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8" />
<input type="hidden" value="put" name="_method" />
</div>
<div class="control-group hidden cart_property_id">
<div class="controls">
<input type="hidden" name="cart[property_id]" id="cart_property_id" class="hidden" />
</div>
</div>
<div id="payment_fat_buttons" class="fat-buttons">
<div class="vertical-button-wrapper">
<input type="radio" value="cash" name="cart[payment_type]" id="cart_payment_type_cash_pay" data-property-id="1" />
<label for="cart_payment_type_cash_pay">Cash</label>
</div>
<div class="vertical-button-wrapper">
<input type="radio" value="credit" name="cart[payment_type]" id="cart_payment_type_credit_pay" data-property-id="1" />
<label for="cart_payment_type_credit_pay">Credit</label>
</div>
</div>
<div style="display: none;" id="cart_room_number_area_pay">
<div class="control-group string optional cart_room_number">
<label for="cart_room_number_pay" class="string optional control-label">Room number</label>
<div class="controls">
<input type="text" value="" size="50" name="cart[room_number]" id="cart_room_number_pay" class="string optional" />
</div>
</div>
</div>
<input type="checkbox" value="1" style="display: none;" name="receipt" id="receipt" />
<div class="sell-modal-footer">
<input type="submit" value="Complete With Receipt" name="commit" id="cart_complete_with_receipt" data_disable_with="Processing..." class="btn btn-danger" />
<input type="submit" value="Complete Sale" name="commit" data_disable_with="Processing..." class="btn btn-danger" />
</div>
</form>
</div>
I've tried as many different equivalent ways of getting at it that I can think of. Most obviously just by the label, or the ID, like:
choose 'cart_payment_type_cash_pay'
choose 'Cash'
which just gives me the error:
Unable to find radio button "cart_payment_type_cash_pay" (Capybara::ElementNotFound)
I thought it might have something to do with the modal dialog, visibility, etc. but I introduced the ID #payment_fat_buttons just for testing, and when I look for it like this:
find('#payment_fat_buttons').choose('Cash')
it finds that DIV OK, but still not the radio button. I also tried getting at it with :xpath on the whole page, and within a scope like:
within(:xpath, "//div[#id='payment_methods']") do
find(:xpath, ".//input[#id='cart_payment_type_cash_pay']").choose
end
which acts like it can also find the outer DIV, but not the radio button - I get the error:
Unable to find xpath ".//input[#id='cart_payment_type_cash_pay']" (Capybara::ElementNotFound)
Generally, it seems like I can find any arbitrary element around the radio buttons with :xpath or CSS expressions, just not the radio buttons. I can also push the submit buttons on the form without any problem. I tried dropping the data attributes as a test - no difference. Any help would be greatly appreciated. This is driving me nuts because it seems so simple, and yet I'm getting nowhere. I need to choose that for a big segment of Scenarios, so if I can't figure it out, I'll have to resort to something hokey and horrible. Many thanks in advance...
Relevant versions from Gemfile.lock:
rails (3.2.13)
cucumber (1.3.8)
gherkin (2.12.2)
cucumber-rails (1.4.0)
capybara (2.1.0)
selenium-webdriver (2.35.1)
I finally figured this one out. Capybara wasn't finding the radio button because buried deep in my styles was some CSS that hid it in order to change the appearance. Once I realized that, I figured out that I could side-step the whole issue of finding the radio button by just doing a click on the label instead:
find(:xpath, "//label[#for='the_radio_button_id']").click
I didn't realize it was possible to get at radio buttons that way - but in any case, it solves the issue of how to click a radio button that Capybara won't find due to styling or other issues. Hope that helps someone else.
i have this website im building, my client is using a template and the template has contact forms, now i cant seem to understand how to get the text fade on click for input fields to work on any additional fields i make on top of what was there on the template.
http://daniloportal.com/NPC2/contact.html
on that page take a look at the form, the values with *'s disappear but the clone EMAIL input i made doesnt cause i took the * off the value.
Ive been going crazy trying to figure out where this is being configured on the page, If any inspect elementors can take a look and let me know i would greatly appreciate it!
this is the code snip
<form id="ajax-contact-form" action="">
<input type="text" name="name" value="Name *" title="Name *" />
<input type="text" name="email" value="Email *" title="Email *" />
<input type="text" name="email" value="Email " title="Email *" />
<textarea name="message" id="message" title="Message *">Message *</textarea>
<div class="clear"></div>
<input type="reset" class="btn btn_clear" value="Clear form" />
<input type="submit" class="btn btn_blue btn_send" value="Send message!" />
<div class="clear"></div>
</form>
Search your code to find what makes the input's value disappear. E.g., look for behavior that clears the value of form fields (either element.value = '' if using plain javascript, or element.val('') if using jquery).
Then you can see what is the condition to clearing it. In your case, seems that the condition is that the input's value is equal to it's "title" attribute (you can edit both using "Inspect Element" in Chrome).