how can i store value from toggle button - javascript

how can i get value in PHP code using bootstrap toggle button and after that i want to add hidden field also for edit page in which toggle button remember status (Locked/Unlocked). My code is:
<input type="checkbox" id="toggle-one">
<script>
(function() {
$('#toggle-one').bootstrapToggle({
on: 'Locked',
off: 'Unlocked'
});
})
</script>

You need to pass the value(s) to a PHP script/page, a very convenient way is to make an AJAX call to a PHP page, giving it the values you want via GET or POST.
Then on the PHP page you can retrieve those values with $_POST[] or $_GET[].
Don't forget that JS/JQuery are on client side, while PHP is on server side.

Related

JQuery Input Field clickable again after using the blur() method

My goal of the question is to make the input field clickable again after using the blur() method.
This code is based on a person list which are clickable to get the details of the person with PHP and JQuery. The PHP and MySQL querys works well.
The first request of the Database via PHP will be loaded by using the the html(data) to the Match-List. But on the following code, I can request the GET-Function only one time with the PHP Data inside the match-list. When I close the match-list by using the blur() method and trying to click again on the input field, then the match-list won't come out again. It's an only-one time request without reloading the whole browser. How can I implement a function which renews the GET-request and loads the content again without reloading the page?
HTML
<div class="header-navbar">
<nav class="navbar navbar-expand-lg navbar-dark"> <li class="searchField">
<!-- Search Field -->
<form class="form-inline">
<input class="form-control mr-sm-2" id="searchValue" type="search" placeholder="Suche" aria-label="Search" autocomplete="off">
</form>
</li>
</nav>
</div>
<!-- Where the data comes out -->
<div id="match-list">
</div>
JQuery
$(document).ready(function(){
$('#searchValue').click(function(){
$.get("./sources/models/click_match.php", function(data) {
$('#match-list').html(data);
});
});
// Hides the match-list if user clicks it outside
$('#searchValue').blur(function(){
$('#match-list').hide();
});
});
#match-list is hidden when input is blured. Data is pushed into, just element is hidden - show it on click event.
$('#searchValue').click(function(){
$.get("./sources/models/click_match.php", function(data) {
$('#match-list').show().html(data);
});
});

Using JS created variable in php, passing the variable

