i am using tow pagge one is parent page and other is child window page for pass the radio button value from child window page to parent page but i have getting error undefined in parent page text fields...
parent page
<form method="post" action="" name="f1">
<table border=0 width=550>
<tr>
<td>
Your Name
<input id="OPRID" name="OPRID" type="text" value="<?php echo (isset($_POST
['OPRID']) ? $_POST['OPRID'] : ""); ?>" />
<a href="javascript:void(0);" name="My Window Name" title=" My title here "
onClick="window.open
('popwindow.php','Ratting','width=650,height=550,0,status=0,scrollbars=1');" />
Click here to open the child window
</a>
</td>
</tr>
</table>
</form>
**child window page**
<html>
<head>
<script langauge="javascript">
function post_value(){
opener.document.f1.OPRID.value = document.frm.OPRID.value;
self.close();
}
</script>
<form name="frm" method="post" action=''>
<tr>
<td><div align="center">
<input type="radio" name="OPRID" id="radio" value="<?php echo $objResult ["OPRID"];?
>" /></div></td>
<td><div align="center"><?=$objResult["OPRID"];?></td>
<td><div align="center"><?=$objResult["OPRDEFNDESC"];?></td>
</tr>
<?
}
?>
</table>
<br />
<tr>
<td><div align="center"> <input type="button" value='Submit' onclick="post_value();"> </div>
</td>
</tr>
</form>
but in text fields i have getting undefined error.
What you are trying to achieve can be done with using HTML5 sessionStorage feature.
Check this link: http://playground.html5rocks.com/#sessionstorage
use this
window.opener.document.f1.OPRID.value = document.frm.OPRID.value;
instead of this
opener.document.f1.OPRID.value = document.frm.OPRID.value;
hope this helps...
Related
I have a html form inside the table and i want to make it disappear after the user submits the form
Form:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td colspan="3">
<h6>Have Discount Coupon? Apply it here...</h6>
</td>
<td>
<div id="form">
<form class="coupon" method="post">
<input type="text" name="coupon" placeholder="Enter Coupon Code" autocomplete="off">
<input type="submit" name="coupon" value="Apply Coupon">
</form>
</div>
</td>
</tr>
<script type="text/Javascript">
$('#form').submit(function() {
$(this).hide();
});
</script>
After the submission, the form is still visible and nothing happening.
The problem is the selector:
$('#form')
The <form> element does not have the attribute id="form" — (that's the <div id="form"> - not a form and therefore not submittable) — all you need to do is target the actual <form> element. Change your code to this:
$('form').submit(function(e) { //NOTE: Removed "#"
e.preventDefault();
$(this).hide();
})
And it will work:
$('form').submit(function() {
$(this).hide();
})
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<tr>
<td colspan="3">
<h6>Have Discount Coupon? Apply it here...</h6>
</td>
<td>
<div id="form">
<form class="coupon" method="post">
<input type="text" name="coupon" placeholder="Enter Coupon Code" autocomplete="off">
<input type="submit" name="coupon" value="Apply Coupon">
</form>
</div>
</td>
</tr>
You have to prevent the default action first in order to hide the form using event.preventDefault()
Further if you're working on a commercial level and you want your form to be submitted without redirection, then you can use XHR request
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td colspan="3">
<h6>Have Discount Coupon? Apply it here...</h6>
</td>
<td>
<div id="form">
<form class="coupon" method="post">
<input type="text" name="coupon" placeholder="Enter Coupon Code" autocomplete="off">
<input type="submit" name="coupon" value="Apply Coupon">
</form>
</div>
</td>
</tr>
<script type="text/Javascript">
$('#form').submit(function(event) {
event.preventDefault();
// ... XHR request to submit form
$(this).hide();
});
</script>
There is a Problem in the approach that You use.Each time you run click the submit button in the page your page gets reloaded **this will hide the form when you click and again render the whole page from the begining. because of that you want be able to get what you want.Instead try to send data using Ajax by having a button rather than using the default form submission approach
I am try to display under my form the new value.
<form>
<h2>AES Encryption</h2>
<table>
<tr>
<td>
<label for="inputValue">Text to encrypt</label>
</td>
<td>
<input type="text" id="inputValue" size="50" name="inputValue" />
</td>
</tr>
<tr>
<td>
<label for="inputPassword">Password:</label>
</td>
<td>
<input type="text" id="inputPassword" size="50" name="inputPassword" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Verschlüsseln" id="submitButton" onclick="encryptAES()"/>
</td>
</tr>
</table>
<div id="afterPressed" hidden="true">
<h3 id="resultTitle"></h3>
<p id="result"></p>
<br>
<h3>Code</h3>
Download
</div>
</form>
and my Script:
function encryptAES() {
var value = document.getElementById("inputValue").value;
var password = document.getElementById("inputPassword").value;
var encrypted = base64toHEX(CryptoJS.AES.encrypt(value, password));
document.getElementById("afterPressed").removeAttribute("hidden");
document.getElementById("resultTitle").innerHTML = "Result";
document.getElementById("result").innerHTML = encrypted;
}
When I click the button the code works for 1 second and then refresh the form as null
I want to show the result in the div result tag, but the page is updated and everything disappears and the code is hidden again.
Your form is submitting, so the values are displayed in the browser and then the page reloads.
You can either set the onsubmit property of the form like this:
<form onsubmit="return false;">
Or you can use an <input type="button"> or <button> instead of the <input type="submit"> that is... well, submitting the form.
Update your form tag with <form onsubmit="return false;">. This will prevent the page from getting submitted.
I'm currently re-designing a page on my site that allows registered users to send messages to the administrators. All the code I'm using is already fully functional on the other page but after moving everything across, it has stopped working, which has baffled me.
<textarea name="content" id="msgs" class="convo" ></textarea>
The text area is as simple as it gets, the form is wrapped around TR tags.
I know the form is working because I also submit to the form the date/time and the email address' of the sender and receiver. The form executes 'compose.php', writes to the database successfully and re-directs back to the customer's profile. The problem is that the "new" message is blank. Everything was sent to the form apart from the contents of the text area.
If I use a plain text area then everything works, so the problem has to be the 'WYSIWYG Content Editor' that I apply to the text area, even though it works fine on the other page?
bkLib.onDomLoaded
(
function()
{
new nicEditor({buttonList : ['bold','italic','underline','left','center','right','ol','ul','fontFamily','fontSize','fore color','link','unlink']}).panelInstance('msgs');
}
);
Does anyone have any idea where I can start? I've been troubleshooting this for a good few hours and it's starting to get the best of me! If you need any other snippets of code, let me know.
EDIT
Maybe this will help...
<textarea name="content" id="msgs" class="convo" >TEST MESSAGE</textarea>
When the page loads, "TEST MESSAGE" is written to the text area. If I submit it, the value is passed to the form and then to the database etc... But if I remove it and type my own words, nothing is sent across?
I have managed to fix the problem!
The old code was:
<form name="send" id="sndmsg" method="post" action="compose.php">
<tr>
<td width="90%" class="tab"> Compose New Message</td>
</tr>
<tr>
<td>
<textarea name="content" id="msgs" class="convo" ></textarea>
</td>
</tr>
<tr>
<td>
<input name="user_s" type="hidden" id="user_s" value="<?PHP echo $user;?>" />
<input name="user_r" type="hidden" id="user_r" value="<?PHP echo $email;?>" />
<input name="fname" type="hidden" value="<?PHP echo $fullname;?>" />
<input type="image" src="/send.png" />
</td>
</tr>
</form>
Which was clearly, not working. The new code does work, which is the following:
<tr>
<td width="90%" class="tab"> Compose New Message</td>
<form name="send" id="sndmsg" method="post" action="compose.php">
<textarea name="content" id="msgs" class="convo" ></textarea>
<input name="user_s" type="hidden" id="user_s" value="<?PHP echo $user;?>" />
<input name="user_r" type="hidden" id="user_r" value="<?PHP echo $email;?>" />
<input name="fname" type="hidden" value="<?PHP echo $fullname;?>" />
<input type="image" src="/send.png" />
</form>
</td>
</tr>
I have button click event in html page where I am calling a PHP file. inside the php I have two div where I want to show hide according to the check box I have ...
now it shows two check box and the show div. but i want load the show div only if user checks the first check box how can i achieve this? pls help.here the PHP Code
<div id="dialog_title">
<input type="checkbox" name="First" value="First">
First List<br>
<input type="checkbox" name="Second" value="Second">Second
</div>
<div id="Show div">
<table>
<tr>
<th> Name </th>
<th> Address </th>
</tr>
<?php
foreach ( $deviceArr as $device) {
$id = $device['id'];
$name = $device ['name'];
$Address = $device['address'];
?>
<tr class="font1">
<td> <input type="text" class="g_input_text" name="name[]" value="<?php echo $name; ?>" /> </td>
<td>
<input type="text" class="g_input_text" name="address[]" value="<?php echo $Address; ?>" />
<input type="hidden" name="id[]" value="<?php echo $id; ?>" />
</td>
</tr>
<?php
}
?>
</table>
</div>
When the page is loaded hide the show div i named first_list_bx and give an id as first_chk_bx to first check box like:
<input type="checkbox" name="First" value="First" id="first_chk_bx">
<div id="first_list_bx" style="display:none;">
//code
</div>
Then use jquery for detecting checkin of checkbox and show the first_list_bx like:
$('#first_chk_bx').click(function() {
if($(this).is(":checked")){
$("#first_list_bx").show();
}
else{
$("#first_list_bx").hide();
}
});
This is what you expecting?
$(document).ready(function() {
$('#Show').hide();
$("input[name=First]").click(function () {
$('#Show').toggle();
});
});
It's done in JQuery. Find Demo
Note: Change <div id="Show div"> to <div id="Show">
as you tagged your question with javascript try this js function in your html like this
HTML
<div id="dialog_title">
<input type="checkbox" name="First" value="First" onclick="javascript:show_hide(this, 'Show_div')">
First List<br>
<input type="checkbox" name="Second" value="Second">Second
</div>
<div id="Show_div" style="display:none">
<table>
<tr>
<th> Name </th>
<th> Address </th>
</tr>
<?php
foreach ( $deviceArr as $device) {
$id = $device['id'];
$name = $device ['name'];
$Address = $device['address'];
?>
<tr class="font1">
<td> <input type="text" class="g_input_text" name="name[]" value="<?php echo $name; ?>" /> </td>
<td>
<input type="text" class="g_input_text" name="address[]" value="<?php echo $Address; ?>" />
<input type="hidden" name="id[]" value="<?php echo $id; ?>" />
</td>
</tr>
<?php
}
?>
</table>
</div>
JAVASCRIPT
<script>
function show_hide(my_obj, id)
{
var chk = my_obj.checked;
if(chk===true)
{
document.getElementById(id).style.display="block";
}
else
{
document.getElementById(id).style.display="none";
}
}
</script>
I asked this question earlier, but asked without the proper info, here it goes again. What i need to happen is for the cancel button "list_btn_cancel" to close the popup activity and to replace what was imputed with the inputs placeholder.
This table is the input.
<table width="100%" style="line-height:0px" >
<tr>
<td><p>1.</p></td>
<td><input name="activities_thoughts_1" id="activities_thoughts_1" type="text" style="width:345px;" placeholder="Type or click list button >" /></td>
<td><input type="button" id="thoughts_1" class="list_btn ext_thoughts" value="List >" /></td>
</tr>
</table>
**this table is the popup**
<div id="popup_activity" class="box_list">
<div id="list_question_btn"></div></div>
</div>
<div id="activity_area_content" style="padding-bottom:5px;" >
<form name="form1">
<table class="style2" width="100%">
<tr><br />
<td width="8%" align="right"><input name="thoughts_list" id="thoughts_list_0" class="thoughts_list" type="radio" value="It is just terrible that my child will not be a normal kid" /></td>
</table>
</form>
</div>
</div>
<div><table><td><a style="margin-left:290px" onclick="closeDialog('popup_activity');"><input type="button" id="thoughts_cancel" class="list_btn list_btn_cancel" value="Cancel >" placeholder="Type or click list button >" /></a></td> <td><a onclick="closeDialog('popup_activity');"><input style="margin-left:10px" type="button" id="close_thoughts" class="list_btn list_btn_close" value="Close >" /></a></td></table></div></div>
**Here is the script**
$('.list_btn').button();
$('#popup_activity').css("display","none");
$('#list_help').css("display","none");
$('.ext_thoughts').click(function(){
openDialog('popup_activity');
btn_id= $(this).attr('id');
});
$('.thoughts_list').click(function(){
( $(this).attr('id'));
$("#activities_" +btn_id).val($(this).val());
});
Okay don't quite understand what you want but here is what i think you want:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$('.ext_thoughts').click(function(){
$("#popup_activity").toggle();
});
$('.list_btn_cancel').click(function(){
$("#popup_activity").hide();
$("#activities_thoughts_1").val('');
});
});
</script>
</head>
<body>
<input name="activities_thoughts_1" id="activities_thoughts_1" type="text" style="width:345px;" placeholder="Type or click list button " />
<br>
<input type="button" id="thoughts_1" class="list_btn ext_thoughts" value="Show/Hide List" />
<input type="button" id="thoughts_cancel" class="list_btn list_btn_cancel" value="Cancel" />
<br>
<div id="popup_activity" class="box_list" style="display:none;">
This is the pop up division
</div>
</body>
</html>
FIDDLE HERE
It's hard to figure out exactly what you're trying to do from your question but if all you want is for the text input to revert to its placeholder text simply set its value to blank.
$("#activities_thoughts_1").val('');
Here's an example http://jsfiddle.net/arG5f/