jQuery - how to show external web page if > 2 checkbox selected? - php

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>

Related

Automatically increment input type="hidden" value

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);
})
})

disable enter on form [duplicate]

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
}
}

Checkbox values getting without page loading using AJAX

I have a problem getting checkbox value in the following code(without page loading).
If I click on checkboxes the values can be passed through the array variable check. But whenever I click checkbox I get " Array ( [0] => undefined )".
Here is my code:
index.html
<script src="create_ajax_object.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function display() {
var ajax = create_ajax_object();
if (ajax) {
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
document.getElementById("target").innerHTML = ajax.responseText;
}
}
ajax.open("POST", "fetchdata.php", true);
var check = new Array();
var "check[]=" + encodeURIComponent(document.myForm.user.value);
ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax.send(check[]);
} else {
alert("Your browser doesnt support AJAX!");
}
} </script>
<br>
<form name='myForm'>
<input type="checkbox" name="user" value="First" onclick="display();">1
<br>
<input type="checkbox" name="user" value="Second" onclick="display();">2
<br>
<input type="checkbox" name="user" value="Third" onclick="display();">3
<br>
</form>
</html>
fetchdata.php
<?php
$no=array($_POST['check']);
foreach($no as $n)
{
print_r($n);
}
?>
The variable document.myForm.user is array of checkbox objects, you have to iterate over it and check checked property of each element.

how to hide/ show input box on radio button click event

I want to hide and show input field on radio button click event my HTML is
<input type="radio" id="abc" name="abc1" checked = "checked" value="Experienced" />
<label> Experienced </label>
<input type="radio" id="xyz" name="xyz1" checked = "checked" value="Fresher" />
<label>Fresher</label>
<input type="text" name="cardno" id="tyx" /><br />
<p > Number</p>
What I want is when radio button with value="Fresher" is clicked the input box name="cardno" should be hidden.
I tried to solve this by using jQuery but it is not working.
$(document).ready(function () {
$("input[name$='abc1']").click(function () {
var value = $(this).val();
if (value == 'Experianced') {
$("#tyx").show();
} else if (value == 'Fresher') {
$("#tyx").hide();
}
});
Can any body help me how to solve this?
name of your radio button should be same to check on click event or make array name of your radio button
like below code
<input type="radio" id="abc" name="abc1" checked = "checked" value="Experienced" />
<label> Experienced </label>
<input type="radio" id="xyz" name="abc1" checked = "checked" value="Fresher" />
<label>Fresher</label>
<input type="text" name="cardno" id="tyx" /><br />
<p > Number</p>
and then create function like
$(document).ready(function () {
$("input[name$='abc1']").click(function () {
var value = $(this).val();
if (value == 'Experianced') {
$("#tyx").show();
} else if (value == 'Fresher') {
$("#tyx").hide();
}
});
please reply if i can help you more..
change the spelling to Experienced
you used
if (value == 'Experianced')
Besides the typo in Experienced, try setting up a click event for each radio button:
$(document).ready(function() {
$('input[name="abc1"][value="Experienced"]').click(function() {
$("#tyx").show();
});
$('input[name="xyz1"][value="Fresher"]').click(function() {
$("#tyx").hide();
});
});
Note:
You can simplify your selectors to use ids with:
$('#abc')
and
$('#xyz')
Fix with:
$(document).ready(function () {
$("input[type='radio']").click(function () {
var value = $(this).val();
if (value == 'Experianced') {
$("#tyx").show();
} else if (value == 'Fresher') {
$("#tyx").hide();
}
});
});
Html:
<input type="radio" id="abc" name="jobtype" checked = "checked" value="Experienced" />
<label> Experienced </label>
<input type="radio" id="xyz" name="jobtype" checked = "checked" value="Fresher" />
<label>Fresher</label>
<input type="text" name="cardno" id="tyx" /><br />
<p > Number</p>
Radio buttons of same group should have same name
Js:
$(document).ready(function () {
$("input[name='jobtype']").click(function () {
var value = this.value;
if (value == 'Experienced') {
$("#tyx").show();
}
else{
$("#tyx").hide();
}
});
});

Posting search value via html button

I am searching for a possibility to replace the lowre input text field with a button like: <input type="button" class="button" name="search" value="Urban" onclick="">.
HTML CODE:
<form method="post" action="search.php" id="search_form">
<input type="text" name="search" value="<?php echo $_POST['search']; ?>" class="search_sounds"/>
<input type="submit" value="" class="submit" />
</form>
The whole script is supposed to search the sounds of a database:
PHP CODE:
<?php if(isset($_POST['search']) && !empty($_POST['search']))
{
include('searchfunction.php');
if(count($data) > 0)
{
?>
<script type="text/javascript">
$(document).ready(function(){
var description = '';
var myPlaylist = [
<?php
echo(implode(',', $data));
?>
];
$('#main').ttwMusicPlayer(myPlaylist, {
autoPlay:false,
description:description, }
);
});
</script>
<?php
}
else
{
echo ('No sounds found.');
}
}
?>
add an id element to your button, like this (I removed the onclick="" code)
<input type="button" class="button" name="search" value="Urban" id="search_button">
Then use some simple jQuery:
$('#search_button').click(function() {
$('#search_form').submit();
});

Categories