I am trying to pass JS variable[array] to PHP. My idea is that javascript will print the array as a string with innerHTML to a div
document.getElementById("id").innerHTML = variable;
and if when I click on a POST button, PHP will collect it, but all of my attempts failed... :( Can someone help me, please? Is it even possible? Are there any better or working ways how to pass a variable to PHP from JS? I would rather avoid using AJAX and other stuff
One method I used in the past was to create a hidden form and set the value of each input with JavaScript or jQuery. Then on submit it will send the data to the PHP script.
EDIT: Here's the gist of it:
The hidden input:
<input type="hidden" id="hiddenInput" value="">
Set the value with javascript:
document.getElementById('hiddenInput').value = 'value';
or set it with jQuery:
$("#hiddenInput").val('value');
Then send to PHP with submit button.

How to set a hidden field value on a page from other page?

I have one page(suppose first page) where I have a hidden Field control. Now from this page I need to go to another page(second page), but I am not using window.open method instead of that I am using document.form.submit() method. Now from second page I need to set the value of hidden Field which is on first page.
Because I am not using window.open() method so I can not use parent.window.opener for setting the value of hidden field.
So is there any way I can set the hidden field value from second page to first page.
(Again I am using document.form.submit() method from second page to go to first page).
Thanks.
You should use server side code to get the values submitted from previous page.
The form values automatically send the values in the form
OR
If you use get method, with the help of javascript you can get and assign the values
Check this
By Using SERVER Side Scripting Language like PHP, ASP, JSP etc.
Below is the example of PHP scripting language.
<form action="first.php"> ... </form>
In first.php:
<?php
echo $_GET['your input textbox name']; // if you define the **METHOD** as **GET** of form html element
or
echo $_POST['your input textbox name']; // if you define the **METHOD** as **POST** of form html element
or
even you can use like this: echo $_REQUEST['your input textbox name']; // it works for both **POST** or **GET**
?>
Form2 writes data to cookie or local db.
Start a timer on form1 after you open form2, check the data continuously.

Insert javascript variable into a form on another page?

I am wondering if there's a good way to take a variable built in Javascript and then insert it into a form that's on another page.
My application is a survey: I've got it so that at the end of the survey, all the results are displayed so they can look over their answers. Now I want to have the user click a link and have the answers of the survey show up automatically in the body of the form where they'll then add their email and contact info and click "send."
Any ideas?
Knowing that this ISN'T possible is fine too...if not, what alternate methods might I accomplish the end result?
You can create a hidden field in first page and change that value from javascript variable. When you post that page it can be another page where you need to display in form element.
EDIT
If you need without form in first page you need to link with hyperlink like below.
<a href='#' onClick='OpenPage()'> Go To Result </a>
<script>
var val=20 ; // say this is the value you want to pass to second page
function OpenPage ()
{
window.location.href = "resultpage.php?param=" + val;
}
</script>
After you need to read that param in resultpage either with javascript through URL string or from server side (in PHP $_GET).
Hope it helps.

How can 2 Html forms share 1 hidden field?

I have a page with 2 forms and a hidden field that is outside of both of the forms.
How can the hidden field be submitted with either of the forms?
I thought about doing something like this with jQuery:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
// do something to move or copy the
// hidden field to the submitting form
});
});
</script>
Will this work? Any other ideas?
EDIT
The hidden field stores a serialized object graph that doesn't change. Both server methods require the object. The serialized object string can get pretty hefty, so I don't want this thing sent down from the server 2 times.
You can simply inject a copy of the element into each form right before submission.
This way, you can have the option of having different information for each hidden form field without affecting the other.
Something like this:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
$("#hidden_element").clone().appendTo(this);
});
});
</script>
If you want to use the exact same element for both forms without creating a fresh copy, just don't use clone()
See documentation for clone() and for appendTo()
EDIT:
If you don't want to send the hidden element with every request the form sends. Consider storing it in the database for that user for that time. You can submit its content once, and once only for every page reload, and then just send the database id of the hidden element with each form post.
On page load, something like this:
$.post("page.php", { reallyBigObject : $("#hiddenfield").val() }, function(insertedID){
$("#hiddenfield").val(insertedID);
});
Then, in the server side code:
//insert $_POST["reallyBigObject"] into databse
//get the just inserted id (in php it's done with mysql_insert_id())
//echo, or print the just inserted id, and exit
This way your js gets the callback.
Now, you can submit the form as you would, but this time, you're only sending the id (integer number) to the server.
You can then simply delete the object from your server (run a cron to do it after X amount of time, or send another request to delete it.
Honestly, though, unless you object is HUGE(!!), I think storing it by submitting it only once is a lot more complex to execute than to simply send two requests to the server.
Let me know if you have any other questions...
With HTML5, you can include a "form" attribute with an input element. The value of the form attribute is the id of the form(s) the field belongs to. To include the field in more than one form, include all form ids in a space-delimited list. Unfortunately, the form attribute is not supported in IE at all (as of IE 9). FF and Chrome support start in version 4 and 10 respectively.
Append the field to both forms at page load:
$(function() {
$('#form1, #form2').append($('input[name=fieldName]'));
});
Assuming you are doing a non ajax submit you could just append the field into the form being submitted. However if you need this info in both forms is it not better to store this value server side in a session store. This way any non js clients will also work!
$(function() {
$('form').submit(function() {
$('input.yourhiddenSubmit').appendTo(this);
});
});
The only way to pass the variable to the next form is to have that variable in the data that is passed when the form is submitted (either GET or POST), unless you want to use AJAX. Assuming you want to have the hidden variable outside of the actual form for a "good reason", I would recommend using jQuery to include the hidden input field into the form just before submission, like so:
<script type="text/javascript">
$(function() {
$('form').submit(function() {
$(this).append("<input type='hidden' name='hiddenField' value='"+$("#hiddenField").val()+"' />");
return true;
});
});
</script>
Replace all the instances of "hiddenField" with the ID of your hidden field outside the form. This will create a new input inside of the form just before it is submitted with the value of the hidden field that is elsewhere on the page.
Beyond that, you'd have to be a bit more specific about what your exact problem was (and why the field isn't being included in the form) for me to help.
Note that the above code should work in theory, but I didn't have a chance to actually test it out myself.

Categories