Pass only one radio button value without page refresh

Question

Albert Pinto 0 Newbie Poster

12 Years Ago

Hi People,

Got some issue with radio buttons...

I want to pass the form details WITHOUT PAGE REFRESH....

I have a textbox and 2 radio buttons with values Subscribe and Unsubscribe and a submit button.
The user has to enter his E-mail id in the given textbox and select either one radio button(Subscribe or Unsubscribe) and click on submit..

Front End code:

<head>
    <script src="js/jquery-1.2.3.pack.js"></script>
    <script src="js/tutorial.js"></script>
</head>

<div id="subscribecontainer">
<form action="" name="subscribeemail">


<input type="text" name="email" id="email" class="subscribeinp" value="Please Enter Your Email Address...." onclick="if(this.value=='Please Enter Your Email Address....'){this.value=''}" onblur="if(this.value==''){this.value='Please Enter Your Email Address....'}">
<label class="subscripterror" for="email" id="email_error">This field is required.</label>
<br/>
<br/>
<span class="radiobtn">
<input type="radio" name="subs" id="subs" value="Subscribed" checked="checked">Subscribe &nbsp;&nbsp;&nbsp;
<input type="radio" name="subs" id="unsubs" value="Unsubscribed">Unsubscribe &nbsp;&nbsp;&nbsp;
<input type="button" value="Submit" class="subscribebtn" id="submit_btn">
</span>
</form>
</div>

tutorial.js code contains:

$(function() {
$('.subscripterror').hide();
$('input.text-input').css({backgroundColor:"#FFFFFF"});
$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#FFDDAA"});
});
$('input.text-input').blur(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});

$(".subscribebtn").click(function() {
// validate and process form
// first hide any error messages
$('.subscripterror').hide();


var email = $("input#email").val();
if (email == "Please Enter Your Email Address....") {
$("label#email_error").show();
$("input#email").focus();
return false;
}

var sub = $("input#subs").val();

var unsub = $("input#unsubs").val();

var dataString = 'email='+ email + '&sub='+ subs + '&unsubs='+ unsubs;
//alert (dataString);return false;

$.ajax({
type: "POST",
url: "subsinsert.php",
data: dataString,
success: function() {
$('#subscribecontainer').html("<div id='subscribecontainer'></div>");
$('#subscribecontainer').html("<h2>Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#subscribecontainer').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
});
});
runOnLoad(function(){
$("input#name").select().focus();
});

PROBLEM IS I WANT ONLY VALUE OF RADIO BUTTON TO BE PASSED... BUT ITS PASSING BOTH THE VALUES

Subscribed AND Unsubscribed

How to pass only one id...??

javascript

2 Contributors
7 Replies
2K Views
6 Days Discussion Span
Latest Post 12 Years Ago Latest Post by kalpanakovuru

kalpanakovuru 0 Newbie Poster

12 Years Ago

Hi Albert,

We wil use Radio button for single selection, so we need to use same id/name for that buttons. If we have other catogery radio buttons then we can use other id/name.

Use same name to both inputs then u will get single value.

example :

<input type="radio" name="subs" id="subs" value="Subscribed" checked="checked">Subscribe

</input>
<input type="radio" name="subs" id="subs" value="Unsubscribed">Unsubscribe</input>

Then get the value buy using :
var sub = $("input#subs").val();

kalpanakovuru 0 Newbie Poster

12 Years Ago

Hi Albert,

Submit buttom will submit entire the page, So use normal button and use event Onclick event and call that Ajax method in this event then page won't refresh.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Albert Pinto 0 Newbie Poster · Answer 1 · 2012-06-26T04:59:25+00:00

Thanx Kalpana ji.....

Actually I had tried that before,

But it was giving me value as Subscribed... no matter which radio button I select out of the two...

Anyways I managed to rectify it by inserting this piece of code...

var subscrbd = $('input[name=subsunsubs]:radio:checked').val();

So now it is:

// In front end:

<div id="subscribecontainer">
<form action="" name="subscribeemail">

<input type="text" name="email" id="email" class="subscribeinp" value="Please Enter Your Email Address...." onclick="if(this.value=='Please Enter Your Email Address....'){this.value=''}" onblur="if(this.value==''){this.value='Please Enter Your Email Address....'}">
<label class="subscripterror" for="email" id="email_error">This field is required.</label>
<br/>
<br/>
<span class="radiobtn">
<input type="radio" name="subsunsubs" id="subs" value="Subscribed" checked="checked">Subscribe &nbsp;&nbsp;&nbsp;
<input type="radio" name="subsunsubs" id="unsubs" value="Unsubscribed">Unsubscribe &nbsp;&nbsp;&nbsp;
<input type="submit" value="Submit" class="subscribebtn" id="submit_btn">
</span>
</form>
</div>

And in js file it is..................................

$(function() {
$('.subscripterror').hide();
$('input.text-input').css({backgroundColor:"#FFFFFF"});
$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#FFDDAA"});
});
$('input.text-input').blur(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});

$(".subscribebtn").click(function() {
$('.subscripterror').hide();


var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}

var subscrbd = $('input[name=subsunsubs]:radio:checked').val();

var dataString = 'email='+ email + '&subs='+ subscrbd;
//alert (dataString);return false;

$.ajax({
type: "POST",
url: "subsinsert.php",
data: dataString,
success: function() {
$('#subscribecontainer').html("<div id='subscribecontainer'></div>");
$('#subscribecontainer').html("<h4>Thank You!</h4>")
.append("<p>Your query will be processed soon.</p>")
.hide()
.fadeIn(1500, function() {
//$('#subscribecontainer').append("<img id='checkmark' src='images/check.png' />");
$('#subscribecontainer');
});
}
});
return false;
});
});

