While on change i want to change the span values. Please check the below code.
Getting the values from databases using php
<input type="text" name="no_guest_conferance" class="conf_guest" id="no_guest_conferance" placeholder="Enter no. of guest" value ="<?php if(isset($con_details[0]['min_seating_capacity'])){echo $con_details[0]['min_seating_capacity'];}?>"/>
<span style="float:left; margin-bottom:14px;" id="conference_subtotal">
<span id="conferencesubtotal"><?php echo 'Rs. '.number_format(ceil($subTotal),0); ?> </span>
<span style="font-size:12px;" >Sub Total</span>
</span>
Script here.
<script>
$(document).ready(function(){
$("input").change(function(){
var val=$(this).val();
var price=$('#price').val();
var subtotal=val*price;
$("#conferencesubtotal").val(subtotal);
});
});
</script>
I didn't get the value here?please tell me where i mistake.
Use blur instead of change and to print value in span use text or html instead of the val, val will work for input only.
<script>
$(document).ready(function(){
$(".conf_guest").blur(function(){
var val=$(this).val();
var price=$('#price').val();
var subtotal=val*price;
$("#conferencesubtotal").text(subtotal);
});
});
</script>
Change the following line:
$("#conferencesubtotal").val(subtotal);
to
$("#conferencesubtotal").text(subtotal);
because span tag do not have a value attribute in it. The value it shows is its text, so provide your value in text()
On span use text() not val() and apply onchange event only on your Guest conference number field like,
$("input#no_guest_conferance").change(function() {
var val = Number(this.value);
var price = Number($('#price').val());
var subtotal = val * price;
$("#conferencesubtotal").text(subtotal);
});
$(document).ready(function() {
$("input#no_guest_conferance").change(function() {
var val = Number(this.value);
var price = Number($('#price').val());
var subtotal = val * price;
$("#conferencesubtotal").text(subtotal);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" name="no_guest_conferance" class="conf_guest" id="no_guest_conferance" placeholder="Enter no. of guest" value="1" />
<input type="text" name="price" class="conf_guest" id="price" placeholder="Price" value="10" disabled="disabled"/>
<span style="float:left; margin-bottom:14px;" id="conference_subtotal">
<span id="conferencesubtotal"></span>
<span style="font-size:12px;">Sub Total</span>
</span>
you can get the value from
$("#conferencesubtotal").html(subtotal);
.val() work only on input, select and textarea. jquery .val() doc
Related
I've used jquery to get an "id" as a value for an input according to a dropdown value. Now the problem is, I want to use the 'id' to insert value to some other inputs. I don't know which event method to be used. For testing, I used the keyup method to check if the code works, when I manually type in a number, it works. So the problem is with the event method I choose. Please give me some suggestions.
//Get id
$(document).ready(function() {
$('#salary_eid').change(function() {
var sid = $(this).val();
var data_String = 'sid=' + sid;
$.get('search1.php', data_String, function(result) {
$.each(result, function(){
$('#can').val(this.c_id);
});
});
});
//display other information
$('#can').change(function() {
var id = $(this).val();
var data_String1 = 'id=' + id;
$.get('search.php', data_String1, function(result1) {
$.each(result1, function(){
$('#morning_rate').val(this.cMorning);
$('#night_rate').val(this.cNight);
$('#ot_rate').val(this.clientOt);
});
});
});
});
<label>Name</label>
<input type="text" name="salary_eid" />
<select id="salary_eid">
<option>opt1</option>
<option>opt2</option>
</select>
<input type="hidden" name="can" id="can" class="form-control" >
You can trigger the keyup() event from the id code, this will then work through a manual or jQuery edit,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
//Get id
$(document).ready(function() {
$('#salary_eid').change(function() {
var sid = $(this).val();
$('#can').val(sid).keyup();
});
});
//display other information
$(document).on('keyup', '#can', function() {
console.log($(this).val())
});
</script>
<label>Name</label>
<input type="text" name="salary_eid" />
<select id="salary_eid">
<option>opt1</option>
<option>opt2</option>
</select>
<input type="text" name="can" id="can" class="form-control" />
If you are going to hide the second input then I might suggest using a function instead without an input,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
//Get id
$(document).ready(function() {
$('#salary_eid').change(function() {
var sid = $(this).val();
display_info(sid)
});
});
//display other information
function display_info(value) {
console.log(value)
};
</script>
<label>Name</label>
<input type="text" name="salary_eid" />
<select id="salary_eid">
<option>opt1</option>
<option>opt2</option>
</select>
How can I get the value of the first input field from a list?
<button id="hello">get data</button><br><br>
<table> <td><label for="voucher_<?php echo $counter; ?>">D/N Number <?php echo $counter; ?></label><br>
<input type="text" name="voucher_<?php echo $counter; ?>" class="input-field exsmall-input" value="<?php echo $voucher; ?>" placeholder="D/N Number" id="voucher_<?php echo $counter; ?>" required>
</td></table>
When I run the above code the number of rows varies depending on the counter.If I want to get the value of the first DN number ,what shall I do ?
$(document).ready(function(){
$('#hello').click(function(){
var name = $("#voucher").val();
alert(name);
});
});
When I run this javascript I get undefined vales.
The reason you are getting the error is because you have used wrong selector to target input element. input element do not have id voucher. You need to put the ID to make existing code work.
Or, You can use attribute starts with selector here from current HTML:
$('#hello').click(function(){
var name = $("input[name^='voucher_']").val();
alert(name);
});
You can do it like below:-
$(document).ready(function(){
$('#hello').click(function(){
var name = $("div[id^='voucher']:visible:first").val();
alert(name);
});
});
Or:-
$(document).ready(function(){
$('#hello').click(function(){
var name = $("input[type=text]:visible:first").val();
alert(name);
});
});
Try this:-
$(document).ready(function() {
$('#hello').click(function() {
var name = $('table').find('input[type=text]').filter(':visible:first')
.val();
});
});
I have this code:
<div id = "askpost" class="row">
<input type="hidden" name="askid" id="askid" value="<?php echo $askpostid ?>">
</div>
and i want to get the id of the hidden input but when tried using this:
<script>
$(document).ready(function() {
$('input[name="iaskcomment"]').on('keyup', function(e){
e.preventDefault();
var comment = $(this).val();
var ask_id = $(this).siblings('.askid').val();
alert(ask_id); <----undefined
});
});
</script>
i even used this code :
var sid = $(this).closest("div#askpost").find("input[type='hidden']").val();
but also i get "undefined". what i wanted to do is to get the id of $askpostid
direct use $("#askid").val(). No need to use anything like siblings()
Example:-
$(document).ready(function() {
$('input[name="iaskcomment"]').on('keyup', function(e){
e.preventDefault();
var comment = $(this).val();
var ask_id = $('#askid').val();
alert(ask_id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "askpost" class="row">
<input name = "iaskcomment"><br>
<input type="hidden" name="askid" id="askid" value="2">
</div>
Note:- Your code doesn't have any input with name iaskcomment. I have added in my example to just show you how it will work.So check at your end.
[+] //each time I click this button the textbox will generate and I want to have a link beside each textbox, link is "remove" when I click "REMOVE" the textbox will remove..
[hello1] Remove
[hello2] Remove
[hello3] Remove
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var i=0,j=0;
var t1= new Array();
function createtext(){
i++;
t1[i]=document.createElement('input');
t1[i].type='text';
t1[i].name='text'+i;
t1[i].value = "hello"+i;
t1[i].size = 10;
document.forms[0].appendChild(t1[i]);
var mybr=document.createElement("br");
document.forms[0].appendChild(mybr);
}
</SCRIPT>
</HEAD>
<BODY >
<form action="" method="get" name="f1">
<input name="b1" type="button" onClick="createtext()" value="+">
<input name="b1" type="Submit"><br>
</form>
</BODY>
</HTML>
Well this is simple.
Just add a id attribute with your text field array that will be assigned to each newly created textarea like this:
t1[i].id='some_unique_suffix'+i
t1[i].onClick='remove("some_unique_suffix"'+i+')'
Then you can go on creating a remove link after each textfield via your loop and pass the id of that particular textfield to a remove function that will be called upon clicking on the remove link like this:
function remove(id)
{
$('#some_unique_suffix'+id).remove();
}
Hope you get the idea.
You can add a remove button along with the input tag like this:
var i=0,j=0;
var t1= [];
function add(){
i++;
var parent = document.forms[0];
var div = document.createElement('div');
var input = document.createElement('input');
input.type='text';
input.name='text'+i;
input.value = "hello"+i;
input.size = 10;
t1.push(input);
div.appendChild(input);
var removeButton = document.createElement("button");
removeButton.innerHTML = "Remove";
removeButton.onclick = function(e) {
this.parentNode.parentNode.removeChild(this.parentNode);
return(false);
};
div.appendChild(removeButton);
parent.appendChild(div);
}
Working demo: http://jsfiddle.net/jfriend00/ky9nv/
This code makes it easier to remove an input element and it's associated button by enclosing them in a containing div. A clicked button can then just get it's parent container and remove that.
And, since your question is tagged with jQuery (thought it doesn't save you a lot here), here's a version that uses jQuery:
var i=0,j=0;
var t1= [];
function add(){
i++;
var div = $('<div>');
var input = $('<input>')
.attr({
size: '10',
type: 'text',
name: 'text' + i,
value: 'hello' + i
}).appendTo(div).get(0);
t1.push(input);
$('<button>Remove</button>')
.click(function() {
$(this).parent().remove();
}).appendTo(div);
$("#myForm").append(div);
}
add();
add();
$("#add").click(add);
Working example: http://jsfiddle.net/jfriend00/nbXak/
<script type="text/javascript">
var i=0;
function createtext() {
i++;
$('<div id="field'+i+'"><input type="text" name="text'+i+'" value="Hello'+i+'" size="10" /> Remove</div>').appendTo('#inputsPlaceholder');
}
function removeField (id) {
$('#'+id).remove();
}
</script>
HTML:
<form action="" method="get" name="f1" id="f1">
<input name="b1" type="button" onclick="createtext();" value="+" />
<div id="inputsPlaceholder"></div>
<input name="b1" type="submit" />
</form>
Try it: http://jsfiddle.net/Z3L5C/
I want to add a comment system after my article,
php part code
<?php
...
while($result = mysql_fetch_array($resultset))
{
$article_title = $result['article_title'];
...
?>
<form id="postform" class="postform">
<input type="hidden" name="title" id="title" value="<?=$article_title;?>" />
<input type="text" name="content" id="content" />
<input type="button" value="Submit" class="Submit" />
</form>
...
<?php
}
?>
ajax part:
$(function($) {
$(document).ready(function(){
$(".Submit").click(function(){
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
var anyBlank = 0;
if(anyBlank == "0")
{
var title = $("#title").val();
var content = $("#content").val();
$.ajax({
type: "POST",
url: "ajax_post.php",
data: "title="+title+"&content="+content,
success: function(date_added){
if(date_added != 0)
{
structure = '<div class="comment_date_added">'+date_added+'</div><div id="comment_text"><div id="comment_content">'+content+'</div>';
$("#post_comment").prepend(structure);
}
});
});
ajax_post.php
echo $title;
echo $content;//get $title and $content and insert into database.
my question: <form id="postform" class="postform"> is written into a MYSQL_QUERY result circle. how to modify ajax part so that every div.submit can post its own value to ajax_post.php and then return the data into $("#post_comment").prepend(structure); Thanks to all.
You have to give the input fields a class instead of an ID. IDs have to be unique in an HTML document:
<form class="postform">
<input type="hidden" name="title" class="title" value="<?=$article_title;?>" />
<input type="text" name="content" class="content" />
<input type="button" value="Submit" class="Submit" />
</form>
Then you can make the data lookup relative to the clicked element:
var title = $(this).siblings('.title').val();
var content = $(this).siblings('.content').val();
I also suggest to pass an object to the data attribute for automatic URL encoding of the values:
data: {title: title, content: content}
Then, when you create a new entry for the #post_comment section, you have to give these elements also a class instead of an ID (and don't forget to use var!):
var structure = '<div class="comment_date_added">'+date_added+'</div><div class="comment_text"><div class="comment_content">'+content+'</div>';
or more jQuery like:
$('<div />', {class:'comment_data_added'})
.append($('<div />', {class: 'comment_date_added', text: date_added}))
.append($('<div />', {class: 'comment_content', text: content}))
.prependTo('#post_comment');
Further notes:
You have somehow a nested ready() handler:
$(function($) { // <--┐
$(document).ready(function(){ // <--┴- this is the same
//...
});
});
Either do:
jQuery.noConflict();
jQuery(function($) {
$('.Submit')...
)};
or
$(function() {
$('.Submit')...
)};
This part in the click handler:
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
var anyBlank = 0;
does not seem to do anything. Besides that, the submit button has no ID and no name.
Depending on the further structure of your PHP code, you should have a look at the alternative syntax for control structures. It makes easier to mix PHP and HTML without fiddling around with brackets.