Add div above textbox without changing position of textbox

Add div above textbox without changing position of textbox - javascript

I need to add some HTML content (images, labels, etc.) above a table cell that contains a text box. There are going to be at least 10 rows per page with 8 columns in each row. All 8 columns contain a text box.
I've already put together some jQuery that will show and hide this new content area above the table cell, but the CSS is not correct and the input boxes are getting pushed down... The content area that I'm referring to is the DIV being added by the jQuery plugin with the inputbanner class.
CSS
.inputbanner
{
background-color: Orange;
position: absolute;
top: -20px;
display: none;
}
HTML
<tr>
<td class="itemdescr">
SWR: 1123 My Biggest Project
</td>
<td>
<input type="text" maxlength="2" class="timebox" />
</td>
<td>
<input type="text" maxlength="2" class="timebox"/>
</td>
<td>
<input type="text" maxlength="2" class="timebox"/>
</td>
<td>
<input type="text" maxlength="2" class="timebox"/>
</td>
<td>
<input type="text" maxlength="2" class="timebox"/>
</td>
<td>
<input type="text" maxlength="2" class="timebox"/>
</td>
<td>
<input type="text" maxlength="2" class="timebox"/>
</td>
</tr>
<script language="javascript">
$().ready(function() {
$('.timebox').inputmenu();
});
</script>
jQuery Function
(function($) {
$.fn.inputmenu = function() {
function createInputMenu(node) {
$(node).bind('focus', function() {
$(this).parent().toggleClass('highlight');
$(this).prev('div.inputbanner').toggle();
});
$(node).bind('blur', function() {
$(this).parent().toggleClass('highlight');
$(this).prev('div.inputbanner').toggle();
});
$(node).parent().prepend('<div class="inputbanner"><img src="../../Content/Images/arrow_left_active.gif" />&nbsp<img src="../../Content/Images/arrow_left_inactive.gif" /></div>');
}
return this.each(function() {
createInputMenu(this);
});
}
})(jQuery);

Related

JQuery: tr onblur or any event outside tr border

How to call function with tr onblur event or how to detect any click-event outside tr border?
Thanks
Html:
<tr id="tr_0" class="table" onblur="Dict[#i].Canc(#j)">
<td id="frst_0" class="tabl">
<label id="lbl0_0" class="tdLbl0_0">Some name</label>
<input id="inpt0_0" class="tdinpt0" type="text" size="10" hidden onblur="Dict[#i].CheckInput0(#j)" />
</td>
<td id="sec_0" class="tabl" onclick="Dict[#i].EditInput1(#j)">
<label id="lbl1_0" class="tdLbl1">Value</label>
<input id="inpt1_0" class="tdinpt1" type="number" max="99" min="0" style="width: 38px" hidden onblur="Dict[#i].CheckInput1(#j)" onfocus="Dict[#i].ClearInput1(#j)" />
</td>
<td>
<button id="suc_0" class="tdbtn" hidden onclick="Dict[#i].Suc(#j)">Success</button>
<button id="edit_0" class="tdbtn" onclick="Dict[#i].Edit(#j)">Edit</button>
<button id="del_0" class="tdbtn" onclick="Dict[#i].Del(#j)">Delete</button>
<button id="canc_0" class="tdbtn" onclick="Dict[#i].Canc(#j)" hidden>Cancel</button>
</td>
</tr>

