We Keep Coding

Write field value to embedded form

I would have thought that this would be an easy task but for some reason I can't get it working. I have a FormCraft form embedded in my webpage which contains a hidden field. I would like to write the value of that field from a variable.
HTML of the form:
<div class="form-page form-page-1 form-page-last elements-count-17" style="">
<div class="is-page ">
<div class="form-element form-element-type-text required-false default-visible " data-field="field33" style="width: 100%; flex-basis: 100%;">
<div class="form-field"><input type="hidden" class="trigger-logic " name="field33" value="" autocomplete="off"><div class="text-cover-compile "><p class=""><img src="https://formcrafts.com/file/view/d0b2560bd4dad6910239825c34e51adb/Application%20header" alt=""></p></div></div>
</div><div class="form-element form-element-type-one-line-text required-true default-visible " data-field="field15" style="width: 50%; flex-basis: 50%;">
<div class="form-field"><label class=""><span class="label-cover"><span class="label ">First Name<span class="asterisk "></span></span><span class="sub-label "></span></span><span class="field-input-cover"><input aria-label="First Name" type="text" class="trigger-logic " name="field15" tooltip="" title="" placeholder="" data-input-validate="none" data-input-mask=""></span></label></div>
</div><div class="form-element form-element-type-hidden required-false default-visible " data-field="field23" style="width: 100%; flex-basis: 100%;">
<div class="form-field"><div class="field-input-cover "><span class="label ">utm_campaign</span><span class="sub-label">Hidden Field</span><input type="hidden" class="trigger-logic trigger-math" name="field23" value="" autocomplete="off"></div></div>
</div><div class="form-element form-element-type-submit required-false default-visible " data-field="field12" style="width: 100%; flex-basis: 100%;">
<div class="form-field"><button aria-label="CONTINUE" type="submit" class="button form-button submit-button "><span class="submit-button-text trigger-math ">CONTINUE</span><span style="border-color: ; border-left-color: transparent" class="loader loader-white"></span></button><div class="submit-response "></div></div>
</div>
</div>
</div>
<div class="rg-right"><span></span></div><div class="rg-left"><span></span></div></div>
And I'm trying to populate the field 'utm_campaign' using this simple script:
<script>
document.querySelector("[data-field='field23']").value = {{cookie - utm_campaign}};
</script>
I've tried a number of methods and I can't get it to work. I can see that the script is firing and that the variable is properly assigned. It just isn't making its way into the field for form submission.
Any advice would be greatly appreciated.

Problem loading JS when creating and modifying an element

