This question already has answers here:
Prevent users from submitting a form by hitting Enter
(36 answers)
Closed 8 years ago.
i am trying to disable the enter keypress in a form inside a joomla module but i cannot get it to work... This is the code is have.
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>
<form id="searchbox" action="<?php echo JRoute::_('index.php'); ?>" method="post" role="search">
<input type="text" value="" name="searchword" placeholder="<?php echo JText::_('TPL_WARP_SEARCH'); ?>" />
<button type="reset" value="Reset"></button>
<input type="hidden" name="task" value="search" />
<input type="hidden" name="option" value="com_search" />
<input type="hidden" name="Itemid" value="<?php echo $itemid > 0 ? $itemid : JRequest::getInt('Itemid'); ?>" />
</form>
<script src="<?php echo $warp['path']-> url('js:search.js'); ?>"></script>
<script>
jQuery(function($) {
$('#searchbox input[name=searchword]').search({'url': '<?php echo JRoute::_("index.php?option=com_search&tmpl=raw&type=json&ordering=& searchphrase=all");?>', 'param': 'searchword', 'msgResultsHeader': '<?php echo JText::_("TPL_WARP_SEARCH_RESULTS"); ?>', 'msgMoreResults': '<?php echo JText::_("TPL_WARP_SEARCH_MORE"); ?>', 'msgNoResults': '<?php echo JText::_("TPL_WARP_SEARCH_NO_RESULTS"); ?>'}).placeholder();
});
</script>
I tried different scripts but no luck so far...
Use event.preventDefault() it prevent default action of the event.
http://api.jquery.com/event.preventDefault/
("input").live("keypress", function(e) {
if (e.keyCode == 13) {
event.preventDefault();
return false; // prevent the button click from happening event.preventDefault() or return false, either one is enough
}
});
Change this in html search button :
<input type="text" class="searchButton" value="" name="searchword" placeholder="<?php echo JText::_('TPL_WARP_SEARCH'); ?>" />
Then in script :
$(".searchButton").click(e){
if (e.keyCode == 13) {
return false; // prevent the button click from happening
e.preventDefault(); // prevent default html form submit
}
}
Related
I have working code for posting data to DB using PHP and Jquery without refreshing the page.
But however, I could only use 1 form with the given code, if I'm to add another form with different variables both the forms getting submitted.
My code goes as:
index:
Query starts
$countlikes = 1;
$countdislikes = 1;
<form data-id='<?= $countlikes?>' action="likeinsert" method="post" id="myform<?= $countlikes?>">
<input type="hidden" id="fid<?= $countlikes?>" name="fid" value="<?php echo $f_id; ?>" />
<input type="hidden" id="uid<?= $countlikes?>" name="uid" value="<?php echo $u_id; ?>" />
<button style="border:none; background:transparent;" data-toggle="tooltip" data-placement="right" title="Like" class="up"><i class="fa fa-thumbs-o-up"></i><?= $f_likes; ?></button>
</form>
<form data-id='<?= $countdislikes?>' action="dislikeinsert" method="post" id="myform<?= $countdislikes?>">
<input type="hidden" id="fid<?= $countdislikes?>" name="fid" value="<?php echo $f_id; ?>" />
<input type="hidden" id="uid<?= $countdislikes?>" name="uid" value="<?php echo $u_id; ?>" />
<button style="border:none; background:transparent;" data-placement="right" data-html="true" title="DisLike" class="down"><i class="fa fa-thumbs-o-down"></i><?= $f_dislikes; ?></button>
</form>
$countlikes ++;
$countdislikes ++;
Query Ends
<script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
$(document).on('submit','form',function(e){
e.preventDefault();
let id = $(this).data('id');
$.post(
'likeinsert.php',
{
fid: $("#fid"+id).val(),
uid: $("#uid"+id).val()
},
function(result){
if(result == "success"){
$("#result").val("Values Inserted");
} else {
$("#result").val("Error");
}
}
);
});
</script>
<script>
$(document).on('submit','form',function(e){
e.preventDefault();
let id = $(this).data('id');
$.post(
'dislikeinsert.php',
{
fiid: $("#fid"+id).val(),
uiid: $("#uid"+id).val()
},
function(result){
if(result == "success"){
$("#result").val("Values Inserted");
} else {
$("#result").val("Error");
}
}
);
});
</script>
When I to click on any form button, both forms are getting submitted.
It is happening, because you are adding two submit event listeners on both forms, so when you submit one form, both jquery scripts are getting executed.
To prevent this, add form's unique ids to your event listeners (in your case they are myform1 and myform1, but you should make them unique), somewhat like this:
$(document).on('submit','form#dislikesForm',function(e){
request to dislikeinsert.php ...
$(document).on('submit','form#likesForm',function(e){
request to likeinsert.php...
I have this line of code
<html>
<head></head>
<body>
<script>
$(document).ready(function(){
$("#update").click(function(){
$("#id2").css("display","hidden");
var r = $("#id2").val()+1;
$("#id2").val(r);
});
});
</script>
<title>CV Education Form</title>
.
.
.
.
</fieldset>
<input type="text" name="id" id="id2" value="<?php echo ($id == 0 ? 1 : $id );?>"/>
<input type="submit" value="Update" name="submit"/>
</form>
</body>
</html>
and I want to change it to hidden so it is invisble but also when i click on a button update (which I have it) then it increments the value ($id) ... More simple i want something like that id+1.
Do you know how can I do that?
When I click on update button i want the 1 which is the $id to become $id+1 but I dont want to add myself I want to do it automatically when i click the update button and also hide the textfield
Just specify the update button id and id of the inputs. Use the code below
<html>
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#update").click(function(){
$("#id2").css("display","none");
var r = parseInt($("#id2").val(),10)+1;
$("#id2").val(r);
});
});
</script>
<title>CV Education Form</title>
.
.
.
.
</fieldset>
<input type="text" name="id" id="id2" value="<?php echo ($id == 0 ? 1 : $id );?>"/>
<input type="submit" value="Update" id="update" name="submit"/>
</form>
</body>
</html>
Check it here
http://jsfiddle.net/53cov3uq/3/
Hope this helps you
you can do it very simply using either Jquery or JavaScript .find the code below
function update()
{
var count=parseInt($('#counter').val());
$('#counter').val(count+1);
alert($('#counter').val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="hidden" id="counter" name="id" value="0"/>
<button onclick="update()">update</button>
i just kept alert at the end that will popup the current value of the id.
try this,
<script type="text/javascript">
function increment_val(){
var id_val = parseInt(document.getElementById('id').value);
id_val++;
document.getElementById('id').value=id_val;
}
</script>
and in button html call js function,
<input type="button" value="update" id="btn_id" onclick="increment_val();"/>
For that use javascript. Php is server-side script.
<script type="text/javascript">
function increment()
{
var elem = document.getElementById("hiddenElement");
elem.value = 1 + parseInt(elem.value);
}
</script>
<input type="hidden" id="hiddenElement" name="id" value="0" />
<button onclick="increment()">Click me</button>
You can use below code which increments the value on click of a button.
<button onclick="document.getElementById('id').value = document.getElementById('id').value + 1;">Update</button>
HTML
<input type="text" name="id" value="<?php echo ($id == 0 ? 1 : $id );?>" />
To change input type you can use the syntax like:
$("#id").attr('type','hidden');
To increment the value use
document.getElementById('id').value=parseInt(document.getElementById('id').value)+1;
or using jquery
$("#id").val($("#id").val()+1);
Hope it helps.
try this if you want to change text to hidden element and increment value
HTML Code:
<input type="text" name="id" value="<?php echo ($id == 0 ? 1 : $id );?>" />
<button onclick="increment_value()">Update</button>
JS:
function increment_value()
{
var txt_field = document.getElementsByName("id")[0];
txt_field.value = parseInt(txt_field.value) + 1;
txt_field.setAttribute("type", "hidden");
}
OR
If you want to simply hide the text field just use this version of the above function
function increment_value()
{
var txt_field = document.getElementsByName("id")[0];
txt_field.value = parseInt(txt_field.value) + 1;
txt_field.style.display = "none";
}
<input type="hidden" name="id" id="id" value="<?php echo ($id == 0 ? 1 : $id );?>" />
Jquery
$(function(){
$("button").click(function(){
$("#id").val($("#id").val()+1);
})
})
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
I'm not very good at jQuery. I have to show a form in the code below, but it seems jquery (or Javascript) keeps the code hidden.
The sample output is inhttp://210.48.94.218/~printabl/products/business-cards/. If you click the "CONTINUE" button in the page.
<?php
/**
* Template Name: Contact Page
*
* Description: Twenty Twelve loves the no-sidebar look as much as
* you do. Use this page template to remove the sidebar from any page.
*
* Tip: to remove the sidebar from all posts and pages simply remove
* any active widgets from the Main Sidebar area, and the sidebar will
* disappear everywhere.
*
* #package WordPress
* #subpackage Twenty_Twelve
* #since Twenty Twelve 1.0
*/
get_header(); ?>
<div id="primary" class="site-content">
<div id="content" role="main">
<script type="text/javascript">
var x1 = 5;
var x2 = 10;
var value = x1 * x2;
var list_value = 1;
var size, fold, back, front, qlnt, qlt, tprice;
</script>
<div id="jdModal">
<div id="jdModalContent" style="padding:10px;background:#fff;">
<form id="product_form" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data">
<input type="hidden" name="size" value="0" />
<input type="hidden" name="fold" value="0" />
<input type="hidden" name="back" value="0" />
<input type="hidden" name="front" value="0" />
<input type="hidden" name="qlnt" value="0" />
<input type="hidden" name="qlt" value="0" />
<input type="hidden" name="tprice" value="0" />
<input type="hidden" name="productName" value="Business Card" />
<h2>CONTACT US</h2>
<div><label>Business Name*</label><input type="text" name="businessName" value="" /></div>
<div><label>Your Name*</label><input type="text" name="yourName" value="" /></div>
<div><label>Email*</label><input type="text" name="yourEmail" value="" /></div>
<div><label>Phone*</label><input type="text" name="yourPhone" value="" /></div>
<div><label>Delivery Region*</label><input type="text" name="deliveryRegion" value="Christchurch" /></div>
<div><label>Employees</label><input type="text" name="employees" value="1-5 staff members in my business" /></div>
<div><label> </label><p class="note">If required please upload your files here (2 MB max).</p></div>
<div style="position:relative"><label>Upload file</label><input type="hidden" value="" id="jd_upload_uri_1" name="jd_upload_uri_1" /><input type="text" class="jd_upload_filename" name="jd_upload_file_1" readonly="readonly" /><input type="button" class="jd_upload" id="jd_upfile_1"value="Browse ..." />
</div>
<div style="position:relative"><label>Upload file</label><input type="hidden" value="" id="jd_upload_uri_2" name="jd_upload_uri_2" /><input type="text" class="jd_upload_filename" name="jd_upload_file_2" readonly="readonly" /><input type="button" class="jd_upload" id="jd_upfile_2" value="Browse ..." />
</div>
<div style="position:relative"><label>Upload file</label><input type="hidden" value="" id="jd_upload_uri_3" name="jd_upload_uri_3" /><input type="text" class="jd_upload_filename" name="jd_upload_file_3" readonly="readonly" /><input type="button" class="jd_upload" id="jd_upfile_3" value="Browse ..." />
</div>
<div><label>Message</label><textarea name="msg"></textarea></div>
<div><label>I'm also interested in</label><p><input type="checkbox" name="interests[]" value="Business Cards" /><span>Business Cards</span><input type="checkbox" name="interests[]" value="Flyer" /><span>Flyer</span></p></div>
<div style="margin-bottom:15px"><label> </label><p><input type="checkbox" name="interests[]" value="Booklets" /><span>Booklets</span><input type="checkbox" name="interests[]" value="Postcards" /><span>Postcards</span></p></div>
<div><label> </label><p class="note">To help us fight spam, please type the characters you see below.</p></div>
<div class="captcha_fix"><label> </label><p style="text-align:right"><input type="submit" value=" " name="productOrderForm" class="submit-product" /><input type="text" name="jd_captcha" class="jd_captcha" value="" maxlength="6" /><img src="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php?captcha" class="jd_captcha_img" /></p></div><div id="jd_msg_box"><p class="text"></p></div>
<div style="clear:both"></div>
</form>
</div>
</div>
<iframe name="formFrame" id="formFrame" src="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php?load"></iframe>
<div id="file-upload-elem">
<form id="upload_form_1" class="uploader-box uploader-box-1" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_1" class="inp-file" id="upload_file_1" /></form>
<form id="upload_form_2" class="uploader-box uploader-box-2" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_2" class="inp-file" id="upload_file_2" /></form>
<form id="upload_form_3" class="uploader-box uploader-box-3" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_3" class="inp-file" id="upload_file_3" /></form>
</div>
<script type="text/javascript">
var fileUploadElem = jQuery("#file-upload-elem").html();
jQuery("#file-upload-elem").remove();
var insertUpload, jd_error, jd_success, upload_error, jd_show_msg, invalid_captcha;
var isCustomQuote = false;
jQuery(function() {
console.log("Test");
if(jQuery("#customs").length > 0 || jQuery("#frprice").length > 0) {
jQuery("body").append(fileUploadElem);
var calculate = function() {
if(jQuery("#frprice").length > 0) {
size = (jQuery("#foldet").val()).split(":");
fold = (jQuery("#fold").val()).split(":");
back = (jQuery("#black").val()).split(":");
front = (jQuery("#front").val()).split(":");
qlnt = jQuery("#qlnt").val();
qlt = jQuery("#qlt").val();
var str = parseInt(size[0])+parseInt(fold[0])+parseInt(back[0])+parseInt(front[0])+parseInt(qlnt)+parseInt(qlt);
tprice = parseInt(str);
jQuery("h3#price span").text(tprice);
}
};
var jd_timer;
var upload_on_progress = 0;
jd_error = function(errCode) {
clearTimeout(jd_timer);
if(errCode == 0) {
jd_show_msg("Please fill all required fields (*)");
}
if(errCode == 1) {
jd_show_msg("Invalid Email Address.");
}
if(errCode == 2) {
//jd_show_msg("Invalid Email Address.");
alert("Form sending failed. Please try again later");
}
if(errCode == 3) {
alert("Invalid Action. Please Contact Administrator.");
}
};
invalid_captcha = function(x) {
if(x == 0) {
alert("Please Enter Verification Code.");
} else {
alert("Invalid Verification Code. Try Again.");
jQuery(".jd_captcha_img").each(function() {
jQuery(this).attr('src', jQuery(this).attr('src')+'&x='+Math.random());
});
}
jQuery(".jd_captcha").val("");
};
jd_success = function() {
setTimeout(function() { window.location = document.URL+"?thank-you"; },2000);
};
upload_error = function(err,uid) {
upload_on_progress--;
jQuery("input[name=jd_upload_file_"+uid+"]").val("");
alert(err);
};
insertUpload = function(data,file) {
upload_on_progress--;
var tmpData = data.split(':');
if(tmpData.length == 3) {
var tmpCounter = 0;
jQuery("input[name=jd_upload_file_"+tmpData[2]+"]").val(file);
var updateInput = jQuery("#jd_upload_uri_"+tmpData[2]);
var updateData = tmpData[0] + ":" + tmpData[1];
updateInput.val(updateData);
} else {
alert("Uploading File Error. Please Try Again Later");
}
};
jd_show_msg = function(err) {
var myBox = jQuery("#jd_msg_box");
myBox.children(".text").text(err);
timer = setTimeout(function() { myBox.hide(); },3000);
myBox.show();
};
jQuery("select").change(calculate);
jQuery("#price").click(function(){
jQuery(this).hide();
});
jQuery(".jd_upload:eq(0), .jd_upload_filename:eq(0)").css("opacity",1);
jQuery(".file_input_hidden:eq(0)").show();
var jdModal = jQuery('#jdModal').html();
jQuery('#jdModal').remove();
var uploaderBox = jQuery(".uploader-box");
jQuery(".inp-file").click(function(e) {
if(upload_on_progress > 0) {
e.preventDefault();
alert("Prevented");
}
});
var cboxTopCache = 0;
var cboxLeftCache = 0;
var fixFileWin = function() {
var fixLeft = 585;
var cboxOffset = jQuery("#colorbox").offset();
cboxLeftCache = cboxOffset.left;
cboxTopCache = jQuery("#jd_upfile_1").offset().top;
jQuery(".uploader-box-1").css("top", (jQuery("#jd_upfile_1").offset().top) + "px");
jQuery(".uploader-box-2").css("top",(jQuery("#jd_upfile_2").offset().top) + "px");
jQuery(".uploader-box-3").css("top",(jQuery("#jd_upfile_3").offset().top) + "px");
uploaderBox.css("left",(cboxLeftCache+fixLeft) + "px");
};
jQuery(window).resize(function() {
var cboxOffset = jQuery("#colorbox").offset().left;
var cboxOffset2 = jQuery("#jd_upfile_1").offset().top;
if(cboxOffset != cboxLeftCache || cboxOffset2 != cboxTopCache) {
fixFileWin();
}
});
var formOnClick = function(e) {
e.preventDefault();
isCustomQuote = (jQuery(this).attr('id') == 'frprice')?false:true;
jQuery.colorbox({html:jdModal,opacity:0.8,overlayClose:false,transition:'none', onComplete: function() {
fixFileWin();
uploaderBox.show();
jQuery(".inp-file").change(function() {
var _this = jQuery(this);
if(_this.val() != "") {
if(upload_on_progress > 0) {
alert("Upload is still in progress. Please wait.");
} else {
jQuery("input[name=jd_"+_this.attr("id")+"]").val("Uploading File.. Please Wait..");
_this.parent().submit();
upload_on_progress++;
}
}
});
if(!isCustomQuote) {
jQuery("#product_form input[name=size]").val(size[1]);
jQuery("#product_form input[name=fold]").val(fold[1]);
jQuery("#product_form input[name=back]").val(back[1]);
jQuery("#product_form input[name=front]").val(front[1]);
jQuery("#product_form input[name=qlnt]").val(qlnt);
jQuery("#product_form input[name=qlt]").val(qlt);
jQuery("#product_form input[name=tprice]").val(tprice);
}
jQuery("#colorbox #product_form").submit(function(e) {
var tmp_progress = upload_on_progress;
if(tmp_progress > 0) {
e.preventDefault();
alert("Upload in progress. Please wait.");
}
});
}, onClosed: function() {
uploaderBox.hide();
}});
};
jQuery("#frprice").submit(formOnClick);
jQuery("#customs").click(formOnClick);
if(!isCustomQuote) {
calculate();
}
}
});
</script>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar('right'); ?>
<?php get_footer(); ?>
replace
jQuery("#file-upload-elem").remove();
With
jQuery("#file-upload-elem").hide();
jQuery.remove(), completely removes the selected element from the DOM
EDIT:
To show the element when you need it use
jQuery.show()
i.e jQuery("#file-upload-elem").show();
http://jsfiddle.net/MJwFj/2/
although it looks very rough when .remove() has been commented out the form loads
uploaderBox.hide();
The code above will hide the following, the above code is safe to remove if you don't want this to happen:
<form id="upload_form_1" class="uploader-box uploader-box-1" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_1" class="inp-file" id="upload_file_1" /></form>
<form id="upload_form_2" class="uploader-box uploader-box-2" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_2" class="inp-file" id="upload_file_2" /></form>
<form id="upload_form_3" class="uploader-box uploader-box-3" action="<?php echo site_url(); ?>/wp-content/themes/ecs/formHandler.php" target="formFrame" method="post" enctype="multipart/form-data"><input type="file" name="upload_file_3" class="inp-file" id="upload_file_3" /></form>
It's not clear exactly which element is being hidden but there is also a timer that triggers after 3 seconds to hide another element. Try removing the following also:
timer = setTimeout(function() { myBox.hide(); },3000);
The first, you may set the css role display to the element you wanted to as none
.form{
display:none;
}
then you just need to show the form with jQuery .show() function on event you wanted to, such button clicked or something else. For example :
$(document).ready(function(){
$('.classOfButton').on('click',function(){
$('.form').show();
);
})
Update
if you wanted to show the form within the page are loaded, you need to put the javascript in the end of page, or if you use jQuery you just need to use .ready() function and inside of it you show up the form with some delay if necessary.
$(document).ready(function(){
$('.form').show();
})
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How can I get which radio is selected via jQuery?
I am attempting to put a user rating system on my site but only the first value gets passed on, so in the table the rating column is always a one. Its been a while since I have worked with radios.
Here is what I have.
<form id="add-rateing">
<input type="radio" name="MOVIE_RATING" value="1" > 1
<input type="radio" name="MOVIE_RATING" value="2" > 2
<input type="radio" name="MOVIE_RATING" value="3" checked="yes"> 3
<input type="radio" name="MOVIE_RATING" value="4" > 4
<input type="radio" name="MOVIE_RATING" value="5" > 5 <br>
<input type="hidden" name="MOVIE_ID" value="<?php echo $id; ?>">
<input type="hidden" name="MOVIE_TITLE" value="<?php echo $title; ?>">
<input type="hidden" name="USER_ID" value="<?php echo $loggedinusername; ?>">
<input type="submit" value="I Drank To The Credits" onclick="$('#add-rateing').hide('fast')">
</form>
<script type="text/javascript">
$("#add-rateing").submit(function(event){
event.preventDefault()
addrateing();
});
function addrateing()
{
var movie_rating_s = $("#add-rateing [name='MOVIE_RATING']").val();
var movie_id_s = $("#add-rateing [name='MOVIE_ID']").val();
var movie_title_s = $("#add-rateing [name='MOVIE_TITLE']").val();
var user_id_s = $("#add-rateing [name='USER_ID']").val();
var errors = '';
$.ajax({
type : "POST",
url : "movie_watched.php",
data : { rating: movie_rating_s,
movie : movie_id_s,
title: movie_title_s,
user : user_id_s, },
cache : false, timeout: 10000,
success : function() {
alert("You have played <?php echo $title; ?> ");
},
error : function() {
alert("there is a problom");
},
complete : function() {
}
});
};
</script>
Try chaging this :
var movie_rating_s = $("#add-rateing [name='MOVIE_RATING']").val();
into this:
var movie_rating_s = $("#add-rateing [name='MOVIE_RATING']:checked").val();
You need to select the selected radio element, like so:
$('input[name="MOVIE_RATING"]:checked').val();
It looks like the problem is with your jQuery selector. It's not specifying to grab the value of the "checked" radio button. Try this when loading up your movie_rating_s variable:
var movie_rating_s = $("#add-rateing [name='MOVIE_RATING']:checked").val()
What I'm trying to do is when user click the 2 checkboxes it will pop up new window web page. I got the solution for 1 checkbox but i have hard time figuring out on how to do in both. I tried or || or and && but i didnt work.
Here my code:
<?php
// when user clicked no checkbox
if(isset($_POST['bus']) &&
$_POST['bus'] == 'bar' && $_POST['bus'] != 'carryout')
{
echo '<script type="text/javascript" language="javascript"> window.open("http://yahoo.com", target="_self");
</script>';
}
// when user clicked yes checkbox
if(isset($_POST['bus']) &&
$_POST['bus'] == 'bar' && $_POST['bus'] != 'carryout')
{
echo '<script type="text/javascript" language="javascript">
window.open("http://google.com", target="_self");
</script>';
}
else{
/// when user clicked both checkboxes
if(isset($_POST['bus']) && $_POST['bus'] == 'bar' &&
$_POST['bus'] == 'carryout')
{
echo '<script type="text/javascript" language="javascript">
window.open("http://getvms.com", target="_self");
</script>';
}}
?>
form action="<?php echo $PHP_SELF;?>" method="post">
Type of restaurant are you?<br>
<br>
BAR
input type="checkbox" name="bus" id="1" value="bar" ?php if(isset($_POST['bus'])) ?>/><br>
CARRYOUT input type="checkbox" name="bus" id="2"value="carryout" ?php if(isset($_POST['bus']))?>/>
input type="submit" name="formSubmit" value="Submit" />
</form>
Track your checked state
If you need to count checkboxes then introduce an array of values. SUppose your checkboxes are named as:
<input type="checkbox" name="cb1" data="singleURL1" />
<input type="checkbox" name="cb2" data="singleURL2" />
then you could be doing it this way:
$(function(){
var checked = {
cb1: false,
cb2: false,
both: function(){
return this.cb1 && this.cb2;
},
allUrl: "some combined URL"
};
$(":input:checkbox").click(function(){
checked[this.name] = this.checked;
if (checked.both() === true)
{
var url = checked.allUrl;
// open combined URL
}
else
{
var url = $(this).attr("data");
// open single checkbox URL
}
});
});
I've put all the code inside a DOM ready anonymous function enclosure that can be used as is.
Using jQuery, you can do $('input:checkbox').click(function(){...})
<?php
$url = false;
if(isset($_POST['bar']) && isset($_POST['carryout'])) $url = 'http://carryoutbar.com';
elseif(isset($_POST['carryout'])) $url = 'http://carryout.com';
elseif(isset($_POST['bar'])) $url = 'http://bar.com'; // nice place, pay foo a visit!
if($url) echo '
<script type="text/javascript" language="javascript">
window.open("' . $url . '", target="_self");
</script>';
?>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
Please select:<br/>
<input type="checkbox" name="bar" value="1" /> BAR<br/>
<input type="checkbox" name="carryout" value="1" /> Carryout<br/>
<input type="submit" name="formSubmit" value="Submit" />
</form>