Use jQuery.closest to see if the target element is inside a tr or a tr like this:
$(document).click(function(e) {
if($(e.target).closest("tr").length)
alert("tr was clicked!");
else
alert("no tr was clicked!");
});
If you want to just check if the element clicked is a tr or not then use jQuery.is like this:
$(document).click(function(e) {
if($(e.target).is("tr"))
alert("tr was clicked!");
else
alert("no tr was clicked!");
});
Example of the first case:
$(document).click(function(e) {
if ($(e.target).closest("tr").length) // if the length is != 0 (a tr is found)
alert("tr was clicked!");
else // otherwise ...
alert("no tr was clicked!");
});
tr {
background: #F99;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="tr_0" class="table" onblur="Dict[#i].Canc(#j)">
<td id="frst_0" class="tabl">
<label id="lbl0_0" class="tdLbl0_0">Some name</label>
<input id="inpt0_0" class="tdinpt0" type="text" size="10" hidden onblur="Dict[#i].CheckInput0(#j)" />
</td>
<td id="sec_0" class="tabl" onclick="Dict[#i].EditInput1(#j)">
<label id="lbl1_0" class="tdLbl1">Value</label>
<input id="inpt1_0" class="tdinpt1" type="number" max="99" min="0" style="width: 38px" hidden onblur="Dict[#i].CheckInput1(#j)" onfocus="Dict[#i].ClearInput1(#j)" />
</td>
<td>
<button id="suc_0" class="tdbtn" hidden onclick="Dict[#i].Suc(#j)">Success</button>
<button id="edit_0" class="tdbtn" onclick="Dict[#i].Edit(#j)">Edit</button>
<button id="del_0" class="tdbtn" onclick="Dict[#i].Del(#j)">Delete</button>
<button id="canc_0" class="tdbtn" onclick="Dict[#i].Canc(#j)" hidden>Cancel</button>
</td>
</tr>
</table>
Example of the second case:
$(document).click(function(e) {
if ($(e.target).is("tr")) // if the target of the click is a tr
alert("tr was clicked!");
else // otherwise
alert("no tr was clicked!");
});
tr {
background: #F99;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="tr_0" class="table" onblur="Dict[#i].Canc(#j)">
<td id="frst_0" class="tabl">
<label id="lbl0_0" class="tdLbl0_0">Some name</label>
<input id="inpt0_0" class="tdinpt0" type="text" size="10" hidden onblur="Dict[#i].CheckInput0(#j)" />
</td>
<td id="sec_0" class="tabl" onclick="Dict[#i].EditInput1(#j)">
<label id="lbl1_0" class="tdLbl1">Value</label>
<input id="inpt1_0" class="tdinpt1" type="number" max="99" min="0" style="width: 38px" hidden onblur="Dict[#i].CheckInput1(#j)" onfocus="Dict[#i].ClearInput1(#j)" />
</td>
<td>
<button id="suc_0" class="tdbtn" hidden onclick="Dict[#i].Suc(#j)">Success</button>
<button id="edit_0" class="tdbtn" onclick="Dict[#i].Edit(#j)">Edit</button>
<button id="del_0" class="tdbtn" onclick="Dict[#i].Del(#j)">Delete</button>
<button id="canc_0" class="tdbtn" onclick="Dict[#i].Canc(#j)" hidden>Cancel</button>
</td>
</tr>
</table>

You can bind the click events on the document itself, and check the event.target object, if parents of the event.target don't contain the tr, manually trigger the blur event on tr.
$.fn.bindBlur = function(callback){
this.each(function(){
var that = this;
$(document).on("click", function(e){
if(that.is($(e.target) || that.has($(e.target))){
return callback();
}
});
});
};

When I hide an element on my page, the cursor tabs to the top instead of the next line. How do I stop this?

I have a form that has a checkbox for whether or not a textbox (call it "text1") should be shown. They are located on the same line, as well as a span indicating what they are for. There is another textbox ("text2") on a line above it that, if set to 0, hides text1 as well as its corresponding checkbox and span. This form is being designed for people that want to tab through it easily, like their current system. My problem is that when you set text2 to 0, it resets the cursor to the top of the page so that they have to tab through a lot of fields they have already done to get back to where they were. How do I stop this? Here's some example code:
HTML
<form>
<input type="text" id="text0" tabindex = 1/>
....
<table>
<tr>
<td>
<input type="text" id="text2" tabindex = 2/>
<input type="checkbox" id="check1" tabindex = 2/>
<span id="span1" tabindex = 2>Span Text</span>
<input type="text" id="text1" tabindex = 2/>
<input type="text" id="text3" tabindex = 2 readonly/>
</td>
<td>
<input type="text" id="text4" tabindex = 3/>
<input type="text" id="text5" tabindex = 3/>
</td>
</tr>
<tr>
<td>
<input type="text" id="text6" tabindex = 2/>
<input type="text" id="text7" tabindex = 2/>
</td>
<td>
<input type="text" id="text8" tabindex = 3/>
<input type="text" id="text9" tabindex = 3/>
</td>
<tr>
</table>
</form>
CSS:
#text1 {
visibility:hidden;
}
JS:
$("#text2").change(function() {
if ($(this).val() == 0) {
$('#check1').css("visibility", "hidden");
$('#span1').css("visibility", "hidden");
$('#text1').css("visibility", "hidden");
}
else {
$('#check1').css("visibility", "visible");
$('#span1').css("visibility", "visible");
$('#text1').css("visibility", "visible");
}
});

I don't see any cursor issue, but I fixed your jQuery and html code. Run this snippet:
$("#text2").on('keyup',function(){
if ($(this).val() == '0') {
$('#check1').css("visibility", "hidden");
$('#span1').css("visibility", "hidden");
$('#text3').attr('tabindex', '2');
$('#text4').attr('tabindex', '3');
} else {
$('#check1').css("visibility", "visible");
$('#span1').css("visibility", "visible");
$('#text1').css("visibility", "visible");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="textbox" id="text2" placeholder="text 2" tabindex = 1/>
<input type="checkbox" id="check1" tabindex = 2/>
<span id="span1">Span Text</span>
<input type="textbox" id="text3" tabindex= 3/ placeholder="text 3">
<input type="textbox" placeholder="text 4" id="text4" tabindex= 4/>
</form>

Why table id is not identified by getElementById()

Hi I am trying to get the id of my table and calculate the number of rows in my table.
I used this code
var table =document.getElementById("test");
var i = table.rows.length;
This doesnot work for me when I use window.onload It works. This my working function
window.onload = function() {
var table =document.getElementById("test");
var i = table.rows.length;
}
Now I need this i variable used in another function. How to make this i variable global. Any problem with my code?
Can some one help me code?
Edit 01
<table id="test">
<thead>
<tr>
<td style="width:80px;"><img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/employee.svg"></td>
<td style="width:35px;"><img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/start_time.svg"></td>
<td style="width:35px;"><img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/id.svg"></td>
<td style="width:145px;"><img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/Description.svg"></td>
<td style="width:45px;"><img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/Type.svg"></td>
<td style="width:45px;"> <img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/qty_prch.svg"></td>
<td style="width:45px;"> <img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/qty_used.svg"></td>
<td style="width:70px;"> <img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/Price.svg"></td>
<td style="width:70px;"> <img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/discount.svg"></td>
<td style="width:70px;"> <img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/Tax.svg"></td>
<td style="width:70px;"> <img src="http://localhost/elfanto/elfanto_billing/assets/img/ticket_page/Total_01.svg"></td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="employee[]" value="" style="width:80px;" />
</td>
<td>
<input type="text" name="start_time[]" value="" style="width:35px;" />
</td>
<td>
<input type="text" name="pid[]" onChange="get_values(this.value)" value="" style="width:35px;" />
</td>
<td>
<input type="text" name="description[]" id="description1" value="" style="width:145px;" />
</td>
<td>
<input type="text" name="type[]" id="type1" style="width:45px;" />
</td>
<td>
<input type="text" name="qty_prch[]" id="qty_prch1" style="width:45px;" />
</td>
<td>
<input type="text" name="qty_used[]" id="qty_used1" style="width:45px;" />
</td>
<td>
<input type="text" name="price[]" id="price1" style="width:70px;" />
</td>
<td>
<input type="text" name="discount[]" id="discount1" style="width:70px;" />
</td>
<td>
<input type="text" name="tax[]" id="tax1" style="width:70px;" />
</td>
<td>
<input type="text" name="total[]" id="total1" style="width:70px;" />
</td>
</tr>
</tbody>
</table>
I need to use that variable i in this following javascript
function displayResult()
{
document.getElementById("test").insertRow(-1).innerHTML = '<td><input type="text" name="employee[]" value="" style="width:80px;"/></td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" onChange="get_values(this.value)" style="width:35px;"/></td><td><input type="text" name="description[]" id="description[x]" value="" style="width:145px;"/></td><td><input type="text" id="type[x]" value="" style="width:45px;"/></td><td><input type="text" id="qty_used[x]" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td>';
}
function get_values(val)
{
$.ajax({
url: baseurl+'admin/billing/getdetails',
type: 'post',
data : {val:val},
success: function (response) {
if(response!="")
{
var json=jQuery.parseJSON(response);
$('#description1').val(json.description);
$('#type1').val(json.type);
$('#qty_used1').val(json.cost);
}
},
error: function(response){
alert("error");
}
});
}

I would slightly change the setup... :)
Change all the numbered ids to unnumbered classes (also in the displayResult function)
id="description1" --> class="description"
id="type1" --> class="type"
...
function displayResult() {
var row = document.getElementById("test").insertRow(-1);
row.innerHTML = '<td><input type="text" name="employee[]" value="" style="width:80px;"/></td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td>';
}
Remove the "onChange" attribute from the newly inserted row and instead use a "global" change handler on the table using event delegation - (methods used in the change handler: .closest(), .index())
$(function() {
$('#test').on('change', 'input[name="pid[]"]', function() {
var indexOfTheChangedRow = $(this).closest("tr").index();
get_values(this.value, indexOfTheChangedRow);
});
});
Change the signature of get_values() to accept an additional parameter - the index of the changed row
function get_values(val, rowIndex) {
//...
}
Change the success handler of the ajax call to use the new layout
$.ajax({
url: baseurl + 'admin/billing/getdetails',
type: 'post',
data: {
val: val
},
success: function (indexOfTheChangedRow, response) {
if (response != "") {
var json = jQuery.parseJSON(response),
rowToUpdate = $("#test tr:nth-child(" + (indexOfTheChangedRow + 1) + ")");
// add the changed row as the context to restrict the search for the classes to this one row only
$('.description', rowToUpdate).val(json.description);
$('.type', rowToUpdate).val(json.type);
$('.qty_used', rowToUpdate).val(json.cost);
}
}.bind(window, rowIndex),
error: function (response) {
alert("error");
}
});
I'm using .bind() to "pin" the clicked row index to this ajax request (the success handler).
Now you can add as many rows as you want and you won't have to mess around with numbered ids :)

Is there anything stopping you from having this other function inside the onload closure as well?
window.onload = function() {
var table = document.getElementById("test"),
i = table.rows.length,
doStuff = function () {
// has access to i
},
doMoreStuff = function () {
// also has access to i
},
get_values = function () {
// also has access to i
};
document.getElementsByName("pid[]")[0].addEventListener("change", get_values);
}
Edit: You can remove your onChange attribute from the HTML and add an event handler in your JavaScript

You can declare the scope of variable as global.
var i = null;
window.onload = function() {
var table =document.getElementById("test");
i = table.rows.length;
}

Autocomplete isn't working

I have a problem with my autocomplete. When I use the first one input text will be used for autocomplete but when I use add function that I create to append the same element like the first one it doesn't work.
Here is my code:
<script>
$(document).ready(function(){
$("#addCF").click(function(){
$("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="med" name="customFieldName[]" value="" placeholder="รายชื่อยา" /> <input type="text" class="code" name="customFieldValue[]" value="" placeholder="Input Value" /> Remove</td></tr>');
});
$("#customFields").on('click', '#remCF', function(){
$(this).parent().parent().remove();
} );
});
</script>
<script>//auto complete Code
$(function() {
$('.med').autocomplete({
source: "show.php",minLength: 2,
select:function( event, ui ) {
$('#name').val(ui.item.name);
}
});
});
</script>
<table class="form-table" id="customFields">
<div id="name" ></div>
<tr valign="top">
<th scope="row"><label for="customFieldName">Custom Field</label></th>
<td>
<input type="text" class="med" name="customFieldName[]" value="" placeholder="รายชื่อยา" />
<input type="text" class="code" name="customFieldValue[]" value="" placeholder="จำนวน" />
ADD
</td>
</tr>
</table>
http://jsfiddle.net/earc4436/3/

This is happening because you are using an ID in your Javascript, when you add the second field they are duplicated. You either need to use a class or change the ID for each field in your form.
<input type="text" class="code" id="customFieldValue" name="customFieldValue[]"
value="" placeholder="จำนวน" />

Input field show/hide and submit issue with Javascript and html code

Well I've html form where 2 radio button exist. 1) Fixed 2) Tiered.
Fixed radio button has 2 field: 1) Fees 2) Additional Fees
Tiered radio button has 3 field : 1) Tier 1% 2) Tier 1$ 3) Tier 2%
So, If fixed radio button is selected then "Fees" and "Additional Fees" field should be show.
And if Tiered radio button is selected then only "Tier 1%" and "Tier 1$" and "Tier 2%" and "Additional Fees" field should be show.
Now First issue is : after first load the page it's showing Fees and Addition Fees field. It's ok. But if i select Tiered radio button it's show all field including "Fees". but I don't want to show this only "Fees" field.
Second Issue is : If i select Tirered it's process the page but if select Fixed then it's don't submit the page.
Html Form
<form action="agent-quote-submitted.php?property_id=<?=$property_id?>" method="post" name="regForm" id="regForm" >
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<tr>
<td>Type:</td>
<td><input type="radio" value="F" id="offer_typef" name="offer_type" required /> <b>Fixed</b> </td>
<td><input type="radio" value="T" id="offer_typet" name="offer_type" required /> <b>Tiered</b></td>
<script type="text/javascript">
$('#regForm').change(function() {
if ($('#offer_typet').prop('checked')) {
$('#show-me').show();
} else {
$('#show-me').hide();
}
});
$('#regForm').change(function() {
if ($('#offer_typef').prop('checked')) {
$('#show-me2').show();
} else {
$('#show-me2').hide();
}
});
</script>
</tr>
<tr>
<td colspan="3">
<div id='show-me' style='display:none'>
<div class="form-group">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<tr>
<td>%</td>
<td><input name="trate1" onkeypress="validate(event)" placeholder=" Tier 1 %" type="text" id="trate1" value="<?=$trate1?>" size="40" class="form-control" required ></td>
</tr>
<tr>
<td>$</td>
<td><input name="trate1dollar" onkeypress="validate(event)" placeholder=" Tier 1 $" type="text" id="trate2" value="<?=$trate2?>" size="40" class="form-control" required > </td>
</tr>
<tr>
<td>%</td>
<td><input name="trate2" onkeypress="validate(event)" placeholder=" Tier 2 %" type="text" id="trate2" value="<?=$trate2?>" size="40" class="form-control" required></td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<div id='show-me2' style='display:none'>
<td>%</td>
<td>
<input name="feestructure" placeholder=" Fees " class="form-control" onKeyPress="validate(event)" value="" type="text" id="feestructure" size="40" required>
</td>
<td></td>
</div>
</tr>
<tr>
<td>$</td>
<td><span class="required inputfield2"></span><br>
<input name="budget" placeholder=" Additional fees " onkeypress="validate(event)" type="text" value="<?=$budget?>" id="fees" size="40" class="form-control" required>
</td>
<td></td>
</tr>
<tr>
<td colspan="3"><input name="doRegister" type="submit" id="doRegister" value="Submit Quote" class="btn btn-primary"></td>
</tr>
</table>
</form>