I hope you can help me with these problems that I have with the execution of my JS, I have 2 problems that I will detail:
WHEN CREATING
I am using the change and select events to be able to know if I am selecting and changing an option from my question combobox. The problem is when I have selected the option 1 SINGLE / MULIPLE ANSWER of the question type. If when saving I do not have any checkbox selected from the available options, it will throw me the alert to select at least one option, so far everything works fine for me but when I select a checkbox from the options and try to save, the alert does not disappear. I've tried adding the event checked but it can't work for me. What I want to do is that when I save and I do not have an option selected, it throws me the alert message (this already does), and when I select an option, the alert disappears so that it allows me to save.
WHEN MODIFYING
The second problem occurs when I try to modify an element, the JS does not run, so that it can work I have to select another option and return to the previous one so that it can work.
HTML
<form id="dynamic-form" action="" method="post">
<div class="content">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Evaluation</h3>
</div>
<div class="panel-body">
<div class="dynamicform_wrapper"> //where select and change applies
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Questions</th>
<th style="width: 500px;">Options</th>
<th class="text-center" style="width: 90px;">
<button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-items">
<tr id="0" class="item">//ID that I use to find the elements
<td class="question"> //where do i apply colspan
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="vcenter">
<span class="panel-title-address">Nr: 1</span>
</td>
<td class="vcenter">
<input type="hidden" id="qquestion-0-id_question" name="qquestion[0][id_question]" value="28">
<div class="form-group field-qquestion-0-type_id required">
<label class="control-label" for="qquestion-0-type_id">Question Type</label>
<select id="qquestion-0-type_id" class="form-control" name="qquestion[0][type_id]" onchange="">
<option value="">-- Select --</option>
<option value="1" selected="">SINGLE / MULIPLE ANSWER</option> // OPTION 1
<option value="2">OPEN QUESTION</option> // OPTION 2
</select>
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-title required">
<input type="text" id="qquestion-0-title" class="form-control" name="qquestion[0][title]" value="" maxlength="250" placeholder="Títle">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-score required">
<input type="text" id="qquestion-0-score" class="form-control" name="qquestion[0][score]" value="" placeholder="Score" data-plugin-inputmask="inputmask_2fdcbd27">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-image">
<label class="control-label" for="qquestion-0-image">Image</label>
<input type="file" id="qquestion-0-image" class="empty-value" name="qquestion[0][image]">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-justify_answer">
<div class="checkbox">
<label style="padding:5px;" for="qquestion-0-justify_answer">
<input type="hidden" name="qquestion[0][justify_answer]" value="0"><input type="checkbox" id="qquestion-0-justify_answer" name="qquestion[0][justify_answer]" value="">
Do you want the answer to be justified?
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="clearfix"></td>
</tr>
</tbody>
</table>
</td>
<td class="item-opcion">
<div class="dynamicform_inner">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th class="text-center">
<button type="button" class="add-opcion btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-opciones">
<tr class="opcion-item">
<td class="vcenter">
<input type="hidden" id="qoption-0-0-id_option" name="qoption[0][0][id_option]" value="">
<div class="input-group">
<span class="input-group-addon">
<div class="form-group field-qoption-0-0-opcion_correcta required">
<div class="checkbox">
<label style="padding:5px;" for="qoption-0-0-opcion_correcta">
<input type="hidden" name="qoption[0][0][opcion_correcta]" value="0"><input type="checkbox" id="qoption-0-0-opcion_correcta" name="qoption[0][0][opcion_correcta]" value="1">
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</span>
<div class="form-group field-qoption-0-0-title_option required">
<input type="text" id="qoption-0-0-title_option" class="form-control" name="qoption[0][0][title_option]" value="2" maxlength="250" placeholder="Opción">
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="text-center vcenter" style="width: 90px;">
<button type="button" class="remove-opcion btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group text-error-check required has-error" style="display: none;">
<p class="help-block help-block-error">You must select at least 1 option as correct.</p>
</div>
</td>
<td class="text-center vcenter" style="width: 90px; verti">
<button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="fa fa-edit"></span> Modificar</button>
</div>
JS
$(".dynamicform_wrapper").on("change","select",function(){
if ($(this).val()== 2) {
$('#0').find('.option-item').not(':first').remove(); //removed all entries found in
$('#0').find('.option-item:first').hide();
$('#0').find('.item-option').hide();
$('#0').find('.question').attr('colspan',2);
}else if ($(this).val()== 1){
//var numberNotChecked = $('#0').find('.option-item input:checkbox:not(":checked")').length;
var numberChecked = $('#0').find('.option-item input:checkbox:checked').length;
$('#0').find('.container-options').append(newtr); //add input
$('#0').find('.item-option').show();
$('#0').find('.question').removeAttr('colspan',2);
$( "#dynamic-form" ).submit(function( event ) {
if(numberChecked > 0){
$('#0').find('.text-error-check').hide();
$('#0').find('.dynamicform_inner').removeAttr("style");
} else {
$('#0').find('.text-error-check').show();
$('#0').find('.dynamicform_inner').css({'border':'2px solid #dd4b39','background-color':'white'});
event.preventDefault();
}
});
}});
Hope you can help me with these problems, I am not very good at using javascript or jquery. I thank you in advance for your support.

