I want to echo the selected radio button value without using submit button. I want to display the value of radio button when it is selected. Here is the code.
<?php
if(!empty($_GET['a1'])){
$selected = $_GET['a1'];
}
else{
//if no option was selected, set home as default
$selected = 'home';
}
?>
<form action="" method="post">
<input type="radio" name="a1" value="home" /> Home <?php echo ($selected == 'home' ? 'This was selected!' : '');?> </br>
<input type="radio" name="a1" value="site1" /> Site 1 <?php echo ($selected == 'site1' ? 'This was selected!' : '');?> </br>
<input type="radio" name="a1" value="site2" /> Site 2 <?php echo ($selected == 'site2' ? 'This was selected!' : '');?> </br>
</form>
I want the output in the following format
Here is your solution....
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>//jQuery Plugin
<?php
if(!empty($_GET['a1'])){ $selected = $_GET['a1'];}
else{ $selected = 'home';}
?>
<form action="" method="post">
<label>
<input type="radio" name="a1" value="home" /> Home
</label></br>
<label>
<input type="radio" name="a1" value="site1" /> Site 1
</label></br>
<label>
<input type="radio" name="a1" value="site2" /> Site 2
</label></br>
</form>
<span class="r-text"><?php echo $selected;?></span>
<script>
$('input[type=radio]').click(function(e) {//jQuery works on clicking radio box
var value = $(this).val(); //Get the clicked checkbox value
$('.r-text').html(value);
});
</script>
I'm not sure how you want to do a clientside manipulation with PHP(!!!) but this is a jquery solution for displaying the value of radio button when it is selected:
$('#myform input[type=radio]').on('change', function(event) {
var result = $(this).val();
$('#result').html(result);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" action="" method="post">
<input type="radio" name="a1" value="home" /> home</br>
<input type="radio" name="a1" value="site1" /> site1</br>
<input type="radio" name="a1" value="site2" /> site2</br>
<div id="result"></div>
</form>
You need to use the onchange event of the radio buttons with javascript/jquery.
PHP runs server-side, not client-side, so without sending client-side changes to the server, it can't output stuff based on them: you'd need to send a $_POST or a $_GET request, either by submitting the form or using AJAX. Not necessary for this.
<div id="radioMsg"></div>
<form action="" method="post">
<input type="radio" name="a1" value="home" onchange="showRadio()" /> Home <?php echo ($selected == 'home' ? 'This was selected!' : '');?> </br>
<input type="radio" name="a1" value="site1" onchange="showRadio()" /> Site 1 <?php echo ($selected == 'xyz' ? 'This was selected!' : '');?> </br>
<input type="radio" name="a1" value="site2" onchange="showRadio()" /> Site 2 <?php echo ($selected == 'zbc' ? 'This was selected!' : '');?> </br>
</form>
Meanwhile in showRadio():
function showRadio(){
var radioVal = $("input[name='a1']:checked").val();
if(radioVal) {
$( "#radioMsg" ).html("<p>"+radioVal+"</p>");
}
}
I'm not sure where you want the changed button's value outputted, so I'm putting it into that div just as an example.
To define the onchange event in an external stylesheet instead of inline:
$( "input[name='a1']" ).change(function(){
... (showRadio's contents go here)
});
Related
I am trying to update the url Parameters based on the input selected of the form.
<form method="get" action="current.php" id="header-form">
<input type="hidden" name="location" value="location">
<input type="checkbox" name="type[]" class="type" value="opt1"> option1
<input type="checkbox" name="type[]" class="type" value="opt2"> option2
<input type="checkbox" name="type2[]" class="type1" value="new1"> new1
<input type="checkbox" name="type2[]" class="type1" value="new2"> new2
</form>
Jquery
By selecting the checkbox i want to append the values to the URL
My Jquery
<script type="text/javascript">
$(document).ready(function() {
$(".type").change(function () {
$("#header-form").trigger("submit");
});
$(".type1").change(function() {
$("#header-form").trigger("submit");
});
});
</script>
If i select option1 it works fine and if i try to select the option 2, it removes the option 1 from the URL.
If i select the option 1 & option 2
URL Should be -> http://localhost.current.php?type=option1&option2
And if i select all the values option1 & option 2 and new 1 & new 2
URL Should be -> http://localhost.current.php?type=option1&option2?type1=new1&new2
And if i select the values option1 & new 1 & new 2
URL Should be -> http://localhost.current.php?type=option1?type1=new1&new2
You must keep the previous submit data.
do this with PHP:
<form method="get" action="current.php" id="header-form">
<input type="hidden" name="location" value="location">
<input type="checkbox" name="type[]" <?php if(isset($_GET['type']) && in_array('opt1', $_GET['type'])): ?>checked<?php endif; ?> class="type" value="opt1"> option1
<input type="checkbox" name="type[]" <?php if(isset($_GET['type']) && in_array('opt2', $_GET['type'])): ?>checked<?php endif; ?> class="type" value="opt2"> option2
<input type="checkbox" name="type2[]" <?php if(isset($_GET['type2']) && in_array('new1', $_GET['type2'])): ?>checked<?php endif; ?> class="type1" value="new1"> new1
<input type="checkbox" name="type2[]" <?php if(isset($_GET['type2']) && in_array('new2', $_GET['type2'])): ?>checked<?php endif; ?> class="type1" value="new2"> new2
</form>
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 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 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
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.