Passing value to form using JQuery ajax - javascript

I've wired scenario here I've a php page which has multiple form not nested though.
they are all hidden div's they will popup once button click. the code below is show and hide the div that will record.
<style type="text/css">
.ontop4 {
z-index: 999;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
position: absolute;
background-color: #434343;
opacity: .95;
/*filter: alpha(opacity = 90);*/
}
#popup4 {
border: 1px solid;
border-radius: 25px;
border-color: green;
width: 500px;
height: 500px;
position: absolute;
background-color: #ffffff;
top: 20%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
}
</style>
<form role="form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post" id="form_edit_note">
<input type="hidden" name="hidden_note_case_id" value="<?php echo $findCase->id; ?>" />
<input type="hidden" name="hidden_note_id" value="<?php ?>" />
<div id="popDiv3" class="ontop4">
<div class="row" id="popup4">
<div class="col-md-12">
<div class="portlet">
<div class="portlet-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea rows="2" cols="63" name="pic_note"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 ">
<div class="portlet-body form">
<div class="form-body pull-right">
Cancel
<input type="submit" name="saveAttach" id="saveAttach" value="Save" class="btn yellow btn-xs">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
the data i need to edit is displaying in my main form which is a simple php while loop. what i want to know how to set the below variable
<input type="hidden" name="hidden_note_id" value="<?php ?>" />
I would like to have this hidden_note_id value set dynamically i mean passing through on click edit on one of them notes to transfer note_id through ajax, jQuery or which ever way. Please help
I may not have conveyed my message properly but I'll make it simple that on my main page there are multiple notes are displayed user can edit any note but the form above is outside the scope of that form so how would I get the note id that user has decided to edit .
any idea?

Related

Using localStorage to remember closed state of pop-up box

