I am new to Jquery and struggling to retrieve date values from my 'span' element in my jquery code and want to post it along with my form using java script.The reason i need to use this approach is that I am trying to use date range picker provided at http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/
I have no idea how can i embed my span element value to my form and post it other page along with other form data.
Javscript
<script type="text/javascript">
document.getElementById("btnsubmit").addEventListener("click", function () {
var s;
s=jQuery.data($('aname'),s);
alert(s);
document.form.submit();
});
</script>
FORM:
-
<b class="caret"></b>
<span><?php echo date("F j, Y", strtotime('-30 day')); ?> - <?php echo date("F j, Y"); ?> </span>
</div>
<button id="btnsubmit" onclick="document.getElementById('frmdate').submit();">submit</button>
</form>
All i want to retrieve value of date from span element and post it along with form to retrieve it on next page to filter records from database based on this value.I would appreciate if anybody could help me in this regard.Thanks
As i suggested in the fiddle:
<form action="#">
<b class="caret"></b>
<span>14-10-2014</span>
<input type="hidden" name="tt" value="10-10-2014" />
<input id="tt2"/>
<input type="submit"/>
submit
<form>
And for the java script:
$(document).on('click', '#submit', function(event) {
event.preventDefault();
alert($("input[name='tt']").val()+" - Method 1");
$("#tt2").val($("span").text());
});
$(document).on('submit', 'form', function(event) {
event.preventDefault();
alert($("input[name='tt']").val() + " - Method 2");
$("#tt2").val($("span").text());
});
Don't forget to add the Jquery script.
(In the edit i've included the copy from the span)
Best regards
I think you haven't followed your tutorial properly.
Here is some code from the tutorial, and you will notice it puts the data into an INPUT field which will then be automatically sent as the form data, no added jQuery needed.
<form id="frmdate">
<div class="form-group">
<label for="reservation">Reservation dates:</label>
<div class="controls">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" name="reservation" id="reservation" />
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#reservation').daterangepicker();
});
</script>
Also in your code you've mixed jQuery and standard javascript badly.
For one you're listening for a click of the button rather than the submit of the form, this means your code will never execute if a enter hits Enter key and it submits the form without clicking the button. Moreover this is bad practice for that reasons alone (and many other reasons)
Here is a cleaned up version of your code:
<form id="frmdate">
...
<b class="caret"></b>
<span id="aname"><?php echo date("F j, Y", strtotime('-30 day')); ?> - <?php echo date("F j, Y"); ?></span>
<button id="btnsubmit" type="sumbit">Submit</button>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#frmdate').submit(function(){
// Do some code here.
});
});
</script>
Related
I have a HTML form that contains dialog, and the dialog contains inputs
When user complete dialog inputs and click send, the values appear in the same page of form in divusing JavaScript.
Then, when user complete other fields in form and click submit, user goes to another php page than contains entered values of all fields.
I want to get the values of dialog to php page
My form code:
<form id="form" action="message.php" method="POST" >
<div class="container" id="executive-bodies-information">
<!-- details-of-partners Dialog -->
<dialog id="details-of-partners">
<h2>بيانات الشركاء ، الملاك المستفيدون النهائيون ، المالكين المستفيدين</h2>
<label for="details-of-partners-name">الاسم</label>
<input type="text" id="details-of-partners-name"
name="details-of-partners-name" placeholder="الاسم" >
<label for="details-of-partners-date-of-expiry">تاريخ الانتهاء</label>
<input type="date" id="details-of-partners-date-of-expiry"
name="details-of-partners-date-of-expiry" placeholder="تاريخ الانتهاء">
<button button type="button" id="details-of-partners-send" >إرسال</button>
<button button type="button" id="details-of-partners-cancel"
onclick="closeDialog('details-of-partners')">إلغاء</button>
</dialog>
<!-- END details-of-partners Dialog -->
<div>
<button class="btn-add" type="button" onclick="showDialog('details-of-partners')">＋ جديد</button>
<div id="details-of-partners-container"></div>
</div>
</div>
<label for="preferred-language">اللغة المفضلة</label>
<select name="preferred-language" id="preferred-language" required>
<option value="" disabled selected>اختر</option>
<option value="english">الانجليزية</option>
<option value="arabic">العربية</option>
</select>
<div class="center">
<button type="submit" id="submit"><h1>إرسـال</h1></button>
</div>
</form>
This button is clicked to show dialog:
This is the dialog:
Here is the result of dialog, while user enter new dialog with new values, a div is added with these new valaues in form page:
My JavaScript code to enable values to display in form page:
<script>
function showDialog(id) {
var dialog= document.getElementById(id);
dialog.show();
}
function closeDialog(id){
var dialog= document.getElementById(id);
dialog.close()
}
document.getElementById("details-of-partners-send").addEventListener('click', function(){
var name= document.getElementById("details-of-partners-name").value;
var date_of_expiry= document.getElementById("details-of-partners-date-of-expiry").value;
document.getElementById("details-of-partners-container").innerHTML+=
`
<div class="border" >
<div class="details-box">
<span>الاسم: </span>
<span>${ name}</span>
</div>
<div class="details-box">
<span>تاريخ الانتهاء: </span>
<span> ${date_of_expiry}</span>
</div>
</div>
`;
closeDialog("details-of-partners");
})
</script>
An example of another code in message.php where I collect all values of form and echo values in it:
<span for="preferred-language">اللغة المفضلة: </span>
<span><?php
if(isset($_POST['preferred-language'])){
$lang= $_POST['preferred-language'];
if($lang=="english"){
echo "الانجليزية";
}else{
echo "العربية";
}
}
?> </span>
It will look like this:
And this is What I need, collect value from dialog using Javascript, then appears these values of div in php page
Sorry for taking long time to explain it in details
i suggest adding a hidden input where you can store the values from the dialogue so they can be submitted with the form, and since there can be multiple dialogues, you need an increment variable.
Before submit button : <input type="hidden" name="increment" id="increment" />
Outside of the onclick event: var incrm = 1
document.getElementById("details-of-partners-container").innerHTML+=
...
<input type="hidden" name="name${incrm}" value="${name}" /> //close .innerHTML
document.getElementById("increment").value = incrm;
incrm++;
I have a form that I would like to disable the submit button and form itself after it has submitted. The form currently submits to itself and all the solutions I've tried so far either disable the form and submit button, but the form is never submitted or the form is submitted but the button/form are not disabled.
PHP:
<?php
if(isset($_POST['send'])){
if(!isset($_SESSION))
{
session_start();
session_regenerate_id();
}
if($_SESSION['user_login_status']==false)
{header('Location:../index.php');}
$Firstname = $_POST["firstname"];
$Lastname = $_POST["lastname"];
$EmpID = $_POST["employeeid"];
$Ticket = $_POST["ticket"];
$Office = $_POST["office"];
$Division = $_POST["division"];
$Device = $_POST["device"];
$Secure = $_POST["secure"];
$Zendesk = $_POST["zendesk"];
$Agent = $_SESSION['user'];
$psPath = 'c:\\Windows\\System32\WindowsPowerShell\v1.0\\powershell.exe -version 5';
$psDIR = "d:\\wamp64\\www\\includes\\";
$psScript = "NewHire.ps1";
$runCMD = $psPath. ' -ExecutionPolicy RemoteSigned '.$psDIR.$psScript.' -Firstname ' .$Firstname. ' -Lastname '.$Lastname. ' -EmpID ' .$EmpID. ' -Ticket ' .$Ticket. ' -Office ' .$Office. ' -Division ' .$Division. ' -Device ' .$Device. ' -Secure ' .$Secure. ' -Zendesk ' .$Zendesk. ' -Agent ' .$Agent;
$createuser = exec($runCMD, $out);
}
?>
Trimmed down HTML:
<form class="rnd5" method="post" id="frm">
<div class="form-input clear">
<label class="one_third" for="firstname">Firstname <span class="required"><font color="red">*</font></span>
<input type="text" name="firstname" id="firstname" autofocus required>
</label>
</div>
<!-- ################################################################################################ -->
<div class="form-input clear">
<label class="one_third" for="lastname">Lastname <span class="required"><font color="red">*</font></span>
<input type="text" name="lastname" id="lastname" required>
</label>
</div>
<p>
<input type="submit" name="send" value="Submit">
<input type="reset" value="Reset">
</p>
</form>
</div>
<!-- ################################################################################################ -->
<div class="clear"></div>
</div>
</div>
<!-- Footer -->
<?php include('../footer.php'); ?>
</body>
</html>
I have tried different functions such as:
$(function () {
$(".send").click(function () {
$(".send").attr("disabled", true);
$('#frm').submit();
});
});
and
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
Nothing so far appears to be working. Anyone have ideas?
I can see two fundamental problems with your code. Firstly your jQuery selectors.
In the first function: The . selector (as in $(".send") works on the class attribute, not the name attribute. I would suggest you either change your Inputs to have class = send or you change the selector to $("[name=send]").
In the second function. I'm pretty sure $('input:submit') isn't a valid selector, and I'm not sure what is meant by it.
Check out: http://www.w3schools.com/jquery/jquery_ref_selectors.asp
The second problem is that you are submitting the form and thus triggering a page reload. I take it that this isn't the desired behaviour if you want to disable the form buttons? In which case you should disable the default behaviour of the button (There are many ways of doing that: Stop form refreshing page on submit ) and POST the data to the server yourself.
This would leave you with something like the following:
$(function () {
$("[name='send']").click(function () {
$(this).attr("disabled", true);
$("#frm").submit();
});
$("#frm").on("submit",function() {
$.post("http://example.com/your_php_file.php",$(this).serialize());
$(this).preventDefault();
});
});
I haven't been able to test this myself because I don't have much time nor a handy web server, but this should give you a good start.
I have Created calculator project. I have only two pages. Now my question how to pass input field value to another page? trying too many ways its Not Working.
What to do to pass input fields values from one page to another page?
My input fields code Looks Like
<p class="pull-right">DPA Minimum Buyer Contribution<br /></p>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6" style="padding-right:1%">
<input type="text" id="txtLocationContactName5" class="txt"/>
</div>
<div class="col-md-3" style="padding-left:0%">
Another page name default_results.php I have created input fields
<div class="col-md-5 padding-rht">
Minimum Buyer Contribution
</div>
<div class="col-md-2 padding-Zero">
<input type="text" id="txtCustomerName3" class="txt" />
</div>
I have tired in jQuery script
<script>
$(function () {
$("#btnQueryString").bind("click", function () {
var url = "default_results.php?id=" + encodeURIComponent($("#txtLocationContactName5").val()) + "&technology=" + encodeURIComponent($("#txtCustomerName3").val());
window.location.href = url;
});
});
</script
but Not working so how to pass value one page to other page ?
You're making life hard for yourself! A simple form is needed to help you pass data to another page :). See here for info on html Forms - http://www.w3schools.com/html/html_forms.asp
Here is a simple example for you:
<form action="page_2_link" method="POST">
<input type="text" name="field1" value="easy">
<input type="submit" name="button1" value="Submit">
</form>
Then on the second page you can do this to retrieve the form data:
<?php
$blah = $_POST['field1']; // this now has the posted fields value
?>
I have given the second page answer in PHP as you have used this as a tag for this question, so I hope you are using this or my answer won't work.
I am trying to submit a form with a couple of different inputs, which all work fine. However, one of the inputs is a textarea (sort of). I had to alter it into a content editable div, mainly because I created my own bold, italic and underline buttons which wouldn't work with normal textareas. The problem is that the form on submit is not sending the text to the php and i was wondering what i could do to get the value of the div in the php.
Here is the "textarea":
<div id="dash_new_shout_textarea" name="dash_new_shout_textarea"
class="dash_new_shout_textarea" contenteditable="true"
placeholder="Write your shout..." name="dash_new_shout_textarea"
value="<?php echo isset($_POST['dash_new_shout_textarea']) ?
$_POST['dash_new_shout_textarea'] : '' ?>"></div>
The form is just a normal form with method=post.
Here is the php:
$newShoutTextarea = $_POST['dash_new_shout_textarea'];
Thanks for the help
I would suggest that you follow the other answers and use jQuery, but since there is no jQuery tag in your question I suppose that I should provide a good non-jQuery solution for you.
HTML
<form onsubmit="prepareDiv()">
<div id="dash_new_shout_textarea" class="dash_new_shout_textarea" contenteditable="true" placeholder="Write your shout..." name="dash_new_shout_textarea" value="<?php echo isset($_POST['dash_new_shout_textarea']) ? $_POST['dash_new_shout_textarea'] : '' ?>"></div>
<input type="hidden" id="dash_new_shout_textarea_hidden" name="dash_new_shout_textarea" />
</form>
Javascript
function prepareDiv() {
document.getElementById("dash_new_shout_textarea_hidden").value = document.getElementById("dash_new_shout_textarea").innerHTML;
}
Your PHP remains the same.
What you can do is this:
<div id="dash_new_shout_textarea"></div>
<input type="hidden" name="dash_new_shout_textarea" id="dash_new_shout_textarea_hidden" />
<script type="text/javascript">
setInterval(function () {
document.getElementById("dash_new_shout_textarea_hidden").value = document.getElementById("dash_new_shout_textarea").innerHTML;
}, 5);
</script>
the problem is that a DIV is not a form element and cannot be posted. If you use some javascript, you could populate a hidden input field with the data and then receive it server side as POST variable
You can add a hidden input to your form and update it with jquery
<div id="dash_new_shout_textarea" name="dash_new_shout_textarea"
class="dash_new_shout_textarea" contenteditable="true"
placeholder="Write your shout..." name="dash_new_shout_textarea"
value="></div>
<form id="target" method="post" action="destination.php">
<input id="textarea_hidden" name="textarea_hidden" type="hidden" value="">
<input type="submit" value="Submit">
</form>
script
$("#target").click(function() {
$("#textarea_hidden").val($("#dash_new_shout_textarea").val());
});
What you can do is use jQuery for this.
DEMO HERE
Proper scenario would be:
*Get value from div and save it into hidden field. *
This has to be done when you submit form:
$(function () {
$("#send").on("click", function () {
$("#hiddenfield").val($("#dash_new_shout_textarea").text());
alert($("#hiddenfield").val());
$("form#formID").submit();
});
});
I have a small admin panel that I have created to do simple database tasks for my DayZ server. Now I want to make a simple editor for the news blurb on my website. The news blurb is stored in a table on my database. What I want is when the page loads it simply echo's the data and looks like it does on the live site. Then, when I click on it, I want it to convert into:
<textarea name="edit><?php echo news; ?></textarea>
This is my current code:
function divClicked() {
var divHtml = $(this).html();
var editableText = $("<textarea name="edit" />");
editableText.val(divHtml);
$(this).replaceWith(editableText);
editableText.focus();
// setup the blur event for this new textarea
editableText.blur(editableTextBlurred);
}
$(document).ready(function() {
$("#editable").click(divClicked);
});
<form method="post" action="newsedit.php">
<div id="editable"><?php echo $news; ?></div>
<input type="submit" value="Edit News" />
</form>
Now, this does work in the sense that when I click on the text it does convert into a textarea. The problem is that it doesn't give it the "edit" name so when I hit the sumbit button, it is as if I submitted nothing and it deletes all the data out of the table because
<textarea name="edit"></textarea>
is technically empty. Are there any ways to make it so when I click on the text it will convert the code to textarea with that specific name so there is actual data when I hit submit?
Change the form to:
<form method="post" action="newsedit.php">
<div id="<?php echo $newsID;?>"><?php echo nl2br($news); ?></div>
<input type="submit" value="Edit News" />
</form>
Where $newsID is returned along with the $news text.
The nl2br($news) will just make sure the line breaks are honored.
var editableText = $("<textarea name='edit' />");
http://jsfiddle.net/H5aM4/ inspect the textarea
TRY This
$("#editable").click( function(){
$(this).replaceWith(function() {
return $("<textarea name='edit'>").text(this.innerHTML);
});
});
Here is the working example