I have two radio buttons which correspond to two different forms.
Depending on the selected radio, I want to accomplish two different actions, thus the reason why I have two forms.
The problem I'm having is that single-radio select works when the two radios are on a single form. If, by any chance they are in two different forms, the single selection doesn't work.
Both radios have the same name, but I don't know how to force single select based on two different forms.
I'm using jQuery (not for radios selection, but the jQuery is there) so although I would prefer not to use jQuery for this action, if it comes down to it, I'm ok with that.
Could anyone provide a solution or a pointer in the solution direction for this?
Best Regards,
EDIT
I'm placing some code at request
<div class="payment-details-account-top">
<form id="payment-details-form-card" action="<?php echo Mage::getUrl('orderform/index/changedpayment'); ?>" method="POST">
<div class="row all-steps">
<div class="col-md-12">
<input type="radio" name="payment-type" value="<?php echo $this->__('Betale med kort') ?>" id="payment-with-card" class="css-checkbox" <?php if ($ba->getMethodCode() == 'payex2'): ?> checked <?php endif; ?> onclick="this.form.submit();">
<label for="payment-with-card" class="css-radio-label"></label>
<input type="submit" name="payment-with-card" id="payment-with-card" value="<?php echo $this->__('Betale med kort') ?>" class="top-payment-buttons" />
<div class="creditcards"></div>
<!-- <span class="payment-method-message"><?php if ($ba->getMethodCode() == 'payex2') echo $message; ?></span> -->
</div>
</div>
</form> <!-- Close "payment-details-form-card" form -->
</div>
<div class="payment-details-account-bottom">
<form id="payment-details-form" action="<?php echo Mage::getUrl('orderform/index/changedpayment'); ?>" method="POST">
<div class="col-md-12">
<input type="radio" name="payment-type" value="<?php echo $this->__('Betale med faktura') ?>" id="payment-with-faktura" class="css-checkbox" <?php if ($ba->getMethodCode() != 'payex2'): ?> checked <?php endif; ?> >
<label for="payment-with-faktura" class="css-radio-label"></label>
<input type="button" name="payment-with-faktura" id="payment-with-faktura" value="<?php echo $this->__('Betale med faktura') ?>" class="bottom-payment-buttons" />
<div class="row">
<ul>
<li class="row">
<div id="billing-submit" style="display: none;">
<input type="reset" name="submit-cancel" id="billing-cancel" value="AVBRYT" class="btn-grey" />
<input type="submit" name="submit-payment" id="submit-payment" value="<?php echo $this->__('Bekreft') ?>" class="btn-green" />
</div>
</li>
</ul>
</div>
</div>
</form>
</div>
Without seeing all of your code, it is hard to tell if you would be better off handling this in a different manner, such as:
Use a tab set with each form on a different tab.
Use a single form, but change the form's action based on the radio buttons.
If you really want to use two forms with radio buttons like that, you either have to place the radio buttons outside the forms or handle the selecting/unselecting yourself.
(1) Placing the radio buttons outside the forms.
HTML:
<label><input type="radio" name="formSelect" value="#form1" checked="checked"/>Form 1</label>
<form id="form1" class="form">
<input type="text"/>
</form>
<label><input type="radio" name="formSelect" value="#form2"/>Form 2</label>
<form id="form2" class="form">
<input type="text"/>
</form>
<button type="button" id="submitBtn">Submit</button>
JQuery:
$('#submitBtn').click(function() {
var $form = $($('input[name=formSelect]:checked').val());
alert('submitting form: ' + $form.attr('id'));
//$form.submit();
});
jsfiddle
(2) Handling the selecting/unselecting yourself/.
HTML:
<form id="form1" class="form">
<label><input type="radio" class="formSelect" checked="checked"/>Form 1</label>
<input type="text"/>
</form>
<form id="form2" class="form">
<label><input type="radio" class="formSelect"/>Form 2</label>
<input type="text"/>
</form>
<button type="button" id="submitBtn">Submit</button>
JQuery:
$('.formSelect').change(function() {
$('.form').not($(this).closest('form')).find('.formSelect').prop('checked', false);
});
$('#submitBtn').click(function() {
var $form = $('.formSelect:checked').closest('form');
alert('submitting form: ' + $form.attr('id'));
//$form.submit();
});
jsfiddle
Really, no vanilla JS answer even though OP explicitly mentioned a preference?
Simple as this:
var options = document.getElementsByName('mygroup');
document.body.addEventListener('click', function(e) {
if (e.target.name === 'mygroup') {
for (var i = 0; i < options.length; i++)
options[i].checked = false;
e.target.checked = true;
}
}, false);
See it here: http://jsbin.com/mefibi/1/edit?html,js,output
Most of these answers are almost there and actually provide a path in the right direction..
Since the forms code is a lot more complex than the sample I posted, here's the actual implementation:
$('#payment-with-faktura').on('click', function(){
$('#payment-with-card').removeAttr("checked");
$('.billing-address-list input').each(function() {
$(this).attr({
'disabled': 'disabled'
});
});
$(".col-order-12").slideDown(300);
$(".prepaid-extra-method2").slideDown(300);
if (validateBillingAddress()) {
$(".payment-button-submit").removeAttr("disabled");
} else {
$(".payment-button-submit").attr("disabled", "disabled");
}
});
$('#payment-with-card').on('click', function(){
$('#payment-with-faktura').removeAttr("checked");
$("#payment-details-form").find('input[type="text"]').val("");
$(".prepaid-extra-method2").slideUp(300);
$(".col-order-12").slideUp(300);
if (validateBillingAddress()) {
$(".payment-button-submit").removeAttr("disabled");
} else {
$(".payment-button-submit").attr("disabled", "disabled");
}
});
If I understood correctly, there will be 2 same named radio boxes inside 2 different forms and only one of radio box could be selected at a time. A possible way to achieve this could be like this:
var options = $('form input:radio');
options.click(function() {
options.prop('checked', false);
$(this).prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form><input type="radio" name="opt"/></form>
<form><input type="radio" name="opt" /></form>
It is basically clean all 'selected' state and re-check the clicked one
Related
Hey I am making a simple form. The person just has to select among the two options - Male or female and then if any one radio button is checked, on submit I want the div to be replaced by another div. I've tried to accomplish this with a javascript function, but this doesn't seem to work for me.
<?php
$genderErr = $gender = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["gender"])) {
$genderErr = "<div class='alert'>Please select a gender.</div>";
} else {
?>
<script type="text/javascript">
$(document).ready(function(){
$("#2").css('display', 'block');
$("div#1").replaceWith( $( "#2" ) );
});
</script>
<?php }}
?>
<div id="1">
<h1>Step 1: Choose your gender</h1>
<div>
<form id="genderform" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
<input type="radio" name="gender" value="male" <?php if (isset($gender) && $gender=="male");?>>Male<br />
<input type="radio" name="gender" value="female" <?php if (isset($gender) && $gender=="female");?>>Female<br />
<input form="genderform" id="submit" name="submit" type="submit" value="Submit">
<?php echo $genderErr;?>
</form>
</div>
</div>
<div id="2" style="display:none">
<h1>Step 2:</h1>
</div>
I don't know what I am doing wrong because if I replace the javascript with header("Location:http://example.com"); it works fine.
Okay I found out the issue. Though the same code worked on another script without any issue, probably because it was Bootstrap and already had imported the jquery library. The simple little fix for the whole trouble was adding the jquery library to <head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
Add this function to your script $("#submit").click(function()so when you click the script will trigger.
$("#submit").click(function() {
$("#2").css('display', 'block');
$("div#1").replaceWith( $( "#2" ) );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">
<h1>Step 1: Choose your gender</h1>
<div>
<form id="genderform" action="#" method="post">
<input type="radio" name="gender" value="male"> Male<br />
<input type="radio" name="gender" value="female">Female<br />
<input form="genderform" id="submit" name="submit" type="submit" value="Submit">
</form>
</div>
</div>
<div id="2" style="display:none">
<h1>Step 2:</h1>
</div>
try this
$('#myForm').submit(function(){
var field1 = $("#field1").serialize(); // If this doesn't work just remove the serialize()
var field2 = $("#field2").serialize();
$.ajax({
type: "POST",
url : "???", //your processing page URL instead of ???
data: "&field1="+field1+"&field2="+field2,
success: function(){
$("#formHolder").html("Your static content");
}
});
});
I have been trawling through various examples of radio buttons validation and grasp the concept but no examples seem to fit my situation. I have queried my database which has 4 options and for each option I have generated an associated radio button as below:
<?php foreach($options as $option){ ?>
<p><input type="radio" name="ID<?php echo $row['id']; ?>" value="<?php echo $option; ?>"><?php echo $option; ?></p>
<?php } ?>
So this basically generates 4 radio buttons per row called from the database. This appears in the source as:
<form method="POST" action="Result.php">
<p>1. Question </p>
<p><input type="radio" name="ID1" value="answer1">answer1</p>
<p><input type="radio" name="ID1" value="answer2">answer2</p>
<p><input type="radio" name="ID1" value="answer3">answer3</p>
<p><input type="radio" name="ID1" value="answer4">answer4</p>
<p>2. Question 2</p>
<p><input type="radio" name="ID2" value="answer1">answer1</p>
<p><input type="radio" name="ID2" value="answer2">answer2</p>
<p><input type="radio" name="ID2" value="answer3">answer3</p>
<p><input type="radio" name="ID2" value="answer4">answer4</p>
<input type="submit" name="submit" value="Submit!">
</form>
etc etc.
The names of these radio buttons are partially generated by php, how can I use javascript with an associated alert to check 1 of the radio buttons from each question has been checked prior to submitting the form the questions are populated within?
Or maybe even just how can I achieve this with php ISSET?
Using just JavaScript to verify whether a radio button within a radio group is checked:
function radiogroupSelected(name){
var inputArr = document.getElementsByName(name);
for(var i = 0; i < inputArr.length; i++){
if(inputArr[0].checked){
return true;
}
}
return false;
}
Now you can call this function like radiogroupSelected('ID1') to determine if one of the inputs was selected.
I am using AJAX to get the value of the element chosen in a select input and to launch a PHP script that returns some input checkboxes fields.
Here is what it looks like :
HTML
<form method="post" action="liens_chra.php" name="Form" id="Form">
<label for="id_turbo">Turbo</label>
<select name="id_turbo" size="1" id="id_turbo">
<option value="10970">TM1761178</option>
<!-- and more -->
</select>
<div id="choix_reffab">
<!-- checkboxes appear here -->
</div>
<p class="form ">
<input type="submit" name="valider" value="Enregistrer">
</p>
<!-- something I tried too
<input type="button" id="submitevent" value="Enregister">
<script type="text/javascript" >
$('#submitevent').click(function() {
$("#Form").submit();
});
</script> -->
</form>
JQuery/AJAX
$("#id_turbo").change(function(){
var id_turbo = $("#id_turbo").val();
$.ajax({type: "POST",
url: "<?=URLSITEWEB;?>admin/outils/ajax/liste_Reffab.php",
data: "id_turbo="+id_turbo+"",
error: function(){
/*alert(id_famille+" \n ne passent pas.");*/
},
success: function(data){
$("#choix_reffab").html(data);
}
});
});
PHP
/* things */
foreach ($fabTab as $fab) {
$chaine .= '<input type="checkbox" "name=tabreffab[]" id="'.$fab.'" value="'.$fab.'" /><label for="'.$fab.'">'.$fab.'</label>';
}
echo $chaine;
So, when the user selects a value, some checkboxes appears.
My problem is that the data I want is not transfered to $_POST, and here is the result :
var_dump($_POST['tabreffab']) // is NULL, others values are ok
I'm fairly new to AJAX & JQuery, so I have no idea what to do. I tried submitting the form using JQuery, made no changes.
I got your issues when you return your checkbox your mistake is at name property of element.
In your code "name=tabreffab[]" Replace with name = "tabreffab[]"
$chaine .= ''.$fab.'';
Insted of above write like below code
$chaine .= '<input type="checkbox" name = "tabreffab[]" id="'.$fab.'" value="'.$fab.'" /><label for="'.$fab.'">'.$fab.'</label>';
checkboxes value will display in $_POST[] only on selecting a value
try in a editor
<?php
echo "<pre>";
print_r($_POST);
?>
<form id="sampleName" name ="sampleName" method="post" action="">
<textarea id="testID" name="textAreaName"></textarea>
<input type="text" name="text1" />
<input type="checkbox" name="check" value="1"/>
<input type="checkbox" name="check" value="2"/>
<input type="checkbox" name="check" value="3"/>
<input type="submit" value="submit">
</form>
The problem is in your Ajax call, specifically in the data part. It takes a json formatted object. The right way to write this is data:{id_turbo:"id_turbo_value"} not as what you used - data: "id_turbo="+id_turbo+""
I've read a few questions that meet this description but I'm still struggling. I've read this submit-form-when-checkbox-is-checked-tutorial
Can't seem to get a form to submit when a radiobox is checked. I've tried using .click and .on('change')
Here is my code, the jquery is in a php loop.
<script type="text/javascript">
$(document).ready(function() {
$('input[name=choice-<?php echo $id; ?>]').click(function() {
$('#assessment-form-<?php echo $id; ?>').submit(function(e) {
alert('It works :)');
});
});
});
</script>
<form id="assessment-form-456" method="post" action="">
<ul class="clearfix">
<li><input type="radio" name="choice-456" id="t-456" value="yes">Yes</li>
<li><input type="radio" name="choice-456" id="f-456" value="no">No</li>
<li><input type="radio" name="choice-456" id="na-456" value="na">n/a</li>
</ul>
<input type="submit">
</form>
This is your problem:
$('#assessment-form-<?php echo $id; ?>').submit(function(e) {
alert('It works :)');
});
Instead of submitting the form, you are adding an event listener that will trigger when the form is submitted.
You should not pass any arguments to the function:
$('#assessment-form-<?php echo $id; ?>').submit();
See the jQuery manual; you need the shortcut for the trigger method in order to trigger the form submit.
It attribute values should be wrapped in quotes :
$('input[name="choice-<?php echo $id; ?>]"')
Like this one :
$(document).ready(function() {
$('input[name="choice-456"]').change(function() {
alert('It works :)');
$('#assessment-form-456').submit();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="assessment-form-456" method="post" action="">
<ul class="clearfix">
<li>
<input type="radio" name="choice-456" id="t-456" value="yes">Yes</li>
<li>
<input type="radio" name="choice-456" id="f-456" value="no">No</li>
<li>
<input type="radio" name="choice-456" id="na-456" value="na">n/a</li>
</ul>
<input type="submit">
</form>
I have code form.html and entry.php
First I want to disable textfield with selection box using javascript, then submit it to give an output.
If i not using this code <form name="form1" method="post" action="entry.php"> form.html is success to display in web browser, but how i can submit it with one submit button?
form.html
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$('.group').hide();
$('#option1').show();
$('#chooseForm').change(function() {
$('.group').hide();
$('#'+$(this).val()).show();
})
});
</script>
</head>
<body>
<form name="form1" method="post" action="entry.php">
<select id="chooseForm" name="select">
<option value="option1">Form1</option>
<option value="option2">Form2</option>
<option value="option3">Form3</option>
</select>
<form id="option1" class="group">
<input name="a" value="form A"><br>
</form>
<form id="option2" class="group">
<input name="a" value="form A"><br>
<input name="b" value="form B"><br>
</form>
<form id="option3" class="group">
<input name="a" value="form A"><br>
<input name="b" value="form B"><br>
<input name="c" value="form C"><br>
</form>
<input value="Save" name="submit" type="submit"><br>
</form>
</body>
</html>
entry.php
<?php
$select = $_POST['select'];
$a = $_POST['a'];
$b = $_POST['b'];
$c = $_POST['c'];
echo $select;
echo "<br>";
echo $a;
echo "<br>";
echo $b;
echo "<br>";
echo $c;
?>
Can anyone solve this code without nested form? thanks :)
First of all, you can't nest forms.
As I understand the idea is to group some elements. If so, then replace the interior <form>tags with <div>s.
The other problem is that you want to use the same input elements names through different sections. Basically, if name is not unique, it will get updated with the last occurrence's value. For example:
<input type="text" name="a" value="val 1" />
<input type="text" name="a" value="val 2" />
When the above is posted, $_POST['a'] will contain val 2 value. Even, if the second text-box is hidden. So either you make text-boxes names unique or you disable the ones, which are hidden. disabled attribute will make the control disabled for user input and also not present in $_POST array. So, in this case:
<input type="text" name="a" value="val 1" />
<input type="text" name="a" value="val 2" disabled />
$_POST['a'] will contain val 1 value, because the second text-box is disabled.
In your case, every time you hide a section you should disable all controls within the group. Here's how to do it: disable all form elements inside div.