Okay, this puzzled me for a bit and I tore apart your form bit by bit until I realized you have your fixed fees wrapped in a div that is nested around table rows. That ain't gonna work.
Make sure one of your radios is checked on load and you set your displays accordingly.
Make sure you can correctly hide-show elements (you can't partially hide row elements by wrapping them in a div. That is not allowed. You can wrap a table in a div, but not a row or cell. You can, however, simply hide/show the tr instead (which I do in the fiddle).
I would recommend adding just one listener (binding) and putting all the logic in there instead of two different binds.
I made a fiddle here: http://jsfiddle.net/C9jad/6/
$(function () {
$('tr#feesFixed')[0].style.display = 'none';
$('div#feesTiered')[0].style.display = 'none';
toggleFees(); // Call this once on ready
console.log($('#offer_typef').prop('checked'))
console.log($('#offer_typet').prop('checked'))
// Single binding here to call encapsulated logic
$('#regForm input:radio').on('click', function(event){
toggleFees();
});
});
function toggleFees() {
if( $('#offer_typef').prop('checked') ) {
$('#feesTiered').hide();
$('#feesFixed').show();
} else {
$('#feesFixed').hide();
$('#feesTiered').show();
}
};
I tore up a few pieces until I realized your real problem was the illegal nesting.
But that should help you fix it straight away.

#1 I will assume that you're working under Bootstrap CSS framework because your <input> class is form-control
#2 I did remove all <table> tags because I couldn't understand anything from your HTML structure
First issue is : after first load the page it's showing Fees and
Addition Fees field. It's ok. But if i select Tiered radio button it's
show all field including "Fees". but I don't want to show this only
"Fees" field.
the solution for this is to wrap:
fixed input into a its own div
tierd inputs (3) into a another div
Leaving Additional fees input without a div since it must be present in both cases
I swapped and assigned show-me to Fixed and show-me2 to tierd (to keep things organized)
HTML:
<form action="" method="post" name="regForm" id="regForm" >
Type: <input type="radio" value="F" id="offer_typef" name="offer_type" required checked /> <b>Fixed</b>
<input type="radio" value="T" id="offer_typet" name="offer_type" required /> <b>Tiered</b>
<!-- Fixed -->
<div id='show-me'>
% <input name="feestructure" placeholder=" Fees " class="form-control" onKeyPress="validate(event)" value="" type="text" id="feestructure" size="40" required />
</div>
<!-- Tierd -->
<div id='show-me2' style='display:none'>
<div class="form-group">
% <input name="trate1" onkeypress="validate(event)" placeholder=" Tier 1 %" type="text" id="trate1" value="<?=$trate1?>" size="40" class="form-control" required />
$ <input name="trate1dollar" onkeypress="validate(event)" placeholder=" Tier 1 $" type="text" id="trate2" value="<?=$trate2?>" size="40" class="form-control" required />
% <input name="trate2" onkeypress="validate(event)" placeholder=" Tier 2 %" type="text" id="trate2" value="<?=$trate2?>" size="40" class="form-control" required />
</div>
</div>
<!-- Additional field -->
$ <span class="required inputfield2"></span><br>
<input name="budget" placeholder=" Additional fees " onkeypress="validate(event)" type="text" value="<?=$budget?>" id="fees" size="40" class="form-control" required />
<!-- Submit button -->
<input name="doRegister" type="submit" id="doRegister" value="Submit Quote" class="btn btn-primary" />
</form>
Second Issue is : If i select Tirered it's process the page but if
select Fixed then it's don't submit the page.
this caused because all of your form inputs has the attribute required, when you click tiered radio button the show-me display is set to none which makes impossible for the form to be submitted unless you remove the required attribute with JS help or validate the form on server-side
I did simple required changes on JS side
#offer_typef attribute changes effect the div #show-me
#offer_typet attribute changes effect the div #show-me2
JS:
$('#regForm').change(function() {
if ($('#offer_typef').prop('checked')) {
$('#show-me').show();
$('#show-me input').attr('required');
} else {
$('#show-me input').removeAttr('required');
$('#show-me').hide();
}
});
$('#regForm').change(function() {
if ($('#offer_typet').prop('checked')) {
$('#show-me2').show();
} else {
$('#show-me2').hide();
}
});
Here's the jsFiddle
Remember: Making an input hidden (display:none;) doesn't mean that it won't be passed to server!

We Keep Coding

JavaScript is the programming language of the Web.

Add div above textbox without changing position of textbox - javascript

Related

JQuery: tr onblur or any event outside tr border

When I hide an element on my page, the cursor tabs to the top instead of the next line. How do I stop this?

Why table id is not identified by getElementById()

Autocomplete isn't working

Input field show/hide and submit issue with Javascript and html code

Categories

Resources