I want to check the first checkbox with id=user_accepts_terms. This is the HTML:
<div class="check-group">
<div class="checkbox">
<input type="hidden" value="0" name="user[accepts_terms]">
</input>
<input id="user_accepts_terms" type="checkbox" value="1" name="user[accepts_terms]">
</input>
<label class="" for="user_accepts_terms">
</label>
</div>
<div class="checkbox">
<input type="hidden" value="0" name="user[subscribed]">
</input>
<input id="user_subscribed" type="checkbox" value="1" name="user[subscribed]">
</input>
<label class="m-focus" for="user_subscribed">
</label>
</div>
I want to check the first checkbox with id=user_accepts_terms. Tried this among other things, but no luck:
find('.check-group').all('.checkbox')[0].find("#user_accepts_terms").set(true)
The .find("#user_accepts_terms").set(true) doesn't work, it says unable to find the css.
This piece works as follows:
2.1.0 :097 > find('.check-group').all('.checkbox')[0].text
=> "I accept the terms of use and privacy policy"
The .all('.checkbox')[0] portion is already finding the checkbox you want, and the .find("#user_accepts_terms") portion is trying to find another element below that, which doesn't exist. Either of the following should work, provided the syntax is correct (I'm unfamiliar with it)
find('.check-group').find("#user_accepts_terms").set(true)
find('.check-group').all('.checkbox')[0].set(true)
Related
It seems very easy but somehow I can not find anything on the matter neither on stackoverflow, nor by googling it. Basically I need to just select all unchecked checkboxes on the page with d3 and disable them. How to do that?
You can select unchecked checkboxes with a css pseudo selector using d3.selectAll(), and then set the disabled property with selection.property("disabled",true);
var checkboxes = d3.selectAll("input[type='checkbox']:not(:checked)")
.property("disabled",true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">
Though you should be able to use .attr("disabled",true) as well:
var checkboxes = d3.selectAll("input[type='checkbox']:not(:checked)")
.attr("disabled",true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">
I am having the following form, which I would like to submit to my backend.
<form id="revisionFilter" action="{{ route('revision.filter') }}" method='POST'>
<input class="form-check-input" type="checkbox" value="" id="checkbox1">
<label class="form-check-label" for="checkbox1">
1
</label>
<input class="form-check-input" type="checkbox" value="" id="checkbox0">
<label class="form-check-label" for="checkbox0">
0
</label>
<label class="form-check-label" for="checkboxNull">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="checkboxNull">
Null
</label>
<input type="hidden" name='_method' value='POST'>
<input id="revisionFilterSubmit" type="submit" class='btn btn-danger btn-sm' value='Filter'>
</form>
My backend looks like the following:
routes:
Route::post('/revision/filter', 'RevisionController#filter')->name('revision.filter');
RevisionController:
public function filter(Request $request)
{
Log::info("Request: ");
Log::info($request);
return redirect()->route('revision.rindex');
}
My problem is that when I press the button I am getting redirected to:
The page has expired due to inactivity.
Please refresh and try again.
Instead I would like to see the request with the values of the checkboxes to implement the db saving functionality.
I appreciate your replies!
since I've already made a comment. I will put my answer in the answer box lol.
To answer you, you're not getting any checkbox value since you're checkboxes don't have any name attribute.
You need to put a name attribute to them. E.g.,
<input class="form-check-input" type="checkbox" value="" name="checkbox0" id="checkbox0">
From there, you should now be able to see the value of the checkbox via its name.
Just put same name to your checkbox.For example
<input class="form-check-input" type="checkbox" value="" id="checkbox1" name="revisionFilter">
<input class="form-check-input" type="checkbox" value="" id="checkbox2" name="revisionFilter">
I have the following checkboxes in view
<div class="form-group">
<label class="col-md-4 control-label">Roles</label>
<div class="col-md-6 col-md-offset-4">
<div class="checkbox">
<label>
<input type="checkbox" name="data_entry"> Data Entry <br />
<input type="checkbox" name="save_on_ext_hd"> Save On External HD <br />
<input type="checkbox" name="print"> Print <br />
<input type="checkbox" name="export_csv">Export CSV <br />
<input type="checkbox" name="delete"> Delete
</label>
</div>
</div>
</div>
I am using laravel 5 and blade template.
the issue is: when click on any checkbox the first one checked and verse versa
Ex: when click pn print checkbox the data_entry checked automatically and when unchecked print data_entry unchecked.
also when check print data_entry checked and when check delete for example data_entry unchecked.
That's because all your checkboxes are inside one <label>. Labels with an input inside activate the input when clicked. So clicking anywhere inside the label will trigger all checkboxes.
Solve this by giving each its own <label>:
<label>
<input type="checkbox" name="data_entry"> Data Entry <br />
</label>
<label>
<input type="checkbox" name="save_on_ext_hd"> Save On External HD<br />
</label>
<!-- etc -->
im using bootstraps 3.0.1 and im trying to validate a multiple checkbox, I need to validate one at least. Is there no any way to do this bootstraps? Its hard to believe, but I couldn't find the way.
Here is my html,
<div class="form-group">
<label class="control-label col-lg-4 text-right" for="interes">Categoría:</label>
<div class="controls col-lg-8">
<label class="checkbox inline col-lg-6" for="interes-0">
<input type="checkbox" name="interes" id="interes-0" value="Gastronomía">
Gastronomía
</label>
<label class="checkbox inline col-lg-6" for="interes-1">
<input type="checkbox" name="interes" id="interes-1" value="Moda">
Moda
</label>
<label class="checkbox inline col-lg-6" for="interes-2">
<input type="checkbox" name="interes" id="interes-2" value="Cuidado Personal">
Cuidado Personal
</label>
<label class="checkbox inline col-lg-6" for="interes-3">
<input type="checkbox" name="interes" id="interes-3" value="Espectáculos">
Espectáculos
</label>
</div>
</div>
Thanks.
Twitter Bootstrap doesn't do validation. You can easily Google for a solution.
Using the jQuery Validation plug-in for the following form:
<form id="information" method="post" action="#">
<fieldset>
<legend>Please enter your contact details</legend>
<span id="invalid-name"></span>
<div id="id">
<label for="name">Name: (*)</label>
<input type="text" id="name" class="details" name="name" maxlength="50" />
</div>
<span id="invalid-email"></span>
<div id="id">
<label for="email">Email: (*)</label>
<input type="text" id="email" class="details" name="email" maxlength="50" />
</div>
</fieldset>
<fieldset>
<legend>Write your question here (*)</legend>
<span id="invalid-text"></span>
<textarea id="text" name="text" rows="8" cols="8"></textarea>
<div id="submission">
<input type="submit" id="submit" value="Send" name="send"/>
</div>
<p class="required">(*) Required</p>
</fieldset>
</form>
How can I place the errors inside the span tags? (#invalid-name, #invalid-email, #invalid-text)
I read the documentation about error placement but I did not get how it works.
Is it possible to handle each single error and place it in the specified element?
Thank you
You can also manually add error labels in places you need them. In my particular case I had a more complex form with checkbox lists etc. where an insert or insert after would break the layout. Rather than doing this you can take advantage of the fact that the validation script will evaluate if an existing label tag exists for the specified field and use it.
Consider:
<div id="id">
<label for="name">Name: (*)</label>
<input type="text" id="name" class="details" name="name" maxlength="50" />
</div>
Now add the following line:
<label for="name" class="error" generated="true"></label>
which is standard error label:
<div id="id">
<label for="name">Name: (*)</label>
<input type="text" id="name" class="details" name="name" maxlength="50" />
</div>
<div id="id-error">
<label for="name" class="error" generated="true"></label>
<div>
jQuery will use this label rather than generating a new one. Sorry I could not find any official documentation on this but found other posts that came across this behaviour.
This is a basic structure, you can use whatever selector you would like in the method. You have the error element and the element that was invalid.
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {
error.appendTo(element.prev());
}
});
Or to target the ID, you could do
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {
error.appendTo('#invalid-' + element.attr('id'));
}
});
Not tested, but should work.
I found that using .insertAfter rather than .appendTo works:
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {
error.insertAfter('#invalid-' + element.attr('id'));
}
});
I'm using the metadata extension with the validator.. (note, I'm setting it to use the data-meta attribute on the markup...)
<input ... data=meta='{
errorLabel: "#someotherid"
,validate: {
name:true
}
}' >
then in code...
jQuery.validator.setDefaults({
errorPlacement: function(error, element) {
error.appendTo($(
$(element).metadata().errorLabel
));
}
});
I've been using the metadata for a lot of similar functionality, which works rather nicely... note, I used the single ticks (apostrophes) around the meta data, this way you can use a JSON serializer server-side to inject into that portion of the tag (which should use double-quotes around strings)... a literal apos may be an issue though, (replace "'" with "\x27" in the string).