enter image description here
how do i create this in html.
when a user enter a value in textbox and click on Addition button then textbox became empty and addition button be disabled. then user enter second value and click on = button that show the result in textbox.
It's really hard to understand what are you exactly want based on question, however I've prepared a basic fiddle for you that should fix your problem or hopefully gives you and idea:
https://jsfiddle.net/Lzg5rfgr/
<table>
<tr>
<td>
<input type="number" id="userNumber">
</td>
</tr>
<tr>
<td>
<button id="plus">+</button>
</td>
<td>
<span id="enteredNumber"></span>
</td>
</tr>
<tr>
<td>=</td>
<td>
<span id="result">0</span>
</td>
</tr>
</table>
javascript using jquery:
$("#plus").on('click', function(){
var num = parseInt($("#userNumber").val()); // get the number
$("#result").html(num + parseInt( $("#result").html()) );
$("#userNumber").val(null); // empty the input box
$("#enteredNumber").html(num);
})
Related
I am having a issue with HTML and jQuery programming.
I am making a bulletin board with HTML and jQuery, with 2 textboxes and a button.
$(document).ready(function(e) {
$('save').click(function() {
const name = $('name').val();
const words = $('words').val();
$.post(
"http://localhost:8000/board_write",
{
name: words
},
function(data, status) {
}
)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
<tr>
<td class="vert" bgcolor="">
Name
</td>
<td>
<input class="name">
</td>
</tr>
<tr>
<td bgcolor="">
Anything you'd like to say
</td>
<td>
<textarea class="words" cols="40" rows="5" placeholder="please enter anything">
</textarea>
</td>
</tr>
<tr>
<td>
<input class="save" type="button" onclick="write()" value="Save">
</td>
</tr>
</table>
And, I also coded with jQuery to send the data of the two textboxes to localhost:8000, which is a node.js server to log the data to the console.
When I click the button, the page vanishes. What causes the situation? And, how can I solve the problem?
You have onclick = "document.write()"; that explicitly deletes the document . https://www.w3schools.com/jsref/met_doc_write.asp
Explanation: the code in onclick is scoped such: {window{document{element{}}}}; if you meant to implement a write() function, do so and invoke it by window.write(), or name it something differently to document.write. Otherwise, write() will de resolved to document.write().
Hi I fetching some data from database and constructing the table.
foreach($data_array->LINEDETAILS as $data){
if(empty($data->CREDITEDAMOUNT)){
$data->CREDITEDAMOUNT=0;
}
$linetotal='';
$linetotal = $data->LINEAMOUNT + $data->TAXAMOUNT;
$column='<td>
<input onclick="sum_value(\''.trim($data->LINEAMOUNT).'-'.$data->TAXAMOUNT.'\',this.checked)" type="checkbox" name="checkdata'.$i.'" id="checkdata'.$i.'" value="'.$data->CUSTOMERTRXLINEID.'"style="position: inherit;" checked />
</td>
<td>'.$data->DESCRIPTION.'</td>
<td>'.$data->ORIGINALLINEAMOUNT.'</td>
<td>'.$data->CREDITEDAMOUNT.'</td><td>'.$data->LINEAMOUNT.'<input type="text" value="'.$data->LINEAMOUNT.'" hidden="true"></td>
<td>'.$data->TAXAMOUNT.'</td><td>'.$linetotal.'</td>
<td>
<select>
<option>--</option>
<option>%</option>
<option>Area</option>
<option>Period In Months</option>
</select>
</td>
<td><input type="text"></td>
<td><input type="text"></td>';
$row .= '<tr>'.$column.'</tr>';
$grandtotal = $grandtotal + $data->LINEAMOUNT + $data->TAXAMOUNT;
$i++;
}
This code returns one to many lines of data.
Each like has a dropdown of 3 value based upon which calculations will be done. If I select as % and Credit value as 80%, the approved line amount should be calculated onblur 80% of Eligible line amount.
I tried to set id's for each elements and do the math using JavaScript it won't calculate and give the result. it gives an error since ID of an element should be unique and since the elements are looped the ID also gets looped. Please help.
Give a try for : "onChange" of the dropdown value and then fetch the % value and calculate in your javascript code and display on the filed that is required, and mark the field as read-only if you want it "not" to be changed.
You can dynamically add id for each element as in the loop.. abd after that fetch all the records till the max value or iteration (say i)
You can add a class on each input field. For eg.
jQuery('.credit_val').change(function(){
var eligible = parseFloat(jQuery(this).parents('tr').find('.eligible_line').text());
var credit = parseFloat(jQuery(this).val());
jQuery(this).parents('tr').find('.approve_amount').val(eligible*credit/100);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="eligible_line">1000</div>
</td>
<td>
<input class = "credit_val">
</td>
<td>
<input class = "approve_amount">
</td>
</tr>
<tr>
<td>
<div class="eligible_line">2000</div>
</td>
<td>
<input class = "credit_val">
</td>
<td>
<input class = "approve_amount">
</td>
</tr>
</table>
Im trying to build a dynamic input box. When I click on the numpad I want it to show on the box, and limit that box to one number. When it reaches its limit the next input would go to the next box.
I dont want the user to able to click and manually enter a value on the input box, i just want them to use the numpad. Is the input box a good solution to this?
Here's my code:
https://jsfiddle.net/Piq9117/dwxt928c/
This code puts the number that I clicked on all the boxes. How do I write it so it will go to the other box when the box already has a number?
$(function () {
var $passBox = $('input[type="text"]');
var $numpad = $('.numpad');
$numpad.on('click', function () {
var $numValue = $(this).text();
$passBox.val($numValue);
})
});
DEMO
<div class="passcode">
<div class="passcodeBox">
<ul>
<li><input type="text" readonly></li>
<li><input type="text" readonly></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<table>
<tbody>
<tr>
<td class="numpad">1</td>
<td class="numpad">2</td>
<td class="numpad">3</td>
</tr>
<tr>
<td class="numpad">4</td>
<td class="numpad">5</td>
<td class="numpad">6</td>
</tr>
<tr>
<td class="numpad">7</td>
<td class="numpad">8</td>
<td class="numpad">9</td>
</tr>
<tr>
<td></td>
<td class="numpad">0</td>
</tr>
</tbody>
</table>
</div>
Add attr readonly in input
Make your input fields as readonly, then replace the following script, you ll get result as you expected.
$(function() {
var $numpad = $('.numpad');
var n=0;
$numpad.on('click', function() {
var $passBox = $('input[type="text"]:eq('+n+')');
n=n+1;
if(n>1)
n=0;
var $numValue = $(this).text();
$passBox.val($numValue);
});
});
DEMO
I am trying to set focus on textboxes 1 by 1 on tab press but its not working for me.
here is code that i have tried:
function showstep2() {
document.getElementById('step2').style.visibility = 'visible'
document.getElementById('prevOrdQuan').focus();
}
function showstep3() {
document.getElementById('step3').style.visibility = 'visible';
document.getElementById('takeOutAmt').focus();
}
function showstep4() {
document.getElementById('step4').style.visibility = 'visible';
document.getElementById('compsPerWeek').focus();
}
HTML:
<table style="width: 100%;" align="left">
<tbody>
<tr>
<td>How many TakeOut Orders do You do each week?</td>
<td><input tabindex="1" type="text" name="prevOrdQuan" id="prevOrdQuan" size="6" value="7" onblur=" doCalc1(); showstep2();" /></td>
</tr>
</tbody>
</table>
<table id="step2" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How many NEW TakeOut Orders do You expect each week? (15% Expected)</td>
<td><input tabindex="2" type="text" name="newOrdQuan" id="newOrdQuan" size="6" value="7" onblur="doCalc(); showstep3();" /></td>
</tr>
</tbody>
</table>
<table id="step3" style="width: 100%; visibility: hidden;" align="left">
<tbody>
<tr>
<td>How Much Is Your Average Takeout Order?</td>
<td><input tabindex="3" type="text" name="takeOutAmt" id="takeOutAmt" size="6" value="20" onblur="doCalc2(); showstep4();" /></td>
</tr>
</tbody>
</table>
There are 3 textboxes,for 1st textbox i have set focus on load like this:
function setFocus() {
document.getElementById("prevOrdQuan").focus();
}
It sets the focus for 1st textbox.after pressing tab on 1st textbox it displays 2nd textbox but focus is not set on second textbox.
This is only the problem that i need to resolve.
You have a problem in the showstep2 function, you are focussing the element with the id prevOrdQuan which is the first text box. I think you wanted to focus newOrdQuan.
So change
document.getElementById('prevOrdQuan').focus();
to
document.getElementById('newOrdQuan').focus();
And it should work.
EDIT
You also need anything focusable below your text boxes (an additional input etc). Otherwise if you press tab on the first (and only) textbox, the browser focusses the address bar and thus firing the onblur event on both next textboxes and displaying both at the same time.
Here is an example of what I mean: http://jsfiddle.net/24TK4/1/
2nd EDIT
I think this is an elegant solution of the problem: http://jsfiddle.net/24TK4/2/
Look at the link at the and of the HTML code, it just displays an invisible link.
I have a table like this
<tr>
<td>No.</td>
<td>Username</td>
<td>Password</td>
<td>Valid Until</td>
<td>Delete</td>
<td>Edit</td>
</tr>
<tr>
<td>1</td>
<td id="1">
<div class="1u" style="display: none;">Username</div>
<input type="text" class="inputTxt" value="Username" style="display: block;"/>
</td>
<td id="1">
<div class="1p" style="display: none;">Password</div>
<input type="text" class="inputTxt" value="Password" style="display: block;"/></td>
<td>18 Jul 09</td>
<td><button value="1" class="deleteThis">x</button></td>
<td class="editRow">Edit</td>
</tr>
When edit is clicked i run this function this replaces the text with input field, so what i want is to cancel this back to text when somewhere else is click instead of save.
$('.editRow').click(function() {
var row = $(this).parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt').slideDown('fast');
}).blur(function() {
row.find('.inputTxt').slideUp('fast');
row.find('.1u').slideDown('fast');
row.find('.1p').slideDown('fast');
});
with this function text changes to input fields but input fields doesnt change back to text when i click somewhere else.
Thank You.
There's a nice plugin for this
Just edited my function because the plugin didn't suite well for my application
$('.editRow').live('click', function() {
var row = $(this).parent('td').parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt').slideDown('fast');
$(this).parent('td').empty().append('<a href=# class=cancel>Cancel</a> / <a href=# class=save>Save</a>');
});
Your blur is applying on the button td.editRow but not applying on the input fields. I think you should separate the code and it should work.
$('.editRow').click(function() {
var row = $(this).parent('tr');
row.find('.1u').slideUp('fast');
row.find('.1p').slideUp('fast');
row.find('.inputTxt')
.slideDown('fast')
.blur(function() {
row.find('.inputTxt').slideUp('fast');
row.find('.1u').slideDown('fast');
row.find('.1p').slideDown('fast');
});
});