I have a value that I am passing to a div in a bootstrap model using javascript code. I want to again use that value to filter data from MySQL database within a bootstrap modal but I have failed to pick the value from the div
Javascript Code that sends the vale to the div in Bootstrap
<script type="text/javascript">
$('#check_feedback').click(function() {
$('#inquiry_id').html($('input[name=id]').val());
})
</script>
Div code
<div id="inquiry_id"></div>
PHP code
$id = htmlspecialchars($_POST["inquiry_id"]);
this is the error that i see when i run this code
The error that is see
You can try this:
I have created an example, please change according to your needs.
$('#check_feedback').click(function() {
$('#textarea_id').val($('#inquiry_id').text());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<div id="inquiry_id">This content is wrap within div tag </div>
<div id="textbox_id"></div>
<textarea id="textarea_id"></textarea>
<button id="check_feedback">check feedback</button>
Related
I am working with a simple project which requires modification of the html source code with some logic and then display the modified html source code into a div when a button is clicked.
The Output before modification is when i click the Show html
When i click the Show converted html the output is like
What i basically want to do the modification for inner children whatever may be the depth of child nodes. What is happening here the modification is done at a single level i.e span and h1 tag is eliminated.
Show html button display the content of external html file rather than source code of the page.The code for converting the source code of external html file is like
<script>
function convertHtml() {
$body = $("#demo").text();
$fakediv = $("<div></div>");
$fakediv.html($body);
$fakediv.children().each(function(){
$thisText = $(this).text();
if($thisText)
$(this).text("#"+$thisText+"#")
});
$("#demo").text($fakediv.prop("outerHTML")); //fill in the div with converted html string
}
//Document is ready to execute the JS
$(document).ready(function() {
$("#convert").click(function(){
// alert($("#demo").text());
convertHtml();
});
});
</script>
Please help.
Thanks!
Here you go, on click of a button converted html will be in the text box, JS is commented, let me know if you need help.
$("#convert").click(function(){ /// on click of Convert button
$body = $("body").prop("outerHTML"); //Get a string of body content
$fakediv = $("<div></div>"); //Make a fake div to put that string inside it
$fakediv.html($body); // copy body to our fake div
$fakediv.children().not("#convert,#output").each(function(){ // for each child of our copied version
$thisText = $(this).text(); //get whatever text they have inside
if($thisText)
$(this).text("#"+$thisText+"#") // and replace it
});
$("#output").text($fakediv.prop("outerHTML")); //fill in the text are with converted html string
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<h1>Hello</h1>
<div id="something">Hello Folks!</div>
<span>Lovely lady</span>
<button id="convert">Convert</button>
<textarea id="output"></textarea>
</body>
</html>
Check this fiddle It fill up your need
$( "#target" ).click(function() {
$('h1').html("HEllo");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="button" value="ClickMe" id="target" />
<h1>This is need to change</h1>
this is my problem:
After submitting a form I want to see some data from a database (MySQL) for the selected object in a div-element. This element was set to “display:none” when the page starts.
If the user clicks a button the <div> should become visible and the data should be seen. With another click the <div> should become invisible again. To achieve this I use the jQuery function toggle().
If I use an input-element with “type=submit” the form is submitted and I get the data due to the php statements in the <div>. But unfortunately the <div> will disappear immediately. I guess the submit is starting the page again by default and therefore the <div> is set to “display:none” again.
If I use a button-element instead I am able to toggle the <div> but the form is not submitted, the $_POST is not filled and therefore I did not get any data from the database for the object. The idea was to use the name of the object to set a value for an $id variable to start the SQL-statement.
I tried to keep the source code very short and therefore I did not program the database related statements here. This is not the problem – I am able to get data for the object when I used a normal submit and no toggle function for the <div>.
As you can see in the source code I tried it with three variations of input types. But none of it works like I want it to work.
I know that everything would be easy using another extra page to show the data. But I want to realize it with the <div>.
How can I solve this situation?
Here is my source code:
<!DOCTYPE html>
<html>
<head>
<style>
#wbtogdiv {
width:30%;
height:100px;
border:6px solid green;
display:none;
}
</style>
<script language="JavaScript" src="jquery-1.11.2.js"></script>
<script language="JavaScript">$(document).ready(function(){$("#btn").click(function(){$("#wbtogdiv").fadeToggle(20);return true;});});</script>
</head>
<body style="color:#FF004C;">
<!-- I tried also with this
action="<?php $_SERVER['PHP_SELF']?>"
but of course then the page is fired again and the <div> is not visible due to the
CSS-->
<form method="post">
<input type="text" name="customer">
<input type="submit" id="btn" value="submit:Toggle div green">
<!--
<input type="submit" id="btn" value="submit:Toggle div green">
<input type="button" id="btn" value="input button: Toggle div green">
<button type="button" id="btn">Button: Toggle div green</button>
-->
</form>
<div id="wbtogdiv">KASTEN: <?php echo print_r($_POST)?></div>
</body>
</html>
By default, a button element will submit a form, however, you overrode that behavior by setting type="button". (A tad counterintuitive, I agree.)
Since you're already using jQuery, you can take advantage of its built-in AJAX support and override the default form submission behavior. That's an approach that degrades gracefully: if a user is running in an environment that doesn't execute JavaScript, they will submit the form using default browser behavior and still see the results. (You would tweak your CSS to make your div visible by default in that case, and use JS to hide it during page load.) DEMO jsFiddle
var $form = $('form');
var $resultDiv = $('#wbtogdiv');
$resultDiv.hide();
var successHandler = function(data, textStatus, jqXhr) {
$resultDiv.html(data);
$resultDiv.fadeToggle(200);
};
$form.submit(function(ev) {
ev.preventDefault();
if (! $resultDiv.is(':visible')) {
$.post(
'/path/to/your/script',
$form.serialize(),
successHandler
);
} else {
$resultDiv.fadeToggle(200);
}
});
(Also, since this is a test post, it's possible you aren't doing this in your actual code, but for heaven's sake, be extremely careful about a script that reveals information about its internal working to a user, or a script that echoes user-supplied content, unescaped, back to a web page. These are the first steps toward a fairly major security hole.)
You can try this :
Do not use display: none; in CSS and instead do it by JQuery.
<style>
#wbtogdiv {
width:30%;
height:100px;
border:6px solid green;
}
</style>
And this is what you do :
<div id="wbtogdiv" form-submitted = "no">KASTEN: <?php echo print_r($_POST)?></div>
<script>
$(document).ready(function(){
if($('#wbtogdiv').attr('form-submitted') == "no") {
$('#wbtogdiv').hide();
}
});
$(document).ready(function(){
$("#btn").submit(function(event){
$("#wbtogdiv").fadeToggle(20);
return true;
$("#wbtogdiv").attr('form-submitted', "yes");
});
});
</script>
I have this code:
<script type="text/javascript" charset="utf-8" src="http://web.itoday.gr/load.js"</script>
<p><script type="text/javascript"> datesmart(0); namesprefix(0); names(0); </script></p>
<p><script type="text/javascript"> datesmart(1); namesprefix(1); names(1); </script></p>
I want to get the variable names(1) to a php variable. How will i be able to do this ?
Thanks a lot !
You cannot directly access JS variables in PHP. You have two options
1) Set the value of names(1) to a html element and access the value from that html element (like hidden field, span etc)
2) Use AJAX
As an example:
Add hidden field in the case you are submitting the value to another page using form.
<input type="hidden" id="nameval">
Instead of hidden field, use elements like span or div to display the value of the names(1) in the html page like,
<span id="nameval"></span>
Set the value of this hidden input field (and html in the case of span/div) using jquery. Call this function in appropriately depending on your need. Firstly, you need to include the jquery library as shown below.
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() // when the document is ready
{
$("#nameval").val(names(1)); // set the value of element with id nameval if you are using hidden field
$("#nameval").html(names(1)); // use this in the case of span/div
});
</script>
PHP runs on server and javascript in browser . You need to send a ajax request to access value from javascript.
On script load send a ajax request with data to the php script you want to access this variable.
I want to pass button ID values into a Modal popup window when user click that particular button. Later from that passed ID I can query DB values and view in that opened modal popup window.
This is the code portion for button. Id will be assigned form DB. It is working fine.
<td>
<input type="submit" name="button" id="<?php echo $row["id"];?>" value="Details" onClick="popupwindow(this.id)">
</td>
Modal Window: Here I need to get the value form popupwindow function and query DB and view:
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<!-- From the retrieved values I can query and view data here.-->
</div>
</div>
JavaScript Function for Passing values to Modal Popup Window
function popupwindow(id) {
// code for Pass the value to modal window
window.location="#openModal"
}
I need a code sample for popupwindow function to pass my button ID values into Modal Window. Please help me on this. I'm very new to this topic.
I think you should use AJAX to query your DB and retrieve data from it, the basic template of your popupwindow can be like this:
function popupwindow(id) {
$("#openModal .content").load("yourscript.php?id=" + escape(id), function(){
$("#openModal").show();
})
}
And your HTML:
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<!-- From the retrieved values I can query and view data here.-->
<div class="content"></div>
</div>
</div>
Instead of using onClick(), use jQuery click function. Here's how:
$("[input[name = 'button']").click(function(){
$(this).attr('id'); // This will give the ID of the button clicked.
});
Alternatively, I'd suggest you to add a class to the buttons you want to have a modal displayed on. Here's how:
<td><input type="button" class="modalBtn" name="button" id="<?php echo $row["id"];?>" value="Details"></td>
Now, in JQuery, do the following
$(".modalBtn").click(function(){
$(this).attr('id'); // This will give the ID of the button clicked.
});
Hope it answers your question.
use window.location.hash for replace hash
function popupwindow(id) {
window.location.hash = '#openModal'
}
You can use the following script for loading and unloading pop up box,
<script type="text/javascript">
$(document).ready( function() {
loadPopupBox();
$("#popupBoxClose").click( function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$("#popup_box").fadeOut("slow");
$("#mainWrapper").css({ // this is just for style
"opacity": "0.8"
});
}
function loadPopupBox() { // To Load the Popupbox
$("#popup_box").fadeIn("slow");
$("#mainWrapper").css({ // this is just for style
"opacity": "0.2"
});
}
});
</script>
Other than that you dont need to send values through the JS , JS is a client side , u cannot play with server side language , using client side.
one solution is you can use something like,
window.location="#openModal?id=<?php echo json_encode($row['id']); ?>;"
and change the method of the form to GET instead of post.
After doing that you can write a php code , for excepting the value from $_GET and echo the modal pop-up using php.
I'm trying to make magnific popup contain some forms. I would like to pass variables through the html anchor to the final popup.
As Var1 in this pseudocode:
<!-- HTML launcher element -->
Show inline popup
<!-- Popup itself -->
<div id="test-popup">
<form method="post" action="">
<input type="hidden" id="myVar" name="Var1" value="[placeholder]" />
<input type="submit" />
</form>
</div>
<!-- Inizialization -->
<script type="text/javascript">
$(document).ready(function() {
$('.open_popup_link').magnificPopup({
type:'inline',
midClick: true,
function() {
**Here some magic code that sets Var1 = X **
$('#myVar').attr('value', function(i, attr){
return attr.replace('[placeholder]', Var1);
});}
});
});
</script>
I need this because I will generate serverside (w. PHP) the launchers so that each link will generate different form data.
edit: One approach i thought at was to use custom attributes in the launcher, eg:
Show inline popup
But I couldn't really get the right jQuery syntax for nesting the attributes processing INSIDE the magnific-popup inizialization.
My js/jquery knowledge is very basic, so thank you for any hint.
How about using a separate click handler outside the magnificPopup settings that changes the value of your input whenever a link is clicked, just make sure to bind it before initializing the plugin
HTML
Using data attributes as correctly suggested
Show inline popup
Javascript
$('.open-popup-link').click(function(){
$('#myVar').val($(this).data('var1'));
});
$('.open_popup_link').magnificPopup({
type:'inline',
midClick: true
});
Try:
Javascript/jQuery
<script type="text/javascript">
$(document).ready(function() {
$('.open_popup_link').magnificPopup({
type:'inline',
midClick: true,
function() {
**Here some magic code that sets Var1 = X **
Var1 = $('#myVar').val();
});}
});
});
Not quite sure what you are using Var1 for, but that is how you would get the value from the input into a global Var1 variable.
Let me know if I didn't understand what you're trying to do correctly.