I'm having difficulty implementing localStorage on my site (https://www.reclaimdesign.org).
What I am trying to do is:
Newsletter subscription pop-up on each page - this works fine
Click X to close the subscription pop-up - this also works fine
Remember the closed state of the window so that all other pages visited on our site don't have the pop-up and irritate the user after they have closed the pop-up already - this is not working. Not even a little bit.
My thinking was to set a variable with localStorage and then refer to the variable to see if the windows should be displayed or not. It is highly likely that my logic and syntax are at best sketchy, so if anyone could please guide me in the correct method this would be much appreciated.
The code I have been tinkering with for the subscription pop-up looks like this:
<script>
function setSignup(val) {
localStorage.setItem("popState", val);
}
function getSignup() {
$(window).on("load", function() {
if(localStorage.getItem("popState") == 'hide'){
//$(".signup").hide();
$(".signup").css("display", "none");
}
else if (localStorage.getItem("popState") != 'hide'){
$(".signup").css("display", "block");
}
});
}
</script>
<div class="signup">
<div class="signup-header">Sustainable Living</div>
<span class="closebtn" onclick="setSignup('hide');this.parentElement.style.display='none';">×</span>
<div class="signup-container">
<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
Yes your getSignup is not called correctly.
Here you can see the alternative solution without jquery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script>
function setSignup(val) {
localStorage.setItem("popState", val);
}
function getSignup() {
if (localStorage.getItem("popState") == 'hide') {
//$(".signup").hide();
document.querySelector('.signup').style.display = 'none';
} else if (localStorage.getItem("popState") != 'hide') {
document.querySelector('.signup').style.display = 'block';
}
}
window.addEventListener("load", getSignup);
</script>
<div class="signup">
<div class="signup-header">Sustainable Living</div>
<span class="closebtn" onclick="setSignup('hide');this.parentElement.style.display='none';">×</span>
<div class="signup-container">
<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
</body>
</html>
Thanks very much for your input guys. I got it working with the following (for anyone who might come up against the same issue)...
HTML:
<div class="signup">
<div class="signup-header">Sustainable Living</div>
<div class="signup-container">
<p>Get new articles related to <em>sustainability</em> and <em>eco-friendly home decor</em> direct to your inbox. We respect your privacy.</p>
<form action="https://reclaimdesign.us9.list-manage.com/subscribe/post?u=0c1d87de694b90628655f4ab9&id=bab84d57de" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" rel="noopener" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Please Enter Your Email Address" required autocomplete="email">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0c1d87de694b90628655f4ab9_bab84d57de" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
</div>
CSS:
.signup {
bottom: 2%;
display: none;
margin-right: -15px !important;
max-width: 280px;
position: fixed;
right: 2%;
z-index: 9999;
}
.signup-header {
background: #539c22;
border-radius: 10px 10px 0 0;
color: #ffffff;
font-family: 'Carrois Gothic', sans-serif;
font-size: 20px;
padding: 25px 15px;
text-transform: uppercase;
}
.signup-container {
background-color: #6db240;
border-radius: 0 0 10px 10px;
color: #ffffff;
padding: 15px;
}
.closebtn {
color: #ffffff;
cursor: pointer;
font-size: 30px;
position: absolute;
right: 15px;
top: 5px;
}
.closebtn:hover {
color: #6db240;
}
.signup-container .button {
background-color: #539c22;
border: 0 none;
border-radius: 5px;
color: #ffffff !important;
cursor: pointer;
font-size: 15px;
height: 32px;
line-height: 32px;
margin: 0 15px 0 0 !important;
text-align: center;
transition: all 0.23s ease-in-out 0s;
width: 100% !important;
}
.signup-container .button:hover {
opacity: 0.7;
}
.signup-container .mc-field-group input {
display: block;
padding: 8px 0;
text-indent: 2%;
width: 100%;
}
.signup-container input {
border: 1px solid #d0d0d0;
border-radius: 5px;
cursor: auto;
font-family: 'Open sans', sans-serif;
font-size: 15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
JQuery:
$(document).ready(function() {
$('.signup').css('display', 'block');
$PopUp = $('.signup');
var hide = JSON.parse(localStorage.getItem('hide'));
if (hide) {
$PopUp.hide();
} else {
// initialize value in case it hasn't been set already
localStorage.setItem('hide', false);
}
$('.closebtn').click(function() {
$('.signup' ).hide();
// toggle the boolean by negating its value
var hide = JSON.parse(localStorage.getItem('hide'));
localStorage.setItem('hide', !hide);
});
});

End After Start Input Form Onchange OnClick

I have to put two dates (Start and End of task).
I would like to guarantee that the user cannot send wrong data.
My problem is, after my possible solution, the user cannot type inside date_end.
I created two javascript to do this, but I'm not javascript experienced to be sure exactly how to do this.
function datestart(value) {
document.getElementById("date_end").value = value;
}
function dateend(value) {
var vdatestart = document.getElementById("date_start").value;
if (value < vdatestart) {
document.getElementById("date_end").value = vdatestart;
}
}
.col-30 {
float: left;
width: 30%;
margin-top: 6px;
}
.col-70 {
float: left;
width: 70%;
margin-top: 6px;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.row:after {
display: table;
clear: both;
}
<div class="container">
<form name="form1" action="datetime1.php" method="post">
<div class="row">
<div class="col-30">
<label>Start Date and Time from Start:</label>
</div>
<div class="col-70">
<input type='datetime-local' name='date_start' id='date_start' min='2018-05-01T00:00' max='2018-05-22T08:00' required value='2018-05-22T08:00' onchange="datestart(this.value);" onclick="datestart(this.value);" />
</div>
</div>
<div class="row">
<div class="col-30">
<label>End Date and Time:</label>
</div>
<div class="col-70">
<input type='datetime-local' name='date_end' id='date_end' min='2018-05-01T00:00' max='2018-05-22T08:00' required value='2018-05-22T08:00' onchange="dateend(this.value);" onclick="dateend(this.value);" />
</div>
</div>
<div class="row">
<input type="submit" name="submit" value="Send">
</div>
</form>
</div>

Title attribute not working in IE11

Hi I just want to ask what's wrong with my program. Im doing this program where I have to choose a file. But the button is an image and I would like to add a tooltip that this image is for selecting a file. This block of codes is perfectly working in chrome. But when I run it in IE11 the title "Select File"is not showing in IE11. I didn't know that IE has a lot of restriction. Unlike in chrome.
.image-upload>input {
visibility: hidden;
width: 0px;
height: 0px;
margin: -10%;
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 250px;
img {
width: 90px;
height: 50px;
}
.caption {
display: block;
color: white;
}
div.space {
margin-top: -15px;
}
<div class="image-upload">
<label for="file-input">
<p align="left"><font face="Arial" color="black" size = "5"><b>&nbsp&nbsp&nbspSelect File&nbsp&nbsp&nbsp </b><span style="cursor:pointer" alt="Select File" title="Select File">
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" style="pointer-events: none" id="img" title="Select File"/></span></font></p></label>
</label>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>
You need to remove the inline style of pointer-events:none from the image tag if you want to be able to hover it.
By setting it to none, it means your mouse can't interact with the element and therefore it cannot hover it to show the title.
Try this:
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" id="img" title="Select File"/>
Example fiddle showing with and without pointer events
More information about pointer events
Also please note the following errors with your code:
the font tag is obsolete and should not be used - use css instead
&nbsp should have a semi colon after it:
there is an extra end label and I don't think you are allowed p tags inside - use a validator to check your code
<div class="image-upload">
<p align="left"><label for="file-input"><b> Select File </b>
</label></p>
<span style="cursor:pointer; display:inline-block;" alt="Select File" title="Select File"><label for="file-input"><img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" id="img" title="Select File"/>
</label></span>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>
you could add another span ( for example ), give it position absolute, and on hover on the image, show it .
you can also you javascript ( jquery ) to show it in the same position your cursor is, but that's a bit more complicated.
See below if this is what you want
.title {
transition: 0.3s ease-out;
opacity: 0;
position: absolute;
top: 50%;
left: 0%;
transform: translateY(-50%);
font-size: 15px;
background: #fff;
}
.wrapper {
display: inline-block;
position: relative;
}
.wrapper:hover .title {
opacity: 1;
}
<div class="image-upload">
<label for="file-input">
<p align="left"><font face="Arial" color="black" size="5"><b>&nbsp&nbsp&nbspSelect File&nbsp&nbsp&nbsp </b> <span class="wrapper" style="cursor:pointer" alt="Select File" title="Select File">
<span class="title">Select File</span>
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" style="pointer-events: none" id="img" title="Select File"/></span></font></p>
</label>
</label>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>

Have a input box fill the remainder of the html page

I have looked at a lot of these pages and questions with this. I have found the right answer but I cannot figure it out to save my life. I want to do something very similar to the second question, but I cannot figure out how to do it.
Style input element to fill remaining width of its container
What I am trying to do is have all the input stretch the whole way to the other side, but they are just stopping at the end of the form section. I feel that the form is my issue and not the input boxes. How do I get the form to stretch to the width of its parent. I have attached the whole code now to see if that helps.
<style>
div.modal-header{background-color: #1A2930; color: white; }
div.modal-footer{ background-color: #1A2930; color: white; }
div.modal-body{ background-color: #F0F0F0; color: #0A1612; width: 100%; }
div.movement-modal-form{ width: 100%; }
label
{
float: left;
font-size: 20px
}
span{
display: block;
overflow: hidden;
width: 100%
}
input
{
background-color: #C5C1C0;
border: solid 2px #0A1612;
color: black;
width: 100%;
height: 25px;
font-size:12px;
vertical-align:0px
}
textarea
{
background-color: #C5C1C0;
border: solid 2px #0A1612;
width : 100%
}
</style>
<div id="movement-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">❌ </button>
<h4 id="modal-title" class="modal-title">{{#i18n}}inventory.modify.button.new-movement{{/i18n}}</h4>
</div>
<div class="modal-body">
<form id="movement-modal-form"
>
{{>inventory/partials/movement-id-field-modal}}
{{>inventory/partials/product-fields-modal}}
<br/>
<p>
<!--This is #4-->
<label id="movement-lable" for="movement-date">{{#i18n}}inventory.modify.table.movement-date{{/i18n}}</label>
<input id="movement-date" class="movement-date" type="date" required>
</p>
<br/>
<p>
<!--This is #5-->
<label for="store-from">{{#i18n}}inventory.modify.table.store-from{{/i18n}}</label>
<br/>
<br/>
<select id="store-from" class="store-from"required>
{{#inventoryStoreList}}
<option value={{ id }}>{{ name }}</option>
{{/inventoryStoreList}}
</select>
</p>
<br/>
<p>
<!--this is # 6-->
<label for="store-from-current-quantity">{{#i18n}}inventory.movement.modal.store-from-current-quantity{{/i18n}}</label>
<input id="store-from-current-quantity" class="store-from-current-quantity" type="text" disabled>
</p>
<br/>
<p>
<!--This is # 7-->
<label for="store-to">{{#i18n}}inventory.modify.table.store-to{{/i18n}}</label>
<select id="store-to" class="store-to" required>
{{#inventoryStoreList}}
<option value={{ id }}>{{ name }}</option>
{{/inventoryStoreList}}
</select>
</p>
<br/>
<p>
<!--8-->
<label for="store-to-current-quantity">{{#i18n}}inventory.movement.modal.store-to-current-quantity{{/i18n}}</label>
<input id="store-to-current-quantity" class="product-current-quantity" type="text" disabled>
</p>
<br/>
<p>
<!--9-->
<label for="movement-quantity">{{#i18n}}inventory.modify.table.quantity-requested{{/i18n}}</label>
<input id="movement-quantity" class="movement-quantity" type="number" step="1" min="1" pattern="\d*" required>
</p>
<br/>
<!--10 Notes-->
{{>inventory/partials/note-field-modal}}
<input type="submit" style="display: none">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" style="float: left">{{#i18n}}inventory.modify.button.cancel{{/i18n}}</button>
<button id="movement-modal-submit" type="button" class="btn btn-success" style="float: right">{{#i18n}}inventory.movement.modal.button.save{{/i18n}}</button>
</div>
</div>
It looks like your modal-body.width value isn't working like you intend. I'm not sure if your question is clear, but it looks like you want the input to be the width of the modal-body.
If that is the case, then you could just set the width on the movement-date class to 100%. This will set the width of the input element to be 100% width of the parent element, in this case, the modal-body.
div.modal-body{
background-color: white;
color: black;
margin: 20px 0 20px 0;
padding: 15px;
width: 500px;
overflow: hidden;
}
input.movement-date {
background-color:lightgray;
border: solid 2px #6E6E6E;
width: 100%;
height: 25px;
font-size:12px;
vertical-align:0px;
}
<div class="modal-body">
<form id="movement-modal-form">
<p>
<label id="movement-lable" for="movement-date"></label>
<input id="movement-date" class="movement-date" type="date" required/>
</p>
</form>
</div>

lightbox with javascript and css

I was trying to create a lightbox, so that a form that I have to open in a lightbox. Bellow there is my javascript, html and css code. Everything is working fine. My only problem is that if I start maximizing or minimizing the explorer's window, the white content that includes the form does not keep the same fixed size that I gave at the beginning. I want it to keep the size that I gave it at the begining without changing size while minimizing or maximizing the window (i want it to be like the lightbox uses facebook when displays the photo). any ideas how to do this?
p><img src="img/add.jpg"/></p>
<div id="light" class="white_content">
<table border="0">
<td >
<fieldset style="width:530px; padding-left:5px; background-color:white " >
<h2><font color="#5D5D5D" size="2" face="caecilia-light', face="helvetica,arial,sans-serif" >
</br>
School</br>
<input name="school_1" type="text" size="73" value="<?php echo $user_data_profile_education['school_1']; ?>"/>
</br></br>
Study</br>
<input name="field_1" type="text" size="73" value="<?php echo $user_data_profile_education['field_1']; ?>"/>
</br></br>
Specialized </br>
<input name="specialized_subject_1" type="text" size="73" value="<?php echo $user_data_profile_education['specialized_subject_1']; ?>"/>
</br></br>
Degree</br>
<input name="degree_1" type="text" size="73" value="<?php echo $user_data_profile_education['degree_1']; ?>"/>
</br></br>
Grade</br>
<input name="grade_1" type="text" size="73" value="<?php echo $user_data_profile_education['grade_1']; ?>"/>
</h2></font>
</fieldset>
</td>
</table>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
</br><img src="img/done_editing.jpg"/> </a></div>
<div id="fade" class="black_overlay"></div>
and this is my CSS :
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 220%;
background-color: grey;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 45%;
left: 30%;
width: 32%;
height: 51%;
padding: 30px;
padding-left:50px;
border: 5px solid green;
background-color: white;
z-index:1002;
overflow: auto;
}
Looks like you're using percentages instead of a fixed unit to set the size of the lightbox.
Try this:
.white_content {
width: 320px;
height: 480px;
}

Categories