In your current code you are using wrong selector to get total value of checked checkboxes.If you check your current jquery code its always giving 0 even if you checked any value. So , you can use input[type="checkbox"]:checked which will give you correct values of checked checkboxes.
Then , you have placed your submit event inside your change event that's the reason the warning shows for the first time but when you select some checkbox and again clicked save button it doesn't go away (also because of wrong selector) so i have separated it from the change event .
Also you have forget to show the tr which you have hide() when select-box value is 2 i.e : item-option so add .show() to it when value is 1.
Working Code :
$(".dynamicform_wrapper").on("change", "select", function() {
if ($(this).val() == 2) {
$('#0').find('.option-item').not(':first').remove(); //removed all entries found in
$('#0').find('.option-item:first').hide();
$('#0').find('.item-option').hide();
$('#0').find('.question').attr('colspan', 2);
} else if ($(this).val() == 1) {
// $('#0').find('.container-options').append(newtr); //add input
$('#0').find('.item-option').show();
$('#0').find('.option-item:first').show(); //show option-item which is hidden
$('#0').find('.question').removeAttr('colspan', 2);
}
});
$("#dynamic-form").submit(function(event) {
//getting all inputs which is under tr
var numberChecked = $('#0').find('input[type="checkbox"]:checked').length;
console.log("No of checkbox checked=" + numberChecked)
if (numberChecked > 0) {
$('#0').find('.text-error-check').hide();
$('#0').find('.dynamicform_inner').removeAttr("style");
event.preventDefault();//remove this to submit
} else {
$('#0').find('.text-error-check').show();
$('#0').find('.dynamicform_inner').css({
'border': '2px solid #dd4b39',
'background-color': 'white'
});
event.preventDefault();
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form id="dynamic-form" action="" method="post">
<div class="content">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Evaluation</h3>
</div>
<div class="panel-body">
<div class="dynamicform_wrapper"> //where select and change applies
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Questions</th>
<th style="width: 500px;">Options</th>
<th class="text-center" style="width: 90px;">
<button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-items">
<tr id="0" class="item">//ID that I use to find the elements
<td class="question"> //where do i apply colspan
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="vcenter">
<span class="panel-title-address">Nr: 1</span>
</td>
<td class="vcenter">
<input type="hidden" id="qquestion-0-id_question" name="qquestion[0][id_question]" value="28">
<div class="form-group field-qquestion-0-type_id required">
<label class="control-label" for="qquestion-0-type_id">Question Type</label>
<select id="qquestion-0-type_id" class="form-control" name="qquestion[0][type_id]" onchange="">
<option value="">-- Select --</option>
<option value="1" selected="">SINGLE / MULIPLE ANSWER</option> // OPTION 1
<option value="2">OPEN QUESTION</option> // OPTION 2
</select>
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-title required">
<input type="text" id="qquestion-0-title" class="form-control" name="qquestion[0][title]" value="" maxlength="250" placeholder="Títle">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-score required">
<input type="text" id="qquestion-0-score" class="form-control" name="qquestion[0][score]" value="" placeholder="Score" data-plugin-inputmask="inputmask_2fdcbd27">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-image">
<label class="control-label" for="qquestion-0-image">Image</label>
<input type="file" id="qquestion-0-image" class="empty-value" name="qquestion[0][image]">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-justify_answer">
<div class="checkbox">
<label style="padding:5px;" for="qquestion-0-justify_answer">
<input type="hidden" name="qquestion[0][justify_answer]" value="0"><input type="checkbox" id="qquestion-0-justify_answer" name="qquestion[0][justify_answer]" value="">
Do you want the answer to be justified?
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="clearfix"></td>
</tr>
</tbody>
</table>
</td>
<td class="item-option">
<div class="dynamicform_inner">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th class="text-center">
<button type="button" class="add-option btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-opciones">
<tr class="option-item">
<td class="vcenter">
<input type="hidden" id="qoption-0-0-id_option" name="qoption[0][0][id_option]" value="">
<div class="input-group">
<span class="input-group-addon">
<div class="form-group field-qoption-0-0-opcion_correcta required">
<div class="checkbox">
<label style="padding:5px;" for="qoption-0-0-opcion_correcta">
<input type="hidden" name="qoption[0][0][opcion_correcta]" value="0"><input type="checkbox" id="qoption-0-0-opcion_correcta" name="qoption[0][0][opcion_correcta]" value="1">
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</span>
<div class="form-group field-qoption-0-0-title_option required">
<input type="text" id="qoption-0-0-title_option" class="form-control" name="qoption[0][0][title_option]" value="2" maxlength="250" placeholder="Opción">
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="text-center vcenter" style="width: 90px;">
<button type="button" class="remove-opcion btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group text-error-check required has-error" style="display: none;">
<p class="help-block help-block-error">You must select at least 1 option as correct.</p>
</div>
</td>
<td class="text-center vcenter" style="width: 90px; verti">
<button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="fa fa-edit"></span> Modificar</button>
</div>
<br>
<br>
<br>
<br>

How to calculate total of a row in a table when quantity changes

I am trying to update the total of each row with increasing quantity but only one row is updated. How can I update each row? How can I add id in these to make more dynamic? I am using jQuery version 2.2.4. Thanks in advance.
<tr>
<td class="col-sm-8 col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"> <img src="img/bg-img/b3.jpg" style="width: 72px; height: 72px;" alt=""> </a>
<div class="media-body">
<h5 class="media-heading">
<?php echo isset($carts['title']) ? $carts['title']: ''; ?>
</h5>
</div>
</div>
</td>
<td class="col-sm-1 col-md-1 quantity" style="text-align: center">
<input type="number" class="form-control" id="fname" oninput="myFunction()" value="1" label="">
</td>
<td class="col-sm-1 col-md-1 text-center pr-01 price"><strong><?php echo isset($carts['sale_price']) ? $carts['sale_price']: $carts['regular_price']; ?></strong></td>
<input type="hidden" class="form-control" id="artprice" value="<?php echo isset($carts['sale_price']) ? $carts['sale_price']: $carts['regular_price']; ?>" label="">
<td class="col-sm-1 col-md-1 text-center pr-01" id="total"><strong>$14.61</strong></td>
<td class="col-sm-1 col-md-1">
<div class="product" data-id="<?php echo $key; ?>">
<button type="button" class="btn btn-danger remove-from-cart">Remove</button>
</td>
</div>
</tr>
function myFunction() {
var x = document.getElementById("fname") value;
var str = $("#artprice").val();
$('#total').html(str * x);
}

There's several issues in your code.
There's a </div> in the wrong place. It's outside the <td> it belongs to
The #artprice input is outside the table structure. It needs to be placed within a td
There's a missing . before the value property in the JS.
However the biggest issue is because your repeat the same id attributes on multiple elements as you loop through to create these rows in the HTML. id have to be unique within the DOM.
To fix this use common class attributes on all the elements you need to find instead, then use jQuery's DOM traversal techniques to retrieve them based on the current row.
Also note in the below example that I used an unobtrusive event handler. Inline event attributes are no longer good practice and should be avoided where possible. In addition I removed the inline style attributes and used rules in an external stylesheet. Both of these approaches are preferred due to the Separation of Concerns principle.
With all that said, try this:
jQuery($ => {
$('.fname').on('input', function() {
let $row = $(this).closest('tr');
let price = $row.find(".artprice").val();
$row.find('.total strong').text('$' + (this.value * price).toFixed(2));
});
});
.media a img {
width: 72px;
height: 72px;
}
td.quantity {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
<tr>
<td class="col-sm-8 col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"><img src="img/bg-img/b3.jpg" alt=""></a>
<div class="media-body">
<h5 class="media-heading">Title</h5>
</div>
</div>
</td>
<td class="col-sm-1 col-md-1 quantity">
<input type="number" class="form-control fname" value="1" label="">
</td>
<td class="col-sm-1 col-md-1 text-center pr-01 price">
<strong>$14.61</strong>
<input type="hidden" class="form-control artprice" value="14.61" label="">
</td>
<td class="col-sm-1 col-md-1 text-center pr-01 total"><strong>$14.61</strong></td>
<td class="col-sm-1 col-md-1">
<div class="product" data-id="Key">
<button type="button" class="btn btn-danger remove-from-cart">Remove</button>
</div>
</td>
</tr>
<tr>
<td class="col-sm-8 col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"><img src="img/bg-img/b3.jpg" alt=""></a>
<div class="media-body">
<h5 class="media-heading">Title</h5>
</div>
</div>
</td>
<td class="col-sm-1 col-md-1 quantity">
<input type="number" class="form-control fname" value="1" label="">
</td>
<td class="col-sm-1 col-md-1 text-center pr-01 price">
<strong>$57.24</strong>
<input type="hidden" class="form-control artprice" value="57.24" label="">
</td>
<td class="col-sm-1 col-md-1 text-center pr-01 total"><strong>$57.24</strong></td>
<td class="col-sm-1 col-md-1">
<div class="product" data-id="Key">
<button type="button" class="btn btn-danger remove-from-cart">Remove</button>
</div>
</td>
</tr>
</table>
One last thing to note is that jQuery 2.2.4 is getting a little old now. You should consider upgrading to 3.x

Unable to make modal validation

I had tried to make wizard modal. Before going to second modal the first modal form fields should be validated I tried to make this using jQuery.
I tried to make text box color red when fields are not entered and it turns gray if data is entered into the fields. When I click on save it's going to modalTwo, before going to modal two it should check the mandatory fields.
When i do click on save text, the form should be validated. I mean every input fields should be filled mandatory.
$("#modalOne").modal("show");
$('.modalEditBtn').click(function() {
if ($('.modalEdit').is('[readonly]')) { //checks if it is already on readonly mode
$('.modalEdit').prop('readonly', false); //turns the readonly off
} else { //else we do other things
var school = document.getElementById('sslc').value;
if (school == "") {
document.getElementById('sslc').style.borderColor = "red";
return false;
} else {
document.getElementById('sslc').style.borderColor = "#cccccc";
}
$('.modalEdit').prop('readonly', true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- Modal One -->
<div class="modal" id="modalOne">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-body">
<button type="button" class="close" data-dismiss="modal">
<font color="black">
<a href="#" style="color: darkred">
<span style="color: darkred;">×</span>
</a>
</font>
</button>
<label class=" col-sm-4">Edit <span class="text">
<a class="modalEditBtn" data-dismiss="modal" data-toggle="modal" data-target="#modalTwo">Save</a>
</span></label> <br />
<div class="container">
<div class="row">
<div class="col-md">
<div class="form-body">
<br />
<table class="table table-responsive">
<tbody>
<tr>
<td class="outside scrollable-menu" style="border-style: none; border-bottom-style: none;">
<select id="sslc" class="form-control" oninput="this.className = ''">
<option hidden value="">10th</option>
<option value="a">10th</option>
<option value="b">12th</option>
<option value="a">Degree</option>
<option value="b">Masters</option>
<option value="b">Cetificate</option>
</select>
</td>
<td class="outside scrollable-menu" style="border-style: none; border-bottom-style: none;">
<select id="inputStream" class="form-control modalEdit">
<option hidden value="">Degree</option>
<option value="ar">BCA</option>
<option value="cm">BSc</option>
<option value="sc">BBA</option>
</select>
</td>
</tr>
<tr>
<td class="outside" style="border-style: none; border-bottom-style: none;">Stream
<select id="inputStream" class="form-control" required oninvalid="this.setCustomValidity('Stream Required')" oninput="this.setCustomValidity('')">
<option hidden value="">Stream</option>
<option value="ar">Arts</option>
<option value="cm">Commerce</option>
<option value="sc">Science</option>
</select>
</td>
<td class="outside" style="border-style: none; border-bottom-style: none;">Institution
<select id="inputStream" class="form-control" required oninvalid="this.setCustomValidity('Stream Required')" oninput="this.setCustomValidity('')">
<option hidden value="">Institution</option>
<option value="ar">VTU</option>
<option value="cm">Anna</option>
<option value="sc">Bangalore</option>
</select>
</td>
<td class="outside" style="border-style: none; border-bottom-style: none;">Yr of Passing <input type="date" class="form-control" id="resizedTextbox" placeholder="Yr of Passing" />
</td>
</tr>
<tr>
<td class="outside" style="border-style: none; border-bottom-style: none;">State
<select id="inputState" class="form-control" required oninvalid="this.setCustomValidity('State Required')" oninput="this.setCustomValidity('')">
<option hidden value="">State</option>
<option value="is">Karnataka</option>
</select>
</td>
<td class="outside" style="border-style: none; border-bottom-style: none;">Country
<select id="inputCountry" class="form-control" required oninvalid="this.setCustomValidity('Country Required')" oninput="this.setCustomValidity('')">
<option hidden value="">Country</option>
<option value="is">India</option>
<option value="is">US</option>
</select>
</td>
<td class="outside" style="border-style: none; border-bottom-style: none;"><br>
<input type="file" size="80"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Two -->
<div class="modal" id="modalTwo" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="alert alert-info" style="width: 99%; margin-bottom: 2px;">
<br>
<center>Do you want add another record</center>
<br>
<center>
<button type="button" class="btn btn-warning" data-dismiss="modal" data-toggle="modal" data-target="#modalOne" style="background-color: lightblue; border-color: #edf1ed;">Yes</button>
<button type="button" class="btn btn-success " data-dismiss="modal" data-toggle="modal" data-target="#modalThree" style="background-color: lightblue; border-color: #edf1ed;">No</button>
<br />
</center>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Two -->
<div class="modal" id="modalThree" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<center>
<div class="alert alert-info" style="width: 95%; margin-bottom: 2px;">
<center>NN records saved</center>
<br>
<button type="button" class="btn btn-warning" data-dismiss="modal" data-toggle="modal" data-target="close" style="background-color: lightblue; border-color: #edf1ed;">Ok</button>
<br />
</center>
</div>
</div>
</div>
</div>

Why is my JQuery DIV transparent?

My Jquery ajax page loads and shows up in the DIV that lays itself over the other page elements but the DIV is transparent or it is in fact behind the other components and just looking like it is transparent and neds to render on top. How do I achieve a normal DIV over the other pages with a white background? Why is it difficult making an element not transparent? How can this be deafult behavior for a page element?
Javascript
function popup() {
alert('opening popup');
var popup = $('.newpopup');
$.ajax({url:'/PandoraArendeWeb/popup.jsp',
error: function() {
alert('Error');
},
success: function(data) {
popup.html(data);
popup.show('fast');
}
}
);
/*
popup.html("test");
popup.show('fast');
*/
var screen_width = $(document).width();
var screen_height = $(document).height();
var box_width = popup.width();
var box_height = popup.height();
var top = (screen_height - box_height) / 2; // you might like to subtract a little to position it slightly higher than half way
var left = (screen_width - box_width) / 2;
popup.css({ 'position': 'absolute', 'top':top, 'left':left });
}
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
I tried creating a jsfiddle to reproduce the problem but it seems jsfiddle can't do .getor .ajaxsince it couldn't load a page from the internet to the DIV.
What can you propose? There should be a clear solution to this and transparancy really should not be a default state for an element so how come the element renders with transparency?
The HTML is trivial
<div class="newpopup">
</div>
<button id="mypopup">popup</button>
My CSS which is like it is never reached is this
.newpopup {
z-index:100;
position: absolute;
top:50%;
left:50%;
background-color:#ffffff; //not working
}
And the HTML that is the actual popup / div is this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><link href="css_js/styles.css" rel="stylesheet" type="text/css">
<title>popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" class="TB_nb">
<tr>
<td colspan="3" class="pusher TB_nb"><h2>Sök person/företag</h2>
</td>
<td><a href="javascript:void(0)" onclick="document.getElementById('popupSokNamn').style.display = 'none';" >X</a></td>
</tr>
</table>
<br><br>
<h2 class="pusher">Sök person/företag</h2>
<div id="Vsok">
<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;">
<span onClick="getElementById('sokF').style.display='', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display='none'" class="link_sm">Visa sökformulär</span>
</div>
</div>
<div id="sokF">
<div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;; padding-bottom: 5px;">
<span onClick="getElementById('sokF').style.display='none', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display=''" class="link_sm">Dölj sökformulär</span>
</div>
<div style="width: 100%; margin-left: 15px; margin-right: 80px;" class="fontS80">
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Fysisk</legend>
<div class="fl30"> Förnamn:</div>
<div class="fl50"><input type="text" size="60" name="searchFornamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30"> Efternamn:</div>
<div class="fl50"><input type="text" size="60" name="searchEfternamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset>
<fieldset style="border: 1px solid Grey; display:inline;"><legend class="small">Juridisk</legend>
<div class="fl30"> Företag:</div>
<div class="fl50"><input type="text" size="60" name="searchForetag" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30"> Organisationsnummer:</div>
<div class="fl50"><input type="text" size="60" name="searchOrgNummer" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
</fieldset> <br><br>
<!-- <div class="fl30">Attention, c/o etc.:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
<div class="fl30">Postadress:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
<div class="fl30">Postnummer:</div>
<div class="fl50"><input type="text" size="30"></div>
<div class="clear"></div> -->
<div class="fl30">Postort:</div>
<div class="fl50"><input type="text" size="40" name="searchPostort" onkeyup="doSubmitByEnter('Namnsokning', 'search')"></div>
<div class="clear"></div>
<div class="fl30">Land:</div>
<div class="fl50"><input type="text" size="2" name="searchLandKod" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
<select name="searchLand" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
<option value="1" SELECTED></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5">---------------------------------</option>
</select></div>
<div class="clear"></div>
<!-- <div class="fl30">Region:</div>
<div class="fl20"><select name="">
<option value="1" SELECTED></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5">-----------------------------------------------</option>
</select></div>
<div class="clear"></div>
<div class="fl30">Tel:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>
<div class="fl30">Fax:</div>
<div class="fl50"><input type="text" size="40"></div>
<div class="clear"></div>
<div class="fl30">E-post:</div>
<div class="fl50"><input type="text" size="60"></div>
<div class="clear"></div>
-->
<div class="fl50"> </div>
<div class="fl5"><input type="button" value="Rensa"></div>
<div class="fl10"><input type="button" value=" Sök " onclick="javascript:doSubmit('Namnsokning', 'search')"></div>
<div class="clear"> </div>
<div class="clear"> </div>
</div>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="4" align="center">
<tr>
<td><h3>Sökresultat:</h3></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="4">En massa text <span class="link">Hjälp!</span> </td>
</tr>
<tr>
<td><input type="button" value="Visa alla"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="smallb">
<td>Antal ärenden: 527</td>
<td> </td>
<td>Visa ärenden: << 1-200 201-400 401-527 >> </td>
<td> </td>
</tr>
</table>
<table width="100%" cellspacing="0" align="center" class="sortable" id="unique_id">
<tr>
<th class="thkant">Förnamn</th>
<th class="thkant">Efternamn</th>
<th class="thkant">Adress</th>
<th class="thkant">Postnr</th>
<th class="thkant">Postort</th>
<th class="thkant">Region</th>
<th class="thkant">Land</th>
<th class="thkant">Telefonnummer</th>
</tr>
</table>
<div id="bottomV">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" id="visaknapp" value="Visa" disabled style="width:150px;" onClick="getElementById('sokR').style.display='', getElementById('bottomA').style.display='', getElementById('bottomV').style.display='none', getElementById('Vsok').style.display='', getElementById('sokF').style.display='none'"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" disabled style="width:150px;"></td>
</tr>
</table>
</div>
<div id="bottomA" style="display: none">
<table width="100%" align="center">
<tr>
<td align="left"><input type="button" value="Ändra i register" style="width:150px;"></td>
<td align="right"><input type="button" value="Avbryt" style="width:150px;" class="checkmargin"><input type="button" value="Infoga" style="width:150px;"></td>
</tr>
</table>
</body>
</html>

There should be a clear solution to this and transparancy really
should not be a default state for an element so how come the element
renders with transparency?
Actually, unless you specify an explicit background colour for an element the default is that they are transparent. This is so that the real page background can show through.
Just putting a background colour (and a z-Index if appropriate) on the popup div should then make it appear as an overlay as expected.
If it's not working then something is preventing the (correct) CSS you've supplied from being used.
Perhaps you should remove the extra HTML body etc from the loaded page? You shouldn't have two <body> tags present in the page at once. If you can't change the loaded page (e.g. if it's also used as a standalone page) then try something like:
popup.empty().append($('body', data).children());
instead of:
popup.html(data);

use following code to apply the background color to the div
$(".newpopup ").css('background-color', 'white');

So, if I'm reading this right, your jQuery script is reading a .jsp file, which has the full header setion, body etc...
You should either place the contents of the popup into an iFrame or strip out all the tags before (and including) the <body> and after (and including) </body>

you will try this attributes in .newpopup class
'overlayShow' : true,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'opacity' : '0.80';
or
#popup {
margin: 0 auto;
height:100%;
width: 100%;
z-index:501;
background: #effeef;
position: absolute;
padding:0;
top: 0;
-moz-opacity:0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
filter:alpha(opacity=100);
}
#window {
padding:0;
width: 200px;
height: 200px;
margin: 0 auto;
border: 3px solid #d3d4d3;
background:url(sign_in_bg.gif) repeat-x;
position: absolute;
top: 200px;
left: 45%;
}
<div id="popup" align="center" style="display:none">
<div id="window" align="center">
content....
</div>