Its now selecting only one radio value, But now my problem is...

THE BACKEND FILE subinsert.php is not at all getting executed..

It is supposed to take the text box value(email address) and the Radio button value (Subscribed or Unsubscribed) and insert into "subscription" table

subscription table has only 3 columns

subscriptionid Email and Subscribe (The last column subscribe contains the value of the radio button... It can be either Subscribed or Unsubscribed)

Problem is, it won't execute my backend php file(subinsert.php) and Subscribe status won't get updated, neither new entries are getting added...

Back end does work in the normal method of <form action="subinsert.php" method="post"> but that will lead to next page..

I mean the requirement is, there shouldn't be any page refresh........

Sorry for the lengthy post.

Albert Pinto 0 Newbie Poster · Answer 2 · 2012-06-26T06:00:42+00:00

I modified it to......

and in the page itself in the <head> section defined that function...

So now my front end is like...

<script src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript">
function myfunction(){
$('.subscripterror').hide();
$('input.text-input').css({backgroundColor:"#FFFFFF"});
$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#FFDDAA"});
});
$('input.text-input').blur(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});

$(".subscribebtn").click(function() {
// validate and process form
// first hide any error messages
$('.subscripterror').hide();


var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}

var subscrbd = $('input[name=subsunsubs]:radio:checked').val();

var dataString = 'email='+ email + '&subs='+ subscrbd;
alert (dataString);return false;

$.ajax({
type: "POST",
url: "subsinsert.php",
data: dataString,
success: function() {
$('#subscribecontainer').html("<div id='subscribecontainer'></div>");
$('#subscribecontainer').html("<h4>Thank You!</h4>")
.append("<p>Your query will be processed soon.</p>")
.hide()
.fadeIn(1500, function() {
//$('#subscribecontainer').append("<img id='checkmark' src='images/check.png' />");
$('#subscribecontainer');
});
}
});
return false;
});
}
</script>



<div id="subscribecontainer">
<form action="" name="subscribeemail">

<input type="text" name="email" id="email" class="subscribeinp" value="Please Enter Your Email Address...." onclick="if(this.value=='Please Enter Your Email Address....'){this.value=''}" onblur="if(this.value==''){this.value='Please Enter Your Email Address....'}">
<label class="subscripterror" for="email" id="email_error">This field is required.</label>
<br/>
<br/>
<span class="radiobtn">
<input type="radio" name="subsunsubs" id="subs" value="Subscribed" checked="checked">Subscribe &nbsp;&nbsp;&nbsp;
<input type="radio" name="subsunsubs" id="unsubs" value="Unsubscribed">Unsubscribe &nbsp;&nbsp;&nbsp;
<input type="button" value="Submit" class="subscribebtn" id="submit_btn" onclick="myfunction()">
</span>
</form>
</div>

But still it won't work..... neither its inserting any data in database... nor that fadinf message is coming now... :(

kalpanakovuru 0 Newbie Poster · Answer 3 · 2012-06-26T08:37:50+00:00

Hi Albert,

I dont know PHP and dot net.

Ur ajax call isworking correctly? The parameters are cumming in to ur ajax class or its throughing any exeption,

you can have exeption block or failuer block for that ajax call then u can get to know wheather its working corretly or any exeption is ther.

Albert Pinto 0 Newbie Poster · Answer 4 · 2012-06-28T04:19:43+00:00

I still can't get it maam...

All i wanna know is how to get my php file executed through this method of no page refresh...

This part of the code does specify name of my backend php file... but still it won't execute it..

$.ajax({
type: "POST",
url: "subsinsert.php",
data: dataString,
success: function() {
$('#subscribecontainer').html("<div id='subscribecontainer'></div>");
$('#subscribecontainer').html("<h4>Thank You!</h4>")
.append("<p>Your query will be processed soon.</p>")
.hide()
.fadeIn(1500, function() {
//$('#subscribecontainer').append("<img id='checkmark' src='images/check.png' />");
$('#subscribecontainer');
});

kalpanakovuru 0 Newbie Poster · Answer 5 · 2012-07-02T10:29:02+00:00

If you use ajax the page wont get refresh.

In the URL you can give full path of ur server.

url: "subsinsert.php",
url: "http://hostname:port/applicationname/actionname",

here actionname is subsinsert.php

Your query will be pr