How to get value from checkbox or radio button immediately after clicking on it and write it in textfield without using reset or submit button?
<input type="checkbox" name="age" value="21-29">21-29 <input type="text" name="yourAge" value="">
You can do like this with jQuery click function More Detail Here
<input type="checkbox" name="age" value="21-29" id="age">21-29
<input type="text" name="yourAge" value="" id="yourAge">
JQuery
$("#age").click(function () {
$("#yourAge").val($("#age").val());
});
Fiddle
#Shehary is on point but there is always room for more.
JS
<script>
var changeInput = function (val){
var input = document.getElementById("age");
input.value = val;
}
</script>
HTML
<input type="checkbox" name="age" value="21-29" onclick='changeInput(this.value);' >21-29
<input type="text" name="yourAge" value="" id="age">
Pen
I know this is old, and my code may not be great, but I like to use this.
<?php
$get= "?checked";
$checked= "";
if(isset($_GET['checked'])){
$get= "";
$checked= "checked";
}
?>
<a href="waiting_in_db.php<?=$get?>">
<input type="checkbox" <?=$checked?> >
</a>
But I prefer using CSS and links without the checkbox.
Related
<script>
$(function () {
$("input:checkbox").click(function () {
if ($(this).is(":checked")) {
var id = $(this).attr('id');
if (id) {
$("#txtPassportNumber").removeAttr("disabled");
$("#txtPassportNumber").focus();
}
} else {
$("#txtPassportNumber").attr("disabled", "disabled");
}
});
});
</script>
This is my jquery code am getting one textbox enabled by this
<label for="chkPassport">
<?php
$select_size = $common->select('size_m', '');
$i = 0;
foreach ($select_size as $sizes) {
$s = $sizes['sizename'];
?>
<input type="checkbox" id="chkPassport<?php echo $s; ?>" class="current"/>
<?php echo $sizes['sizename']; ?>
</label>
qty:
<input type="text" id="txtPassportNumber<?php echo $i;?>" disabled="disabled" class="current<?php echo $s; ?>"/>
<br/>
<?php
$i++;
}
?>
I am not getting id of textbox even i am giving
id="txtPassportNumber<?php $i; ?>"
I am having 5 sizes and on every size i want to add qty when i click S i want to enable its textbox when i click M its textbox must enable.I am getting one textbox enabled onclick of size S because it is not taking my id there.Help me for this
You're asking to solve the selection problem so here is a small 'JQuery' code.
I wonted to explain what I've done with the below code. In your code you were trying to use the ID of the element you wanted to change. The problem is ID's need to be unique for each element if you have the same ID for all then all those elements will be considered as one.
Also you were trying to assign a number to the ID (id="txtPassportNumber<?php echo $i;?>") which makes it double hard to identify.
So what I did in my code is to move the listener from ID to class which makes it easier and free up the ID for you to do what ever you want with it. In the script the JQuery listens to see if there's a click event on the .sizeChk class if it's true then it checks if the click event is to check the check box or not. Then if the check box is checked then it looks for the input .next() to the checked check box.
I used .next() because the input is on to the right hand side if the input was to the left hand side you can use .prev(). After finding the input next to the check box it applies the .prop(). I didn't use .attr() because it's old and not encouraged by JQuery it self.
You only have to keep the class in tact and you can use the same class to any other check box to get the same function on those elements.
A side note: It's best you read up on JQuery a little bit more.
Older Answer which match the description.
$(document).ready(function() {
$('.sizeChk').click(function() {
if ($(this).is(':checked')) {
$(this).next("input").prop('disabled', false).focus();
} else {
$(this).next("input").prop('disabled', true);
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="chk1" class="sizeChk" />Small:
<input type="text" id="txt1" class="sizeTxt" disabled/><br><br>
<input type="checkbox" id="chk2" class="sizeChk" />Medium:
<input type="text" id="txt2" class="sizeTxt" disabled/><br><br>
<input type="checkbox" id="chk3" class="sizeChk" />Larg:
<input type="text" id="txt3" class="sizeTxt" disabled/><br><br>
<input type="checkbox" id="chk4" class="sizeChk" />xLarg:
<input type="text" id="txt4" class="sizeTxt" disabled/><br><br>
<input type="checkbox" id="chk5" class="sizeChk" />xxLarg:
<input type="text" id="txt5" class="sizeTxt" disabled/>
New updated code
$(document).ready(function() {
$('.sizeChk').click(function() {
if ($(this).is(':checked')) {
$(this).closest('.sizeGroup').find('input[type=text]').prop('disabled', false).focus();
} else {
$(this).closest('.sizeGroup').find('input[type=text]').prop('disabled', true);
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sizeGroup">
<input type="checkbox" id="chk1" class="sizeChk" />Small:<br>
<input type="text" id="txt1" class="sizeTxt" disabled/><br><br>
</div>
<div class="sizeGroup">
<input type="checkbox" id="chk2" class="sizeChk" />Medium:<br>
<input type="text" id="txt2" class="sizeTxt" disabled/><br><br>
</div>
<div class="sizeGroup">
<input type="checkbox" id="chk3" class="sizeChk" />Larg:<br>
<input type="text" id="txt3" class="sizeTxt" disabled/><br><br>
</div>
<div class="sizeGroup">
<input type="checkbox" id="chk4" class="sizeChk" />xLarg:<br>
<input type="text" id="txt4" class="sizeTxt" disabled/><br><br>
</div>
Hope this help.
Here is the old jsFiddle.
Here is the updated jsFiddle
I have a form that allows members to click a (+) sign, and it will put another form field there. They can do this to basically without limit.
The problem I have is if they do it, let's say, 3 times and fill out all 3, when I get the data to save it, it's placing the first field in the database and not the others.
Here is my code:
Here is the JavaScript that makes the div show as they push the (+) sign.
<script type="text/javascript">
function add_feed()
{
var div1 = document.createElement('div');
div1.innerHTML = document.getElementById('newlinktpl').innerHTML;
document.getElementById('newlink').appendChild(div1);
}
</script>
<style>
.feed {padding: 5px 0}
</style>
This is part of the form that does the above...
<td width="50%" valign="top">
<div id="newlink">
<div class="feed">
<input type="text" size="45" value="" name="recname[]" placeholder="Place Company Name Here"><br /><br />
<input type="text" size="45" value="" name="reclink[]" placeholder="Place URL Here"><br /><br />
<p><b>What Type Of Page Is This?</b><br /><br />
<input type="radio" name="rectype[]" value="1"> Business Opp<br />
<input type="radio" name="rectype[]" value="2"> Traffic Site<br />
<input type="radio" name="rectype[]" value="3"> Tools Site<br /></p>
</div>
</div>
<hr>
<p id="addnew">
+ Click Here To Add Another Biz/Traffic/Tools Site
</p>
<div id="newlinktpl" style="display:none">
<hr>
<div class="feed">
<input type="text" size="45" value="" name="recname[]" placeholder="Place Company Name Here"><br /><br />
<input type="text" size="45" value="" name="reclink[]" placeholder="Place URL Here"><br /><br />
<p><b>What Type Of Page Is This?</b><br /><br />
<input type="radio" name="rectype[]" value="1"> Business Opp<br />
<input type="radio" name="rectype[]" value="2"> Traffic Site<br />
<input type="radio" name="rectype[]" value="3"> Tools Site<br /></p>
</div>
</div>
This is the part of the PHP code that would save it...
$i=0;
$linkname = $_POST["recname"][0];
while($linkname != ""){
$linkname = $_POST["recname"][$i];
$linkurl = $_POST["reclink"][$i];
$linktype = $_POST["rectype"][$i];
$linkname = $res->real_escape_string($linkname);
$linkurl = $res->real_escape_string($linkurl);
$linktype = $res->real_escape_string($linktype);
$result299 = mysqli_query($res, "INSERT INTO user_links (linkname,linkurl,linktype,sort) VALUES ('$linkname','$linkurl','$linktype','0')");
$i++;
}
It's all working except that is does not store all the data in the database (only the first one saves). That's the part I need help with please.
Please explain what I have done wrong and how to get it to store all the fields in the database, no matter how many the user creates and fills out.
I tested your code and it works fine so far if I use it like this:
$i=0;
$linkname = $_POST[recname][0];
while($linkname != ""){
$linkname = $_POST[recname][$i];
$linkurl = $_POST[reclink][$i];
$linktype = $_POST[rectype][$i];
echo "INSERT INTO user_links (linkname,linkurl,linktype,sort) VALUES ('$linkname','$linkurl','$linktype','0')<br>\n";
$i++;
}
There's no information about the $res object you're calling real_escape_string() on, so I'll just skip that for now. There are a couple of weaknesses in the code though:
You are referencing the post keys with barenames instead of strings.
PHP will gracefully assume you meant it as a string, but it will trigger a notice like Use of undefined constant recname - assumed 'recname'. Enclose them in quotes to make it clean.
Your use of the loop will result in an empty element inserted in the database every time.
You set the new linkname AFTER checking if $linkname is empty, but the variable contains the name of the last iteration. Instead, do something like this:
$i=0;
while($linkname = $_POST["recname"][$i]){
$linkurl = $_POST["reclink"][$i];
$linktype = $_POST["rectype"][$i];
echo "INSERT INTO user_links (linkname,linkurl,linktype,sort) VALUES ('$linkname','$linkurl','$linktype','0')<br>\n";
$i++;
}
Your code only allows for one radio button to be checked at a time
You cannot use rectype[] as a name for radio buttons, as an equal name forms a group of radio buttons out of all the elements. You need to name them like this:
<input type="radio" name="rectype[0]" value="1"> Business Opp<br />
<input type="radio" name="rectype[0]" value="2"> Traffic Site<br />
<input type="radio" name="rectype[0]" value="3"> Tools Site<br />
<input type="radio" name="rectype[1]" value="1"> Business Opp<br />
<input type="radio" name="rectype[1]" value="2"> Traffic Site<br />
<input type="radio" name="rectype[1]" value="3"> Tools Site<br />
and so on. You can do that programatically in your javascript code like this:
<script type="text/javascript">
var counter = 1;
function add_feed()
{
var div1 = document.createElement('div');
div1.innerHTML = document.getElementById('newlinktpl').innerHTML;
var inputs = div1.getElementsByTagName('input');
for (i=0; i<inputs.length; i++) {
if (inputs[i].type == "radio") {
inputs[i].name="rectype[" + counter + "]";
}
}
counter++;
document.getElementById('newlink').appendChild(div1);
}
</script>
That said, I don't see why it should only save one item, unless you have a key constraint hitting or something else we cannot assume from the piece of code you shared.
I'm Prasath and I'm new to AJAX. I am working on seat layout project, I find difficult to get seat fare and seat number at same time. Kindly some one help me to solve my problem. Here is my code
<div id="mydiv">
<input type="checkbox" name="seat1" id="A1" value="250" />
<br />
<input type="checkbox" name="seat2" id="A2" value="250" />
<br />
<input type="checkbox" name="seat3" id="A3" value="300" />
<br />
<input type="checkbox" name="seat4" id="SL1" value="250" />
<br />
<input type="checkbox" name="seat5 " id="SL2"
value="250" />
<br />
<input type="checkbox" name="seat6" id="SL3" value="300" />
<br />
<input type="checkbox" name="seat7 " id="SL4" value="300" />
<textarea id="seats"></textarea>
<textarea id="total_amount"></textarea>
</div>
I want result as
if checkbox "Seatl, seat3 and seat7" are checked I want result as
<textarea id="seats">A1,A3,SL4</textarea>
<textarea id="total_amount">750</textarea>
Kindly help me to solve this.
Thanks in advance.
You can do it just with plain javascript (no need of jQuery):
function myAudis(){
var inputs = document.getElementById("mydiv").getElementsByTagName("input");
var seats=[], total_amount=0, c=0;
for(var i=0;i<inputs.length;i++){
if(inputs[i].type!="checkbox"){continue;}
if(inputs[i].checked){seats[c++]=inputs[i].id; total_amount+=parseInt(inputs[i].value);}
}
document.getElementById("seats").value=seats;
document.getElementById("total_amount").value=total_amount;
}
You can call it like this:
<button type="button" onclick="myAudis()">Calculate</button>
Hope it helps..
$(document).ready(function(e) {
var ids = "";
$(':checkbox').bind('change',function(){
var th = $(this), id = th.attr('id');
//alert(th);
if(th.is(':checked')){
ids = ids+id+",";
$('#seats').val(ids);
}
else
{
ids = ids.replace(id+",","");
$('#seats').val(ids);
}
});
});
First add a common class for the checkbox like seatsNos
Add this in your on submit function or if event want it in every checkbox click add add check checked event
var total = 0;
var textarea = '';
$('.seatsNos:checked').each(function () {
var e = $(this);
var textarea = ',' + e.attr('id');
total = total + e.val();
});
$('#seats').val(textarea );
Note : Jquery needed
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Combine $_GET variables before Submit
I am not really sure if this is possible but here is the problem I cant figure out.
I need a way to have two boxes with a price min and max and a button that send the user to a link like this. where A is min price and B is max price.
End result Link.
domain/index.php?a=price_range_A_B
I can not use a from but i can use Input fields. Any ideas?
You will need to do this with javascript. In the "Submit" button/link/whatever click action, fetch the values of the fields and construct the url. Then either send the browser there, or do an ajax request, depending on your needs.
eg.
<script>
function doSubmit() {
var fieldA = document.getElementById('fieldA'),
fieldB = document.getElementById('fieldB'),
valA = fieldA.value,
valB = fieldB.value,
url = "/index.php?a=price_range_" + valA + "_" + valB;
window.location = url;
}
</script>
<input id="fieldA" />
<input id="fieldB" />
<input type="button" onclick="doSubmit();" />
use this function onclick of button
function value_change(){
var a=document.getElementById('box1').value();
var b=document.getElementById('box2').value();
document.getElementById('linkdiv').innerHTML()="domain/index.php?a=price_range_"+A+"_"+B;
}
where box1 and box2 are ids of max and min price respectively and linkdiv is id od di that shows the link
<input id="one" type="text" />
<input id="two" type="text" />
<input id="go" type="button" value="button"/>
$("#go").click(function(){
window.location = "http://google.com/a=price_range_" + $("#one").val() + '_' + $("#two").val();
});
http://jsfiddle.net/kTUu5/
Try this code,
HTML
<div>
Max: <input type="textbox" id="max" name="max" value="" />
<br />
Min: <input type="textbox" id="min" name="min" value="" />
<br />
<input type="button" name="btn" value="Submit" onclick="sendData()"/>
</div>
Javascript
function sendData(){
var max = document.getElementById('max').value;
var min = document.getElementById('min').value;
if(!max || !min){
alert('Enter max and min value');
return false;
}
window.location = "http://domain/index.php?a=price_range_"+min+"_"+max;
}
Demo: http://jsfiddle.net/muthkum/FhY5a/
Yes. You can do it if you can use any client side scripting Like javascript or 'Jquery'. You have to bind a click event fubnction on that Submit button. So once you click on that button it will call a function which take the value of those inputbox and prepared a url and send you to that location.
Example:
<input type="text" name="minPrice" id="min" value="" />
<input type="text" name="maxPrice" id="max" value="" />
<button type="button" name="Submit" onClick="doSubmit()">Submit</button>
Now Your doSubmit() function.
function doSubmit(){
var minPrice=document.getElementById('min').value;
var maxPrice=document.getElementById('max').value;
var location='domain/index.php?a=price_range_'+minPrice+'_'+maxprice+'';
window.location=location;
}
Now on the index page you can easily explode $_REQUEST['a'] variable like this way
$var=$_REQUEST['a'];
$explodedVar=explode('_',$var);
//print_r($explodedVar);
$minPrice=$explodedVar[2];
$maxPrice=$explodedvar[3];
I am creating a dynamic form where the user will have the ability to add a set of inputs to the form. The html looks like this:
<form>
<input id="title1" class="title" name="title1" type="text" value="">
<input id="productionCompany1" name="productionCompany1" type="text" value="">
<input id="year1" name="year1" type="text" value="">
<input id="role1" name="role1" type="text" value="">
<div id="newCredit"> </div>
add another credit
</form>
When the user clicks the link with the id of "addCredit" the following jQuery script is called:
$(document).ready(function() {
var $ac = $('#addCredit');
$ac.click(function() {
/* the following two lines are where the problem lies? */
var $credInt = $(this).prev(".title");
$.get("addCredit.php", {num: $credInt},
function(data){
$('#newCredit').append(data);});
return false;
});
});
The jQuery function queries a php file called "addCredit.php", which looks like this:
<?php
$int = $_GET["num"];
$int = substr($int, -1);
$int++;
?>
<input id="title<?php echo $int;?>" class="title" name="title<?php echo $int;?>" type="text" value="">
<input id="productionCompany<?php echo $int;?>" name="productionCompany<?php echo $int;?>" type="text" value="">
<input id="year<?php echo $int;?>" name="year<?php echo $int;?>" type="text" value="">
<input id="role<?php echo $int;?>" name="role<?php echo $int;?>" type="text" value="">
My problem is getting the javascript variable $credInt set properly so that it can be sent to the addCredit.php page and update the form fields accordingly. I also need to be sure that every time the form is appended, the next value sent is the incremented value.
Any thoughts on how I might accomplish this? Thank you for your help.
This is the wrong way of doing it; PHP can handle array syntax in a variable name. This makes it much easier to handle. It is also unnecessary to call the server to clone the form. You should name your fields like this:
<form>
<div id="originalCredit">
<input name="title[]" type="text" value="">
<input name="productionCompany[]" type="text" value="">
<input name="year[]" type="text" value="">
<input name="role[]" type="text" value="">
</div>
add another credit
</form>
And then your Javascript can be like this:
$(function() {
$('#addCredit').click(function() {
var newCredit = $('#originalCredit').clone(); // create new set
newCredit.find('input').val(''); // empty input fields
$(this).before(newCredit); // append at the end
return false;
});
});
When the form is finally sent to the server, because the variables are in the format of name[] PHP will recognize they are an array and then you can do this:
<? foreach($_POST['title'] as $k => $v) { ?>
Title: <?=$_POST['title'][$k]?><br>
Company: <?=$_POST['productionCompany'][$k]?><br>
Year: <?=$_POST['year'][$k]?><br>
Role: <?=$_POST['role'][$k]?><br>
<? } ?>
Obviously this is just displaying it as an example, but you can then save/update/whatever with it.