I an working on a project and has encountered a problem. please view the following code.
<iframe name="stus" id="stus" style="display:none;"></iframe>
<form name="water" id="water" method="post" autocomplete="off" action="components/com_pocketsea/assets/new/water.php" target="stus">
<input type="hidden" id="newwatermark" name="newwatermark">
</form>
<div id="posting"></div>
and the code for water.php is
<?php
$newwat = $_POST['newwatermark'];
?>
<script type="text/javascript" src="../../js2/jquery.min.js" ></script>
<script>
$(document).ready(function(){
$("#posting", window.parent.document).html("<?php echo $newwat; ?>").fadeIn('slow');
});
</script>
plz help
In your child window, your window object has a property called opener which points to the window object of the window that opened it. So when you want to insert data entered into a form in the child window into the page of the parent window, you would do:
$('#myform').submit(function(){
opener.document.getElementById('namearea').innerHTML = document.getElementById('nameform').value;
});
I don't know what you want (you did not specified), but I would change my Js code to this:
$(document).ready(function(){
$('#posting').html($newwat).fadeIn('slow');
});
Related
I am very new to web designing. I want to create a web page such that when the user is typing in the form, at the same moment that data must be shown on the left side of the same page as in the image below. Example, as the user types in the about me text box, the data area on the left side with about me title should also get updated instantly and dynamically with the same speed the user is typing.
Can anyone please help me how this is possible? or which language will i have to use to do this?
thanks in advance.
example image
You will have to use javascript to achieve this.
<input type="text" id="input">
<div id="output">
</div>
<script>
var input = document.getElementById('input');
var output = document.getElementById('output');
// add event listener to the input element
input.onkeyup= function() {
// set the output element HTML to what you type in
output.innerHTML = this.value;
}
</script>
Fiddle: https://jsfiddle.net/xpvt214o/124485/
Use the following code :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$('#name').keyup(function () {
$('#display').text($(this).val());
});
});
</script>
</head>
<body>
<input type="text" id="name"/>
<span id="display"></span>
</body>
</html>
I´m trying to get typed text on ckeditor (textarea), but I have some trouble:
Here is my code:
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#editor').ckeditor();
var editor = $('#editor').ckeditorGet();
var data = $('#editor').val();
window.alert(data);
window.alert(CKEDITOR.instances['editor'].getData());
});
</script>
<body>
<form method="post">
<textarea name="editor" id="editor"></textarea>
<input type="submit" value="Submit">
</form>
The results on two alerts are empty. What i´m doing wrong?
That's because you are calling the alerts when the page loads. At that time, there is nothing yet on the textarea.
Bind the event to something that will happen after the textbox has something to show, for example, when you click the submit button:
$(document).ready(function(){
$('#editor').ckeditor();
$('input[type=submit]').on('click', function() {
window.alert($('#editor').val());
});
});
Also, you may want to bind the click event to the document instead, so it will happen even if you add new submits programatically. For that to happen, bind the event like this:
$(document).on('click', 'input[type=submit]', function() {
window.alert($('#editor').val());
});
I have a few question about jquery
here is my code
<?php $date=$_POST["user"]; require_once("test1.php");
function createReportTable($result, $title){ }?>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
alert("hi");
$('.show_hide').hide();
$('.addperm').submit(function(){
var query = $('#user').val();
$.post("test.php", query, function(response){
alert(response);
}); }); $('.show_hide').show(); });
</script>
</head>
<body>
<form action= 'test.php' class = 'addperm' method='post'>
<input type='text' name='user' id='user' /><br />
<input type='submit' value='Add' id="add">
</form>
<div id="wrapper" class="show_hide">
<div id="center">
<div>
<?php createReportTable(getReport($date), "xyz"); ?>
</div>
</div> </div>
So here are my questions
1) I tried to use alert function and it is not working in chrome. firefox it works fine. Why is that so?
2) I am trying to hide and unhide the div tag but it does not seem to work at all in chrome but in firefox it is hiding the dive div tag but not showing it again.
I think the reason for the div tag not showing again is after the $post the page is refreshed and hence it is not working. If this is the problem how do I solve it? if this is not the issue then what might be the issue. and why is the chrome browser not working.
If I am not concerned with the div tags the code is working perfectly and giving the output as required in all the browsers.
Any help will be appreciated
I am trying to display search query results on a separate page. I copied the code from a forum, but since the display page isn't php, I'm not sure it will work.
Here is the code from the home page:
<form action="search" method="post">
<input type="text" name="q" />
<input type="submit" name="search" value="Search" />
</form>
I want the search results to show on mysite.com/search (obviously)
The code on mysite.com/search is as follows:
<div id="cse" style="width: 100%;">Loading</div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">//
google.load('jquery', '1');
google.load('search', '1');
google.setOnLoadCallback(function(){
var customSearchControl = new google.search.CustomSearchControl('XXXXX');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
$(".gsc-input").val("<?php echo $_POST['q']; ?>");//insert into search field requested search text
$(".gsc-search-button").click();//call button click event, show results
}, true);
// ]]></script>
Do I have any options? Is there a workaround?
since the display page isn't php
Then you can't use $(".gsc-input").val("<?php echo $_POST['q']; ?>");, but could use something like
$.get('path-to-php-script/query.php', function(data) {
$(".gsc-input").html(data);
alert('Load was performed.');
});
The idea is that you just use jQuery to retrieve and manipulate the data that you need to run through PHP script(s) before they're returned to the HTML-only display page.
You can achive like this
Put this code in your head tag
<script language="javascript">
function changeData(fromDiv)
{
document.getElementById('toDiv').innerHTML = fromDiv.innerHTML;
}
</script>
And This in your body tag
<div id="toDiv"></div>
<div id="fromDiv" onclick="changeData(this)">Hello World I am here</div>
I have a file upload script which works great when opened from the calling page via window.open(). However, I'm trying to avoid the popup window and load the script into the calling page itself (via jQuery.load()).
However, although everything appears to work fine, the file does not actually get transferred. The calling page is itself a form. Could that cause the problem?
<form id="myParentPage">
<div id="myUploadPlaceholder"></div>
<input type="button" id="loadScript" value="Test" />
<script type="text/javascript">
$(document).ready(function()
{
$('#loadScript').click(function() {
$('#myUploadPlaceholder').load('myUploadScript.php?action=test' );
});
});
</script>
</form>
Try using a hidden iframe instead:
<iframe id="myUploadPlaceholder" src="_blank"></iframe>
<input type="button" id="loadScript" value="Test" />
<script type="text/javascript">
$(document).ready(function()
{
$('#loadScript').click(function() {
$('#myUploadPlaceholder').attr('src','myUploadScript.php?action=test');
});
});
</script>