<form ... method="get">
<checkbox name="category[]" value="1">
<checkbox name="category[]" value="2">
<checkbox name="category[]" value="3">
...
I want the final get query to look like the following, if all items are checked:
?category=1,2,3
If only 1 and 3 are checked:
?category=1,3
What's the best way to achieve this?
You could use Javascript to manipulate a hidden field:
<input type="hidden" name="category" value="" />
When either checkbox is changed, update the value (i.e. "1,3" or "1,2,3") as needed.
Related
UPDATE: per this response this is behavior of HTML5? I tried setting the parameters in hidden inputs and that works. Doesn't make much sense to me, but what do I know.
I have my form for a "next page" button set up like this:
<form id="next" method="get"
asp-controller="Search"
asp-action="Cities"
asp-route-sortOrder="#ViewData["CurrentSort"]"
asp-route-currentFilter="#ViewData["CurrentFilter"]"
asp-route-pageNumber="#(Model.PageIndex + 1)">
<input form="next" type="submit" class="page-btn" disabled="#nextDisabled" value="Next" />
</form>
When I inspect the page, the form has the correct action url (example):
/Search/Cities?currentFilter=Test&pageNumber=2
But the request actually being made is to
/Search/Cities?
But when it hits the controller, all of the parameters are null. Here is the top of my controller:
[Route("Search/Cities")]
public ActionResult Cities(string SearchString, string sortOrder, string currentFilter, int? pageNumber)
I'm not sure what I'm missing here.
you have 3 choices. This code was tested
first the most popular, you have to use post
<form id="next" method="post"
asp-controller="home"
asp-action="test"
asp-route-sortOrder="CurrentSort"
asp-route-currentFilter="CurrentFilter"
asp-route-pageNumber="1">
<label for="searchString">Search</label>
<input type="text" id="searchString" name="searchString"><br><br>
<input form="next" type="submit" class="page-btn" value="Next" />
</form>
in this case searchingString will be sent in a request body, all another params in a query string
second
<a href="/Home/Test?sortOrder=CurrentSort¤tFilter=CurrentFilter&pageNumber=2">
<button class="page-btn">Next</button>
</a>
the second option will generate get request if it is so important for you, but you will not be able post search string except using ajax.
third, you can use get, but route params should be in the inputs, probably hidden, search string will have a visible input
<form id="next" method="get"
asp-controller="home"
asp-action="test">
<input type="hidden" id="sortOrder" name="sortOrder" value="CurrentSort" />
<input type="hidden" id="currentFilter" name="currentFilter" value="CurrentFilter" />
<input type="hidden" id="pageNumber" name="pageNumber" value="23" />
<label for="searchString">Search</label>
<input type="text" id="searchString" name="searchString"><br><br>
<input form="next" type="submit" class="page-btn" value="Next" />
</form>
in this case nothing will be inside of the body, everything in a query string including searchString.
I'm looking to combine two things:
a) ensure that when a checkbox is checked, it remains checked after submit, AND
b) only allow one checkbox per group (e.g. the one below) be allowed to be checked at once. I can't use radio buttons unfortunately!
I can do a) & b) in isolation but unfortunately can't seem to combine them! Please help?
<form>
<input type="checkbox" name="a" value="low" <?php if(isset($_POST['a'])) echo "checked='checked'"; ?>/>
<input type="checkbox" name="b" value="mid" <?php if(isset($_POST['b'])) echo "checked='checked'"; ?>/>
<input type="checkbox" name="c" value="hi" <?php if(isset($_POST['c'])) echo "checked='checked'"; ?>/>
</form>
Using jQuery, I was able to create a function that will allow only one checkbox to be clicked at a time.
$('.check').click(function(){
if($('.check:checked').length == 1){
$('.check:not(:checked)').attr('disabled',true);
}
else if($('.check:checked').length == 0){
$('.check:not(:checked)').removeAttr('disabled');
}
});
<p>Check a box</p>
<input type="checkbox" class="check" />
<input type="checkbox" class="check" />
<input type="checkbox" class="check" />
DEMO
Here's what I have, below, trying to use bits from similar answers here, plus items from the parsley site.. Nothing happens..User is not alerted that at least 1 box must be checked. Do I have this all wrong? Thank you in advance for any clues!
<form action="success.html" id="contact-form" data-parsley-validate>
<label for="language">Please Choose your Language:<br>
<input type="checkbox" class="checkbox" name="language" value="english" parsley-group="language" parsley-mincheck="1">English<br>
<input type="checkbox" class="checkbox" name="language" value="spanish" parsley-group="language" >Spanish<br>
<input type="checkbox" class="checkbox" name="language" value="french" parsley-group="language" >French
</label>
You have some problems with your code:
parsley-group doesn't exist. There is a data-parsley-group and is applicable if you want to validate a portion of your form.
parsley-mincheck="1" doesn't exist. There is a data-parsley-mincheck="1".
Assuming that you require at least one language, but can accept more, this code should do the trick:
<form action="success.html" id="contact-form" data-parsley-validate>
<label for="language">Please Choose your Language:<br>
<input type="checkbox" class="checkbox" name="language[]"
value="english" required>English<br>
<input type="checkbox" class="checkbox" name="language[]"
value="spanish" required>Spanish<br>
<input type="checkbox" class="checkbox" name="language[]"
value="french" required >French</label>
<button type="submit" id="submit-button">Submit form</button>
</form>
$(document).ready(function() {
// bind parsley to the form
$("#contact-form").parsley();
// on form submit, validate form and, if valid, show valid in the console
$("#contact-form").submit(function() {
$(this).parsley("validate");
if ($(this).parsley("isValid")) {
console.log('valid');
}
event.preventDefault();
});
});
If you want the user to select one and only one option, I advice you to use radio buttons.
Some form values aren't appearing in the eform-generated email:
<input type="text" size="2" name="qty_item_5" id="qty_item_5" value="0"/>
<label>Corsage $18</label><br />
<input type="checkbox" name="item_5[]" value="white/ivory/cream" />
<label>white/ivory/cream</label>
<input type="checkbox" name="item_5[]" value="pink/cream " />
<label>pink/cream</label>
<input type="checkbox" name="item_5[]" value="red" />
<label>red</label>
<input type="hidden" name="price_item_5" id="price_item_5" value="18" />
<input type="hidden" name="name_item_5" id="name_item_5" value="Garden Roses Corsage" />
<span id="total_item_5"></span>
</p>
<label>Subtotal: $</label>
<input type="text" name="subTotal" id="subTotal" value="" size="8" readonly="readonly" />
<input type="hidden" name="Msg" value="" />
Template chunk for the email:
<p>Order<br />
=====================================================================<br />
[+qty_item_5+] x [+name_item_5+] [+item_5+] - [+price_item_5+]<br />
<p>Subtotal: [+subTotal+]<br />
The information missing is:
item_5 (checkboxes)
price_item_5 (hidden field)
subTotal (jquery generated and correctly displays on screen ie
qty_item5 * price_item_5)
So only "qty_item_5" (input), "name_item_5" (hidden field) are appearing in the email.
Looks like an html error, your check boxes need unique names as the for submits the value for item_5, if the last checkbox is blank, so is the value. If you were using a radio button type this would probably work. [if you check the last checkbox ~ does it come through in the email?]
price_item_5 & subTotal certainly look fine - I don't see anything in your code that would be blocking that. Do you get any errors in the logs?
I am trying to output four hidden inputs based upon the user's selection in a dropdown box.
<label>Neighborhood:</label>
<select id="district">
<option value="">- Select -</option>
<option value="warehouse">Warehouse District</option>
<option value="gateway">Gateway District</option>
<option value="tremont">Tremont</option>
<option value="shoreway">Detroit Shoreway</option>
</select>
For instance, if the user selects warehouse district, these hidden inputs are added to the form.
<input type="hidden" name="idx-q-LatitudeMax" value="41.50534740463771" />
<input type="hidden" name="idx-q-LatitudeMin" value="41.49729607499309" />
<input type="hidden" name="idx-q-LongitudeMin" value="-81.70605182647705" />
<input type="hidden" name="idx-q-LongitudeMax" value="-81.69352054595947" />
I've found some solutions to deal with changing a single value, but I need to output all four .
Any help would be greatly appreciated
"type property cannot be changed(IE Security Model)."
See this change type of input field with jQuery
Alternatively you can do this
Add a class to your input like this
<input class="hidden warhouse" name="idx-q-LatitudeMax" value="41.50534740463771"/>
<input class="hidden warhouse" name="idx-q-LatitudeMin" value="41.49729607499309" />
<input class="hidden warhouse" name="idx-q-LongitudeMin" value="-81.70605182647705" />
<input class="hidden warhouse" name="idx-q-LongitudeMax" value="-81.69352054595947" />
hidden css class has "display:none"
on change first hide all and then display the one you want
$('#district').change(function(){
$('input.hidden').hide()
if($(this).val() == "warehouse"){
$("input.warehouse").show()
}
})