I am trying get something as described in the subject, when the submit or order now button is clicked, it should go to URL based on the radio button selection. But this below form is appending ?rr=on which creating issues with my urls.
The form is:
<form id="account2">
<p>
<input type="radio" id="r20" name="rr" onclick="document.getElementById('account2').action='http://seomagz.com/';"/>
<label for="r20" class="rating"><span1></span1><span class="one_month">36 mo</span> <span class="one_month2">Rs.530</span><span class="one_month">/mo</span> </label>
<p>
<input type="radio" id="r21" name="rr" onclick="document.getElementById('account2').action='http://www.google.com/';"/>
<label for="r21"><span1></span1><span class="one_month">24 mo</span> <span class="one_month2">Rs.533</span><span class="one_month">/mo</span> </label>
<p>
<input type="radio" id="r22" name="rr" onclick="document.getElementById('account2').action='http://www.google.com/';"/>
<label for="r22"><span1></span1><span class="one_month">12 mo</span> <span class="one_month2">Rs.541</span><span class="one_month">/mo</span> </label>
<p>
<input type="radio" id="r23" name="rr" onclick="document.getElementById('account2').action='http://www.googlefg.com/';" />
<label for="r23"><span1></span1><span class="one_month">3 mo</span> <span class="one_month2">Rs.549</span><span class="one_month">/mo</span> </label>
</div>
<button type="submit" class="ordernow1" style="margin-top:63px;"><p>Order Now</p></button></form>
<form id="account2" method="post">
You should also be closing your <p> tags, makes good practice
Cannot be reproduced here
try using action='post'
here's the fiddle
http://jsfiddle.net/hAGPr/
Related
i'm using Uikit radio input (https://altair-html.tzdthemes.com/forms_regular.html).
The problem is the radio input is transforming between code and on site display
After load my form with Ajax, i want to alert value for radio choice after each change.
Here my code :
HTML :
<div class="uk-width-medium-1-2">
<h5>Radio set 1</h5>
<div class="uk-grid" data-uk-grid-margin>
<span class="icheck-inline">
<input type="radio" name="radio_opt" id="radio_opt_1" value="Yes" data-md-icheck />
<label for="radio_opt_1" class="inline-label">Oui</label>
</span>
<span class="icheck-inline">
<input type="radio" name="radio_opt" id="radio_opt_2" value="Non" data-md-icheck />
<label for="radio_opt_2" class="inline-label">No</label>
</span>
</div>
</div>
<div class="uk-width-medium-1-2">
<h5>Radio set 2</h5>
<div class="uk-grid" data-uk-grid-margin>
<span class="icheck-inline">
<input type="radio" name="radio_opt_second" id="radio_opt_3" value="Yes" data-md-icheck />
<label for="radio_opt_3" class="inline-label">Oui</label>
</span>
<span class="icheck-inline">
<input type="radio" name="radio_opt_second" id="radio_opt_4" value="Non" data-md-icheck />
<label for="radio_opt_4" class="inline-label">No</label>
</span>
</div>
</div>
Then here my JS (doesnt' work)
$(document).on('change', 'input:radio', function () {
alert('test');
});
That theme is using iCheck and according to the docs you should use:
$('input:radio').on('ifChecked', function(event) {
alert('test');
});
Using Jquery with Ruby on Rails and the Simple Form Gem I can successfully show / hide a div on changing a radio button, however despite numerous attempts I can't get this to work on page load - divs are always showing, whether the radio button is true or false. Any help would be great thanks.
jQuery(document).ready(function() {
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
UPDATE - HTML OUTPUT OF RADIO BUTTONS:
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: block;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>
Your code above adds an event handler for the change event on the radio button. Aside from that, you need to check the value of the :checked radio button on page load, and show/hide based on that.
Note: To prevent flickering, give the element an initial style of display: none.
jQuery(document).ready(function() {
if ( jQuery('[name="user[nurse_attributes][qualified]"]:checked').val() !== 'true' ) {
jQuery('#denied-quote-one').show();
}
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: none;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>
I am having problems trying to pass values to two different forms on the same page. The page is populated with 16 radio buttons (which I’ve turned into boxes for display reasons) and they all hold a value (e.g. 001). Both of the forms jobs are to somehow grab the active/selected radio button value and post it to a PHP file so database changes can be made. Instead of a submit button, I am using an anchor to pass a JavaScript submit function. I have tried having
both forms cover the whole page but still didn't have any luck.
I’ll post some code below to help you understand.
PS. If you need more code to understand, I can post it to pastebin.
<li>
<form id="form_ready" method="post" action="../backend/screen.php">
<input type="hidden" name="screenid" value="" />
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_ready').submit();">READY</a>
</form>
</li>
<li>
<form id="form_c" method="post" action="../backend/screen.php">
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_c').submit();">COLLECTED</a>
</form>
</li>
</ul>
<div id="content">
<div id="container">
<div id="table">
<div id="tr1">
<div id="td1">
<input type="radio" name="pickup" id="1" value="001" />
<label for="1"> <span>001</span> </label>
</div>
<div id="td2">
<input type="radio" name="pickup" id="2" value="002" />
<label for="2"> <span>002</span> </label>
</div>
<div id="td3">
<input type="radio" name="pickup" id="3" value="003" />
<label for="3"> <span>003</span> </label>
</div>
<div id="td4">
<input type="radio" name="pickup" id="4" value="004" />
<label for="4"> <span>004</span> </label>
</div>
To answer the suggestion in the comments and use only one form, here's how to grab the value from the selected radio button:
var inputs = document.getElementsByTagName('input');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
valueSelected will contain the value of the selected radio.
If you ever need to reduce the type to "radio" only for some reason, you can check an input type with inputs[i]['type'] === 'radio' in the for loop.
The best would probably still be to set a class for your "radio" inputs, it will allow the loop to be more specific, hence a more efficient code, for example:
<input type="radio" class="myRadio">
and in JS: var inputs = document.getElementsByClassName('myRadio');
I am using parsley.js to validate my form. When trying to validate my checkbox by using data-mincheck, noting happens.
here is my code snippet:
<form data-validate="parsley">
<p>Pick atleast 2 items:</p>
<div id="custom-salad">
<div class="sub-step">
<p>Base:</p>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" data-group="salad-dish" name="salad-custom" data-mincheck="2" value="pasta"> <i class="icon-unchecked"></i> Pasta
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" data-group="salad-dish" name="salad-custom" value="Cabage"> <i class="icon-unchecked"></i> Cabage
</label>
</div>
</div>
</div>
</form>
On the Parsley.js Website it says, he only uses the parsley-namespace for his values. I evaluated this quickly with the current version of Parsley.js.
Its seems that it doesnt work anymore with data- attributes, however this is what i got out of you code to get it working:
<form action="success.html" parsley-validate method="post">
<p>Pick atleast 2 items:</p>
<div id="custom-salad">
<div class="sub-step">
<p>Base:</p>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" parsley-group="salad-test" name="salad-custom" parsley-mincheck="2" value="pasta"> <i class="icon-unchecked"></i> Pasta
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" parsley-group="salad-test" name="salad-custom" value="Cabage"> <i class="icon-unchecked"></i> Cabage
</label>
</div>
</div>
</div>
<input type="submit" value="Senden"> </input>
</form>
Make sure you add Jquery before Parsley. I simply added the now recommendet Parsley attributes like "parsley-validate" on the Form and "parsley-group" and "parsley-mincheck" for the Field.
The "parsley-group" always has to be the same for each Checkbox to be affected. But isnt limited to the "name" attribute.
Hope this helps.
I need a JavaScript that can insert an attribute to a field and also remove it when the user deselects the field.
Here is the code I'm using for the radio select:
<script>
$(document).ready(function() {
$("input[name$='sel']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#sel" + test).show();
});
if (test == "CreditCard") {
$("#card").addClass("validate[custom[card]] text-input");
} else {
$("#card).removeClass("validate[custom[card]] text-input");
}
});
</script>
Field code:
<table><tr><td>
<p>
Credit/Debit Card<lable style="margin-right:1px;"></lable><input type="radio" name="sel" id="sel" value="CreditCard" />
</p>
<p>
Paypal<input type="radio" id="sel" name="sel" value="Paypal" />
</p>
<p>
Wire Transfer<input type="radio" id="sel" name="sel" value="WireTransfer" />
</p>
<!====================================================================================>
</td><td>
<!====================================================================================>
<div id="selCreditCard" class="desc">
<label for="card"><strong>Card Number<font color=red size=3> *</font></strong></label>
<input name="card" type="text" id="card" value="" style="width:85px;" />
</div>
<!====================================================================================>
<div id="selPaypal" class="desc" style="display: none;margin-left:20px;margin-top:1px;margin-bottom:1px;">
paypal
</div>
<!====================================================================================>
<div id="selWireTransfer" class="desc" style="display: none;margin-left:20px;margin-top:0px;margin-bottom:-5px;">
Transfer
</div>
<!====================================================================================>
</td></tr></table>
This is the attribute that needs to be inserted to the "card" input field:
class="validate[custom[card]] text-input"
When the user selects the radio with the value CreditCard, the attribute will be inserted to the input field, and when the user deselects the radio with the value CreditCard the attribute will be removed.
Link for fiddle:
FIDDLE
telexper, there are lots of wrong things in your code, and unfortunatelly i dont have the time to explain right now.
but i will leave a working code for you here: http://jsfiddle.net/RASG/DSrLS/
just click "Credit/Debit Card" and the class nowitsadded wil be added to the input field, which will turn red.
HTML
<input type="radio" id="sel1" name="sel"> Credit/Debit Card
<br>
<input type="radio" id="sel2" name="sel"> Paypal
<br>
<input type="radio" id="sel3" name="sel"> Wire Transfer
<br>
<br>
<div id="selCreditCard" class="desc">
Card Number <input name="card" type="text" id="card" value="">
</div>
JS
$('#sel1').click(function() { $('#card').addClass('nowitsadded') })
CSS
.nowitsadded {background-color: red}