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);
})
})
Related
I'm using jquery to sum values of input checkbox and i need to save the sum into DB MySQL but how can i put the value in a php var? I don't know how can i do this.
Can someone help me out? I'm newbie in jquery :/
Here's the code i'm using:
<script type="text/javascript">
$(document).ready(function () {
function recalculate() {
var sum = 0;
$("input[type=checkbox]:checked").each(function() {
var val = $(this).attr("preco").replace(',', '.');
sum += parseFloat(val);
});
$("#output").html(sum);
}
$("input[type=checkbox]").change(function() {
recalculate();
});
});
</script>
<?php
if (isset($_POST['submit'])){
$transporte = $_POST['metodoenvio'];
(... save into DB)
}
?>
<span id="output"></span> // the sum in html shows up here
<form class="cmxform" id="pedidoForm" method="post" action="">
<input type="checkbox" name="metodoenvio" class="metodoenvio" preco="20" />
<input type="checkbox" name="metodoenvio" class="metodoenvio" preco="10" />
(...)
<input type="submit" name="submit" id="submit" value="submit"/>
</form>
Take a hidden type variable with some id in form tag and put value in hidden variable by jquery like:
$("#hidden_var").val(sum);
Then at the end submit the form
add new hidden input field to the form to hold the sum
<form class="cmxform" id="pedidoForm" method="post" action="">
//add new hidden input field to have the sum
<input id="sum_input" name="sum" type="hidden"/>
<input type="checkbox" name="metodoenvio" class="metodoenvio" preco="20" />
<input type="checkbox" name="metodoenvio" class="metodoenvio" preco="10" />
(...)
<input type="submit" name="submit" id="submit" value="submit"/>
</form>
//Then use the jquery to put the sum to input id sum
function recalculate() {
var sum = 0;
$("input[type=checkbox]:checked").each(function() {
var val = $(this).attr("preco").replace(',', '.');
sum += parseFloat(val);
});
$("#output").html(sum);
//jquery to put sum into form
$("#sum_input").val(sum);
}
You should split your php server side scripts out of your html/js client side pages. create a separate php page so process the data and call it through an ajax call.
change your submit button to just be a button and attach an onclick event to call a function that will sum the checkboxes and then initiate the and ajax request.
<script>
function sumChecked(){
i = 0;
$.each($('#pedidoForm:ckecked), function({
i++;
});
$.ajax({
url:"yourPHPpage.php",
type:"POST",
data:{"sumVar":i},
success: function(data){
alert ("Process Complete");
}
})
}
...
</script>
...
<form class="cmxform" id="pedidoForm">
<input type="checkbox" name="metodoenvio" class="metodoenvio" preco="20" />
<input type="checkbox" name="metodoenvio" class="metodoenvio" preco="10" />
(...)
<input type="button" name="submit" id="submit" value="submit" onClick="sumChecked()"/>
</form>
then on your php page catch the $_POST['sumVar'] variable sent through from the form and do whatever you want to server-side with that info.
I'm building a small script, when i click at the button, the script add one more textbox automatically.
My script is working really well, but when i submit the button, it clear all the textboxes, how can i change that, saving all the textbox information when i submit?
<script src="jquery.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
var counter = 2;
$("#add").click(function () {
if(counter==11){
alert("Too many boxes");
return false;
}
$("#textBoxes").html($("#textBoxes").html() + "<div id='d"+counter+"' ><label for='t2'> Textbox "+counter+"</label><input type='textbox' id='t"+counter+"' > </div>\n");
++counter;
});
$("#remove").click(function () {
if(counter==1){
alert("Can u see any boxes");
return false;
}
--counter;
$("#d"+counter).remove();
});
});
// -->
</script>
</head>
<body>
<div id='textBoxes'>
<div id='d1'>
<label for="t1">Textbox 1</label>
<input type='textbox' id='t1' />
</div>
</div>
<input type='button' value='add' id='add' />
<input type='button' value='remove' id='remove' />
<input type="textbox" name="textbox[]">
<input type="textbox" name="textbox[]">
<input type="textbox" name="textbox[]">
<input type="textbox" name="textbox[]">
<input type="textbox" name="textbox[]">
<?php
if( isset( $_REQUEST['textbox'] ) )
{
foreach( $_REQUEST['textbox'] as $textbox )
{
// $textbox contains the input's text.
}
}
?>
EDIT : And jQuery provides a function .clone() that you could (should) use.
I think you should use the 'name' property in your input.
But what's append when you submit ? Is there a redirection to an other page ? Or do you want to stay on this page and show a message of confirmation ? In this case you could use Ajax to submit your form
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var counter = 2;
$("#add").click(function () {
if (counter==11) {
alert("Too many boxes");
return false;
}
$("#textBoxes").append('<div id="d'+counter+'"><label for="'+counter+'"> Textbox "'+counter+'"</label><input type="textbox" id="t'+counter+"' ></div>\n");
++counter;
});
$("#remove").click(function () {
if (counter == 1) {
alert("Can u see any boxes");
return false;
}
--counter;
$("#d"+counter).remove();
});
});
</script>
</head>
<body>
<form action="" method="post">
<div id='textBoxes'>
<div id='d1'>
<label for="t1">Textbox 1</label>
<input type='textbox' id='t1'>
</div>
</div>
<input type='button' value='add' id='add' />
<input type='button' value='remove' id='remove' />
</form>
</body>
</html>
I have the following HTML code:
<form method="post" action="the_file.php" id="the-form">
<input type="text" name="the_input" value="<?php if ( isset( $_POST['the_input'] ) echo $_POST['the_input]; ?>">
<button type="submit" name="eat_something" value="TRUE">Eating</button>
<button type="submit" name="eat_something" value="FALSE">Don't Eat</button>
</form>
<textarea id="result"></textarea>
Followed by this JS:
$('#the-form').bind('submit', submitForm);
function submitForm(evt) {
jQuery.post(
$(this).attr('action'),
$(this).serialize(),
function(data) {
$('#result').empty().append(data).slideDown();
});
evt.preventDefault();
}
I also have a PHP script that receives the $_POST value from the input on submit and runs a conditions to test which submit button was clicked.
Like this:
$input = $_POST['the_input'];
$eating = $_POST['eat_something'];
if ( $eating == 'TRUE' ) {
// Do some eating...
} else {
// Don't you dare...
}
If I don't use the jQuery.post() function the submit values from the button are posted. However, for some reason, I can't manage to pass the button value to PHP $_POST with the jQuery.post() function. If I don't use jQuery.post() the output doesn't get appended to the textarea but rather in a text format on a separate page, like a document. I've also tried calling the submit function on the button $('button[type=submit]').bind('submit', submitForm); but this doesn't solve my problem either.
Thanks in advance for you help.
You forget signle quote and ) in the_name input.
<input type="text" name="the_input" value="<?php if (isset($_POST['the_input'])) { echo $_POST['the_input'] ; } ?>">
and for getting form button pressed value you need to append it value manually to serialize.
$form.serialize() + "&submit="+ $('button').attr("value")
Example
<script type="text/javascript">
$(function()
{
$('button[type="submit"]').on('click',function(e)
{
e.preventDefault();
var submit_value = $(this).val();
jQuery.post
(
$(this).attr('action'),
$(this).serialize()+ "&submit="+ submit_value,
function(data)
{
$('#result').empty().append(data).slideDown();
}
);
});
});
</script>
Complete Tested Code
<?php
if(isset($_POST['the_input']))
{
$input = $_POST['the_input'];
$eating = $_POST['eat_something'];
exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>StackOverFlow</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function()
{
$('button[type="submit"]').on('click',function(e)
{
e.preventDefault();
var submit_value = $(this).val();
jQuery.post
(
$('#the-form').attr('action'),
$('#the-form').serialize()+ "&eat_something="+ submit_value,
function(data)
{
$('#result').empty().append(data).slideDown();
}
);
});
});
</script>
</head>
<body>
<form method="post" action="random.php" id="the-form">
<input type="text" name="the_input" value="<?php if (isset($_POST['the_input'])) { echo $_POST['the_input'] ; } ?>">
<button type="submit" name="eat_something" value="TRUE">Eating</button>
<button type="submit" name="eat_something" value="FALSE">Don't Eat</button>
</form>
<textarea id="result"></textarea>
</body>
</html>
Simplest answer would be:
<form method="post" action="the_file.php" id="the-form">
<input type="text" name="the_input" value="<?php if ( isset( $_POST['the_input'] ) echo $_POST['the_input']; ?>">
<input type="submit" name="eat_something" value="Eating" />
<input type="submit" name="eat_something" value="Don't Eat" />
</form>
Of course, this won't give exactly what you're looking for.
You can also do something like this:
<form method="post" action="the_file.php" id="the-form">
<input id="theInput" type="text" name="the_input" value="<?php if ( isset( $_POST['the_input'] ) echo $_POST['the_input']; ?>">
<button type="button" name="eat_something" data-value="TRUE">Eating</button>
<button type="button" name="eat_something" data-value="FALSE">Don't Eat</button>
</form>
$('#the-form button').bind('click', function(){
jQuery.post($('#the-form').attr('action'),
{
the_input: $('#theInput').val(),
eat_something: $(this).attr('data-value')
},
function(data) { $('#result').empty().append(data).slideDown() },
'json'
});
Change the buttons to this (change w/your form names)..
<input type="hidden" name="eat_something" value="" />
<input type="button" onclick="$('input[name=eat_something]').val('TRUE')" />
<input type="button" onclick="$('input[name=eat_something]').val('FALSE')" />
The Javascript function and the PHP are fine.
Thanks!
#leo
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();
});
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>