Look at this website, and on the left under "What dates might work?" you see a bunch of boxes selected, is it possible to keep track of what are selected and send them in a http post request or is it better to use javascript?
Assuming you want to save the selected dates on the backend, I would suggest to use HTMX with the delay trigger modifier. A very simple example:
<form hx-post="date-save-endpoint" hx-trigger="change delay:2s">
<input type="checkbox" name="dates" value="2022-04-01"> 2022-04-01
<input type="checkbox" name="dates" value="2022-04-02"> 2022-04-02
<input type="checkbox" name="dates" value="2022-04-03"> 2022-04-03
</form>
Here we have 2s delay, so HTMX will wait 2s for additional user inputs before sending a post request. Of course you can fine tune the delay to prevent some unnecessary requests.
Related
I have a textarea and when I type in it, render function works. What is the problem?
<label class="tf-form-label" for="form.reason">
{{ __('Reason') }}
</label>
<textarea wire:model.debounce.250ms="form.reason" rows="5" name="form.reason" id="form.reason" class="tf-input" ></textarea>
<x-jet-input-error for="form.reason" class="mt-2" />
That is the default behaviour when you bind an element to a Livewire. Debounce does not prevent this, just provides control over when Livewire triggers a network request to update itself.
If you don't want to update on every character input, you either want to use the lazy which sends a network request when it detects the native change event, or defer which batches updates and sends them when you explicitly tell the form to submit.
When I'm trying to click checkbox I getting an error
browser.checkbox(:id, 'AgreeToProceedWithPersonalData').click
Element is not clickable at point (314.5, 448). Other element would receive the click: <label for="AgreeToProceedWithPersonalData"></label>
And when I click at element below I getting agreement page opened.
browser.label(:for, 'AgreeToProceedWithPersonalData').click
How do I can set checkbox and do not open agreement?
<div class="checkbox">
<input data-val="true" data-val-mustbetrue="Ваше согласие необходимо для продолжения" data-val-required="The I agree to proceed personal data field is required." id="AgreeToProceedWithPersonalData" name="AgreeToProceedWithPersonalData" type="checkbox" value="true" autocomplete="off" checked="checked">
<label for="AgreeToProceedWithPersonalData">I agree to proceed personal data.
Read the agreement
</label>
<span class="field-validation-valid" data-valmsg-for="AgreeToProceedWithPersonalData" data-valmsg-replace="true"></span>
</div>
Often times developers like to make things pretty by layering things on top of standard html elements, and the driver doesn't like that.
Please don't over-use this, as it is not good practice for most things, but in situations like this I find myself needing to do:
browser.checkbox(id: 'AgreeForBKIRequest').fire_event :click
Most probably there is something very custom with javascript on the page if fire_event is not working. So it is hard to suggest and it will be nice if you will provide the url of the page to experiment with.
However you could try such suggestion with no guaranty (just guess)
browser.execute_script("window.stop")# That will stop all the scripts on the page. May be usefull may be not
browser.execute_script("document.getElementById('AgreeToProceedWithPersonalData').click();")# That will perform click using pure javascript
I'm trying to cover my project with test and faced with problem.
The "press" method of TestCase fails with 'InvalidArgumentException: Unreachable field ""'
However the "see" method sees the needed button
Besides another form on another page tests fine
Hours of debug show me that the issue might be in the fact that the problem form has multiple (with this brackets []) inputs
Test code that fails
$this->type($params['from'], 'from[]');
$this->type($params['event'], 'event[]');
$this->type($params['class'], 'class[]');
$this->type($params['method'], 'method[]');
$this->press('save_handlers');
With form and button everythings is okey
Button:
<button type="submit" class="btn btn-primary btn-block" name="save_handlers">Save</button>
And of course button is in the form tag
Indeed, the problem is linked with the fact that there are attributes with brackets[].
I just had the same problem. I'm using a form with multiple checkboxes, and all of them have the same name (but different id) : codes[]. I'm doing this in order to retrieve them later (in a controller) simply as an array of values.
<input id="perm-0" type="checkbox" name="codes[]" value="perm-0" />
<input id="perm-1" type="checkbox" name="codes[]" value="perm-1" />
<input id="perm-2" type="checkbox" name="codes[]" value="perm-2" />
My friend var_dump() told me that the Symfony component which parses the form inputs doesn't like it when I'm using codes[] with nothing inside the brackets. It is seen as two fields : "codes" and "" instead of codes[]. That's causing the Unreachable field "" error.
A simple solution I found is to simply add an explicit index for the codes[] array :
<input id="perm-0" type="checkbox" name="codes[0]" value="perm-0" />
<input id="perm-1" type="checkbox" name="codes[1]" value="perm-1" />
<input id="perm-2" type="checkbox" name="codes[2]" value="perm-2" />
This way each checkbox is distinct from others, and the method press() does not cause the error any more.
It seems that this doesn't affect the processing of the resulting array in my controller.
This seems rather confusing seeing as the docs state this:
"Press" a button with the given text or name.
While the docblock above the actual press method states the following:
Submit a form using the button with the given text value.
So instead of using the value of the name attribute (save_handler) use the actual text (Save).
$this->press('Save');
In Safari, If I load a piece of html via XHR (ajax) the browser does not render the radio button that has the checked="checked" attribute as checked.
the html I fetch via ajax:
<input type="radio" name="radiotest" value="off">
<input type="radio" name="radiotest" value="on" checked="checked">
the browser renders two unchecked radio buttons. If I load the exact same code directly from a plain html file (no ajax) the radio buttons render as they should, the last being in its checked state.
what's wrong, is this a known bug? Is there a fix available?
EDIT:
Probing further this looks like a browser bug, and I could not so far fix it with jQuery Post processing, any help appreciated.. here is what I've found:
I have a page that pulls in some form element via ajax.
The html is this:
<input type="checkbox" name="checktest">
<input type="checkbox" name="checktest" checked="checked">
<input type="radio" name="radiotest" value="off">
<input type="radio" name="radiotest" value="on" checked="checked">
after the form element are pulled in, the checkboxed render correct, but the radios both render unckecked. Now, If i run the following jQuery command (from the Safari 5 console):
$('#activemodules input[checked="checked"]');
..it returns an object containing the one checked checkbox.
but if I run the command:
$('#activemodules input[value="on"]');
it actually retuns the correct object, and it even shows its outerHTML property correct like this:
outerHTML: "<input type="radio" name="radiotest" value="on" checked="checked">"
now, if I do:
$('#activemodules input[value="on"]').attr('checked','checked');
Safari get's it, and renders it correctly. I guess I'll just have to pass a data-ischecked="true" attribute and use that to catch and 're-check' all radio buttons after the ajax bit is loaded.. but still, even if I can do this, I'd like to hear any comment or suggestions on this.
This is what my solutions ended like:
First I add a data-ischecked="1" attribute to the radios that are checked:
<input type="radio" name="foo" data-ischecked="1" value="bar" checked="checked">
then, after the ajax call succeeds and finishes I run this:
$('#myradios :radio')
.each(function(){
if( $(this).data('ischecked') ){
$(this).attr('checked','checked');
$(this).removeAttr('data-ischecked');
}
});
This seems to work fine.. but I found out some other stuff of importance:
If I called the data attribute simply data-checked instead of data-ischecked it DID NOT WORK, maybe this is a reserved name?
And also; if I ran the operation on the broader selector scope:
$(':radio')
.each ...
then it also DID NOT WORK
I don't know why, but adding the id of a parent element of the radios that was also part of the html returned by the ajax call to the selecor scope like this:
$('#myradios :radio')
made it work..
I found that mikkelbreum's solution only worked if I did not include the "checked" attribute in the AJAX-injected code.
<input type="radio" name="foo" data-ischecked="1" value="bar">
I can not get the form to submit with the button. The best luck I have had is to send a generic email with no data attached.
This is the code:
<input name="mailto: info#thebellimagegroup.com" type="submit" onClick=mailto: info#thebellimagegroup.com value="Submit Form" id="mailto: info#thebellimagegroup.com" >
the value is: /frms/contact.con
Can anyone help????
Submit buttons generally aren't used for storing information -- as a rule, they just submit the page, and any other information (such as the email recipient's address) will be put in other inputs in the form. For example:
<form action="/frms/contact.con" method="post">
<label>Subject: <input type="text" name="subject" value="" /></label>
<label for="message-editor">Message</label>
<textarea name="message" rows="6" cols="60" id="message-editor"></textarea>
<input type="submit" value="Submit" />
<input type="hidden" name="recipient" value="info#thebellimagegroup.com" />
</form>
In this example, the "action" attribute of the FORM element specifies the script on the server which will process the information once someone clicks Submit. The hidden input which I have named "recipient" specifies the email address, and the value of that will be sent in along with the rest of the form when it's submitted. All the submit button itself does is cause the browser to send the finished form off to the server for processing.
Note that the example I've given here probably won't work with your particular script, because the names I've selected for the example inputs ("subject", "message", and "recipient") probably don't match the ones your script expects.
Do you have documentation on how the /frms/contact.con script works? If so, check it -- it should tell you what to name your form elements. Failing that, and assuming that you know whatever programming language it was written in, you could read the code in contact.con to see what names it's expecting.
If all else fails, try a different server-side script, there are about eight zillion available.