In my code having two radio buttons in form like
<input type="radio" required="required" id="bt" name="bt" value="1" checked="checked" onclick="window.location='<?php echo $_SERVER['REQUEST_URI']; ?>';" /> <span>Test1</span>
<input type="radio" required="required" id="bt" name="bt" onclick="Clear()" value="2" /> <span>Test2</span>
when i click on Test2 radio button the form having value will clear, for that i wrote code its working fine
<script>
function Clear() {
document.getElementsByName("one")[0].value = "";
document.getElementsByName("two")[0].value = "";
document.getElementsByName("three")[0].value = "";
}
</script>
with this form with values cleared.But when i click on "Test1" radio button the form values will come automatically.right now iam sessions using
onclick="window.location='<?php echo $_SERVER['REQUEST_URI']; ?>';"
for this it is coming but page is refreshing how to take it this code to ajax, i mean need to get values when i click on radio button without refreshing the page
Yes you can use window.location.href in ajax as:
$.ajax({
type: 'POST',
async: false,
url: '/users',
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify(payload),
success: function(data, textStatus, jqXHR){
console.log(jqXHR.status);
window.location.href= "/someUrl.html";
}
});
Note that: window.location.href will not reload the page if there's an anchor (#) in the URL
Here i wrote code for getting values of radio button without page refresh:
html code:
<input type="radio" name="bt" id="bt" onclick = "MyAlert()" value="blue"/>Blue <br/>
<input type="radio" name="bt" id="bt" onclick = "MyAlert()" value="red"/>Red
ajax script:
function MyAlert() {
var radio =$('input[type="radio"]:checked').val();
var pass_data = {
'radio' : radio,
};
$.ajax({
url : "radio-value.php",
type : "POST",
data: pass_data,
success : function(data) {
// alert radio value here
alert(data);
}
});
return false;
}
radio-value.php file:
<?php echo $bt =$_POST['radio']; ?>
Hope this helps.
Related
I am struggling to have multiple AJAX submitted forms on the same php page. I can get it to work with one, but when I add more, it just uses the first form all the time.
I have tried to make it unique but not sure exactly how to do this.
My code is below, if someone could please assist that would be fantastic.
I have looked at similar questions and answers on this site but can't seem to fathom how to make it work for mine.
The form should submit when the checkbox is checked or unchecked.
Thanks very much in advance for all your help.
Martyn.
HTML form
<form id="search_form" method="post">
<input readonly type="text" name="id" value=<?php echo $row1[0];?>>
<input readonly type="text" name="student" value=<?php echo $row1[1];?>>
<input readonly type="text" name="addedby" value=<?php echo $_SESSION['username'];?>>
<input readonly type="text" name="register" value="monday_morning">
<input <?php if($row1[4] == "Yes"){echo "checked";}?> type="checkbox" name="box" value="Yes">
</form>
Script
<script type="text/javascript">
$(document).on("change", '[type="checkbox"]', function () {
var url = "/register_update.php";
$.ajax({
dataType: "html",
type: "POST",
url: url,
data: $("#search_form").serialize(),
success: function (data) {
}
});
return false;
});
</script>
Try this
<script type="text/javascript">
$(document).on("change", '[type="checkbox"]', function (event) {
var url = "/register_update.php";
$.ajax({
dataType: "html",
type: "POST",
url: url,
data: $($(event.target).parent()).serialize(),
success: function (data) {
}
});
return false;
});
</script>
event.target returns the clicked checkbox.
parent() function returns the form you need to submit. This way you don't need to have unique form id.
Hello I want to call my function download when the user click on the button, basically:
<input type='button' name='Release' onclick="document.write('<?php downloadFichier($tab1, $t2) ?>');" value='Click to Release'>
Of course doesn't work, so I try to do with a AJAX, I don't know this language, but it is possible to do what I want: call my PHP function with 2 parameters?
<button type="button">Click Me</button>
<p></p>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$.ajax({
type: 'POST',
url: 'file_product.php',
success: function(data) {
$("p").text(data);
}
});
});
});
</script>
Thank you for helping me.
You should call a js-function with onclick event like this:
<input type='button' name='Release' onclick="downloadFichier(param1, param2)" value='Click to Release'>
And your AJAX-function should be like this:
function downloadFichier(param1, param2){
$.ajax({
type: 'POST',
url: 'file_product.php',
data: "param1=" + param1 + "¶m2=" + param2,
success: function(data) {
$("p").text(data);
}
});
You can get your params in PHP-script from the $_REQUEST array by their names (param1, param2).
#PaulBasenko inspired this alternative, where you set the parameters through some <input type="hidden" /> :
HTML
<form action="#" method="POST" id="form1">
<input type="hidden" name="tab1" value="<?= $tab1 ?>" />
<input type="hidden" name="t2" value="<?= $t2 ?>" />
<button type="submit">Click to Release</button>
</form>
Javascript
$(function() { // equivalent of "$(document).ready(function(){"
$('body').on('submit', '#form1', function(event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
type : 'POST',
url : 'file_product.php',
data : formData,
success : function(data) {
$('#p').text(data);
}
});
});
});
PhP
<?php
$tab1 = (isset($_POST['tab1'])) ? $_POST['tab1'] : null;
$t2 = (isset($_POST['t2'])) ? $_POST['t2'] : null;
// process & return json_encoded data
?>
How it works ?
When clicking on the button, which is a type="submit", it will trigger the submit event for its parent form. Then, jQuery listen to this event and immediately blocks it using èvent.preventDefault() in order to call Ajax instead of a regular synchronous call to a php file.
On my page1.php I want to toggle the visibility of the page2.php.
I am using the following code:
<input type="radio" name="city" value="Barcelona" onclick="getPage2(this.value);"> Barcelona
<input type="radio" name="city" value="Manchester"> Manchester
I call the page2.php using this code:
function getPage2()
{
$.ajax({
type: "GET",
url: "page2.php",
success: function(result){
$("#show_results").html(result);
}
});
};
I want to show the page2.php only if the radio button is selected and show nothing (Hide it) if none of the radio buttons, or the 'Machester' radio button is selected.
UPDATE
I solved it. It was actually very easy.
<input type="radio" name="city" value="Barcelona" onclick="getPage2(this.value);"> Barcelona
<input type="radio" name="city" value="Manchester" onclick="getPage2(this.value);"> Manchester
I show and I hide the page2.php using this code:
function getPage2()
{
var var_name = $("input[name='city']:checked").val();
$.ajax({
type: "GET",
url: "page2.php",
success: function(result){
if(var_name == "Barcelona")
$("#show_results").html(result).show();
else
$("#show_results").html(result).hide();
}
});
};
Thank guys anyway.
You can use a JQuery selector for that :
$('input').click(function(){
$('input').show(); // Show all inputs
$(this).hide(); // Hide the clicked input
$.ajax({
type: "GET",
url: "page2.php",
success: function(result){
$("#show_results").html(result);
}
});
})
Of course, this works only for a page with those inputs only.
You should have classes or IDs to your radios to target them directly with the selector.
You will have something like this :
$('.radio-page').click(function(){ // ...
You could just load the hide-able content WITH the original page. That way you can avoid the ajax call.
<input class="radios" type="radio" name="city" value="Barcelona"> Barcelona
<input class="radios" type="radio" name="city" value="Manchester"> Manchester
<div id="content" style="display:none">Hide-able content</div>
And then just have the script make it appear when Barcelona is selected.
$("input[type='radio']").click(function()
{
if($(this).val() == "Barcelona") $("#content").show();
else $("#content").hide();
});
HTML
<input type="checkbox" name=options[cid]" value='1'
onChange="chkdeptCount(this.value)" class="test">
<input type="checkbox" name=options[cid]" value='2'
onChange="chkdeptCount(this.value)" class="test">
jquery:
function chkdeptCount(val){
$.ajax({ url: '../ajax/AjaxCall.php',
data: {Action:'IMPLODEARRAY',arrVal: val},
type: 'post',
success: function(output) {
alert(output);
$('.result').html(output);
}
});
}
PHP:
if($_POST['Action']=='IMPLODEARRAY'){
$arr_val[] = $_POST['arrVal'];
print_r($arr_val);
}
When I run this code does not return array value. It returns a single value WHY?
Note that, you are missing the quote here name=options[cid]".
And you are using onChange="chkdeptCount(this.value)" event with current value this, this will only return one value at once.
This is very basic Example:
HTML:
<form method="post" id="formID" action="">
<input type="hidden" name="Action" value="IMPLODEARRAY">
<input type="checkbox" name="options[cid]" value='1' class="test">
<input type="checkbox" name="options[cid]" value='2' class="test">
<input type="submit" name="submit" value="Submit" id="SubmitButton">
</form>
AJAX:
<script type="text/javascript">
$(document).ready(function(){
$("#SubmitButton").click(function(){ // when submit button press
var data = $("#formID").serialize(); // get all form input in serialize()
$.ajax({
url: YourURL, // add your url here
type: "POST", // your method
data: data, // your form data
dataType: "json", // you can use json/html type
success: function(response) {
console.log(response); // your response
},
beforeSend: function()
{
// if you want to display any loading message
}
}); // JQUERY Native Ajax End
return false;
});
});
</script>
PHP:
<?php
if(count($_POST) > 0){ // if you have some value in AJAX request
if($_POST['Action'] == 'IMPLODEARRAY'){ // your condition
print_r($_POST['options']); // get all checkbox value.
}
}
?>
Few more example will help you to understand, you can you use: Submitting HTML form using Jquery AJAX |
jQuery AJAX submit form
I have several places that's returning empty and I am not sure why.
One place is using ajax. When an user clicks on the radio button, the value Y or N is sent upon clicking the radio button. When I go to my controller and do echo $_POST['vote']; it is always returning an empty value.
var value = $(this).val();
$.ajax( {
type: "POST",
url: url,
data: {'vote':value},
success: function(data){
alert(data);
}
})
Another place is when i do an ajax upload on a file using a form. On change of the upload field, it always return empty as well. So when I tried isset$_POST[Image] I am always getting a blank. It sees that all my file upload instance is blank.
So what would be the cause of these blanks? I also tried $_GET doesn't help much.
*****[EDIT]*********
<form id="vote-form" action="/some/path?r=shop/vote" method="post">
<input id="ytvote" type="hidden" value="" name="vote[hot_not]">
<span id="vote_hot_not">
<input class="fire-toggle" value="Y" type="radio" name="Vote[hot_not]" data-radio-fx="Vote[hot_not]" style="display: none;"><a title=" " data-radio-fx="Vote[hot_not]" class="radio-fx" href="#"><span class="radio"></span></a>
<label style="display:inline" for="Vote_hot_not_0"><img src=" /images/site/red-hot-not.png" id="hot-i"> </label>
<!--input class… fire-toggle-->
<input class="fire-toggle" value="N" type="radio" name="Vote[hot_not]" data-radio-fx="Vote[hot_not]" style="display: none;"><a data-radio-fx="Vote[hot_not]" class="radio-fx" href="#"><span class="radio"></span></a> <label style="display:inline" for="Vote_hot_not_1"><img src=” /images/site/hot-not.png" id="not-i"></label></span>
</form>
Now in my fire-toggle I have:
$(".fire-toggle").click(function() {
var value = $(this).val();
var url = "<?php echo Yii::app()->createUrl('shop/vote');?>";
$.ajax( {
type: "POST",
url: url,
data: {'vote':value},
success: function(data){
alert(data)
}
})
});
So value actually gives me the expected value..
and here in the controller... I simplified everything down to this:
$pid =Yii::app()->request->getQuery('id');
$uid = yii::app()->user->user_id;
$model = PrototypeReview::model()->getUserVote($uid, $pid);//also tried hard code numbers
$response = $_POST['vote']; //there's nothing in here!
echo $_POST['vote'];