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()
}
})
Related
I want to store all option texts from dropdown field. Application code is
<select id="regionSelect" onchange="setRegionalManagerInfo()" data-val="true" data-val-required="The Region field is required." name="RegionalInfo.RegionId" class="form-control input-validation-error">
<option selected="selected" value="" data-regionalmanageremail="" data-regionalmanagerphonenumber="" data-regionalmanagerphonenumberextension="">— Select —</option>
<option value="1" data-regionalmanageremail="user1#gmail.com" data-regionalmanagerphonenumber="(123) 456-7890">Region 1</option>
<option value="2" data-regionalmanageremail="user2#gmail.com" data-regionalmanagerphonenumber="(123) 456-7890">Region 2</option>
<option value="5" data-regionalmanageremail="user3#gmail.com" data-regionalmanagerphonenumber="">Region 3</option>
</select>
let array = []
cy.get('select option').each(($option, index )=> {
array.push(Cypress.$($option).text())
console.log(array[index]);
})
Is a bit simpler way to get the data. Right now this data is stored in the array, so you can access the content inside the each as well as outside.
This is more easily done with a combination of .then() and .map(),
cy.get('select option').then($options => {
return [...$options].map(option => option.innerText)
})
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?
<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.