I want to enable the btn1 and disable btn2 on page-load. When I input value in txtbox1, then, on clicking btn1 ,btn1 should be disabled and enable btn2. If I click btn2, then btn2 should also be disabled.
$value= $_POST['tb1'.$id];
echo '<form name="f1" method="POST" action="">';
echo '<input type="text" id="txtbox1'.$id.'" name="tb1'.$id.'" value="'.$value.'" />';
echo '<input type="submit" id="btn1'.$id.'" name = "btnstart'.$id.'" value="START" onClick="document.getElementById(\'btn2'.$id.'\').disabled=false;this.disabled=true;"/><input type="submit" id="btn2'.$id.'" name = "btnend'.$id.'" value="End" onClick="this.disabled=true;" disabled/>';
echo '</form>';
if ( isset( $_POST['tb1'.$id] ) ) {
echo $value;
}
When I use Chrome, i can do the above button effects , but I cannot get the txtbox1 value.
When I use IE and Firefox, I can get the txtbox1 value, but the button effect is not want I want. Which means, I input value in txtbox1 then click btn1 only, then it will automatically enable btn2, then disable both then, then get back to the original status(btn1 enable, btn2 disable).
How to solve this problem?
Since you have dynamic button names, its better not to touch them for disbale/enable feature that you want :
Using jquery:
$(document).ready(function () {
/*Operations on the 1st button click */
$('#form').children("input[type='submit']:first").click(function () {
$(this).attr("disabled", "disabled"); /*disable the 1st button */
$('#form').children("input[type='submit']").eq(1).removeAttr("disabled"); /*enable the 2nd button */
});
/*Operations on the 2nd button click */
$('#form').children("input[type='submit']").eq(1).click(function () {
$(this).attr("disabled", "disabled");
});
});
Additionally : give your form an id, something like :
echo '<form name="f1" id="form" method="POST" action="">';
/* check the form id tag ^^ here*/
basic demo here
but you wont be able to see full feature in it!!
never write your code like this, this makes debugging like pain, just make a script tag and handle everything there like this, the point here is about setAttribute and removeAttribute:
<?php
// your server side code
// finish declaring your variables like
$input_id = 'an_id';
$input_value = 'some_value';
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>testing</title>
</head>
<body>
<form name="f1" method="POST">
<input type="text" id="txtbox1<?php echo $input_id; ?>" name="tb1<?php echo $input_id; ?>" value="<?php echo $input_value; ?>" />
<input type="button" id="btn1<?php echo $input_id; ?>" name="btnstart<?php echo $input_id; ?>" value="START" />
<input type="button" id="btn2<?php echo $input_id; ?>" name="btnend<?php echo $input_id; ?>" value="End" disabled="disabled"/>
</form>
<script type="text/javascript">
btn1 = document.getElementById('btn1<?php echo $input_id; ?>');
btn2 = document.getElementById('btn2<?php echo $input_id; ?>');
btn1.onclick = function() {
console.log(this);
btn1.setAttribute("disabled","disabled");
btn2.removeAttribute("disabled");
return false;
};
</script>
</body>
</html>
Related
everybody.
I have the following situation:
I have:
http://example.com/ and http://example.com/new
In example.com, I have some forms that I load in example.com/new domain with fancybox iframe.
My form, basically shows some fields for the user to enter his pessoal data, like name, phone and etc... After he submit that, I show some user agreement terms that comes from database and a checkbox for the user to say that he agree with the terms.
After he check and submit, I want to alert some sucess message and the fancybox modal/iframe to close and thats it.
In the form page, i've loaded jquery, and bootstrap. So, when the user agree, I print:
<?php
echo "
<script>
alert('Some success message!');
$(document).ready(function(){
parent.$.fancybox.close();
});
</script>
";
?>
I have three forms, in one, works, in the other two, i get:
Error: Permission denied to access property '$'
The only difference between the form that works and the other two, is that in the form that works, i don't have the agreement terms coming from database, only the checkbox.
I could put my entire code here, but would be a giant question. But if you guys need, I can update.
Sorry for my english and forgive-me if I was not clear.
UPDATE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<?php
/* Connect with DB */
require_once('require/conectar.php');
if(!empty($_POST))
foreach($_POST as $k => $v)
$$k = $v;
?>
<script type="text/javascript" src="http://example.com/new/assets/js/jquery.js"></script>
</head>
<body>
<?php if(!isset($agree) and !isset($next)): ?>
<h1>The form</h1>
<form method="post" action="">
<label>Your name:</label>
<input type="text" name="name">
<br>
<label>Your email:</label>
<input type="text" name="email">
<br>
<input type="submit" name="next">
</form>
<?php
else:
$error = (!isset($name)) ? true : false;
$error = (!isset($name)) ? true : false;
if($error)
{
echo '<script>You must fill all fields before submit.</script>';
exit;
}
$qrr = mysql_query("SELECT * FROM `terms`");
$terms = mysql_fetch_object($qrr);
?>
<h1>Terms:</h1>
<?php echo $terms->content; ?>
<form method="post" action="">
<input type="hidden" value="<?php echo $name; ?>" name="name">
<input type="hidden" value="<?php echo $email; ?>" name="email">
<input type="checkbox" value="1" name="accept"> I agree.
<input type="submit" name="agree">
</form>
<?php
endif;
if(isset($agree))
{
/*
Here i mail me the user data.
*/
echo "
<script>
alert('Soliciação Realizada com sucesso!');
$(document).ready(function(){
parent.$.fancybox.close();
});
</script>
";
}else
{
echo "<script>alert('You need to agree with the terms to proceed.');</script>";
}
?>
</body>
</html>
This is a browser security thing. While there's a few ways around it, the best one is probably to use the postMessage API.
On your example.com parent page, add some code like this:
function handleMessageFromiFrame(event) {
alert('Some success message: ' + event.data);
//$.fancybox.close();
}
window.addEventListener("message", handleMessageFromiFrame, false);
And, then on your child example.com/new iframe, add code like this:
var parentOrigin = "*"; // set to http://example.com/ or whatever for added security.
function sendMessageToParent(){
parent.postMessage("button clicked", parentOrigin);
}
$('#submit-btn').click(sendMessageToParent);
Here's an example of it in action:
Parent example.com page: http://jsbin.com/hiqoyevici/1/edit?html,js,output
Child example.com/new iframe: http://jsbin.com/goferunudo/1/edit?html,js,output
When you click the button in the child page, it uses postMessage to notify the parent. Then the parent listens for the message and does whatever action you want.
On my website I have a big list of all the letters people can view.
For every letter there is a form which sends some data from the letter to the next page. What I want to do is to submit the form with a link, and not with a button.
As far as I know, that is not possible with PHP. So i tried making what i want in Javascript.
My programming experience in Javascript is litterly 0%. I need some help with this :)
This is the code I'm using:
<script type="text/javascript">
function submitform()
{
document.forms["brief_weergeven"].submit();
}
</script>
<form id='brief_weergeven[]' action='<?php echo $main; ?>beveiligd/achterbanner/nieuwsbrief.php' method='POST'>
<input type='hidden' name='nummer' value='<?php echo $brieven[0]; ?>'>
<input type='hidden' name='datum_maand' value='<?php echo $maand_getal; ?>'>
<input type='hidden' name='datum_jaar' value='<?php echo $jaar; ?>'>
<a href="javascript: submitform()" class='button'>Nieuwsbrief <?php echo $brieven[0]; ?> (<?php echo $maand .' ' .$jaar; ?>)<BR></a>
</form>
This code runs for every letter. As you can see, I'm using a array to give all the forms a seperate ID. The only thing is that i have no idea how to let javascript know which forum i submitted.
How can I do this? Please remember that i know nothing about javascript, so please explain what you're doing in your answer.
You dont need javascript to do this, just use css to make your button look like a link:
Css:
button {
border:none;
padding:0;
background: none;
color: blue;
text-decoration: underline;
cursor: pointer;
}
html:
<button type="submit">Submit</button>
You can usedocument.getElementById('form-id')
And event handler like this
var form = document.getElementById('your-form-id');
form.onsubmit = function(){
// code
}
user574632 gave you a nice alternative. Still even want to use JavaScript you can try below.
Use the jQuery onclick method having the id attribute of the link as selector.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#submit_link").on("click", function(){
var form = $(this);
var url = form.attr("action");
var data = form.serialize();
$.post(url, data);
});
});
</script>
<form id='brief_weergeven[]' action='<?php echo $main; ?>beveiligd/achterbanner/nieuwsbrief.php' method='POST'>
<input type='hidden' name='nummer' value='<?php echo $brieven[0]; ?>'>
<input type='hidden' name='datum_maand' value='<?php echo $maand_getal; ?>'>
<input type='hidden' name='datum_jaar' value='<?php echo $jaar; ?>'>
<a href="#" id="submit_link" class='button'>Nieuwsbrief <?php echo $brieven[0]; ?> (<?php echo $maand .' ' .$jaar; ?>)<BR></a>
</form>
actually I have:
<form action="<?php echo $this->getUrl('checkout/cart/estimatePost') ?>" method="post" id="shipping-zip-form" name="shipping-zip-form">
<label for="postcode"<?php if ($this->isZipCodeRequired()) echo ' class="required"' ?>><?php echo $this->__('Zip/Postal Code') ?></label>
<div class="input-box">
<input class="input-text validate-postcode<?php if ($this->isZipCodeRequired()):?> required-entry<?php endif;?>" type="text" id="postcode" name="estimate_postcode" value="<?php echo "04000"; ?>" />
</div>
<div class="buttons-set">
<button type="button" id="send" title="<?php echo $this->__('Get a Quote') ?>" onclick="coShippingMethodForm.submit()" class="button"><span><span><?php echo $this->__('Get a Quote') ?></span></span></button>
</div>
</form>
and I unsuccessful tried:
<script type="text/javascript">
document.getElementById('send').submit();
document.forms['shipping-zip-form'].submit();
</script>
What I want to do it's quite simple, let javascript automatically press the button so submit the form. I will not need the submit button anymore, I need to automate the press button process. Thx
I"m guessing that your function isn't firing. Set it to execute on page load if that's when you'd like it to happen. Also, only <form> elements can be submitted so trying to target your <button id="send"> won't work.
window.onload {
document.getElementById('shipping-zip-form').submit();
}
document.getElementById('shipping-zip-form').submit();
You can use jQuery and try this :
$(document).ready(function(){
$('#send').click(function(){
$('#shipping-zip-form').submit();
});
});
I have a simple code to delete data from the database,and I want a warning message to appear before deleting. the code works fine when I put one onclick and when I put two only the first onclick works.
and I need to onclick one for the warning message and the other for delet.php page.
<form><input type="button" value="delete" onclick="return confirm('Really delete?');" onClick='window.location.href="delete.php?id= <?php echo $id; ?>"' ></form>
This is how I would handle it:
<input type="button" value="delete"
onclick="confirmDelete('<?php echo $id; ?>');">
Then elsewhere in the page:
<script type="text/javascript">
function confirmDelete(id) {
if(confirm('Really delete?')) {
window.location.href= "delete.php?id=" + id;
}
}
</script>
Notice I removed the <form> element. If this is the only context this is in, the <form> element is unnecessary since you're not actually filling out a form, just clicking a button. If there is more context you didn't include in your question, then it might be relevant to that.
Try using this with an if clause:
<form>
<input type="button" value="delete" onclick="
if(confirm('Really delete?')) {
window.location.href='delete.php?id=<?php echo $id; ?>';
}
else {
return false;
}
">
</form>
You can only use one onClick. But there's a way to do what you want in only one ;)
<form>
<input type="button" value="delete" onclick="
if(confirm('Really delete?')){
window.location.href=\"delete.php?id= <?php echo $id; ?>\"
}else{
return false;
}" />
</form>
I have a page which has lot of post data in the url.
For example,
www.test.com/test.php?userid='tester'&name=test&so on
The above page has a form that has something like this:
<?
$set=get_value_set;
if($set ==1) {
$set_value="SET";
} else {
$set_value="UNSET";
}
?>
<form name="test">
<input type="text" readonly="READONLY" value="<? echo $user_id; ?>">
<input type="submit" value="Email" name="submit_user">
<input type="submit" value="<? echo $set_value; ?>" name="submit_user">
<?
function setuser()
{
//sets the value
}
function email_user()
{
//sets the value
}
?>
there are two buttons above, when I click on email, i want the value of email button to be passed to the email_user function and do some proceesing there. Similar thing when I click on the set button.
NOTE:But in both cases above, I want the form to remain in the same page with the same post data in the url, but I also want the page to be refreshed so that the set button can have a value of Set or Unset depending on the database update.
Is this possible?
I would start to remove the submit action of each button and change them to
<input type="button" class="btn-Email" value="Email" name="submit_user" />
<input type="button" class="btn-Other" value="<? echo $set_value; ?>" name="submit_user" />
and then, using jQuery, you can easily process each click and submit the form
$(function() {
$(".btn-Email").click(function() {
// append anything you want
var but_email_value = $(this).val(), // or $(".btn-Email").val()
btn_other_value = $(".btn-Other").val();
$("form").submit();
});
$(".btn-Other").click(function() {
// append anything you want
var but_other_value = $(this).val(), // or $(".btn-Other").val();
btn_email_value = $(".btn-Email").val();
$("form").submit();
});
});
change your HTML
<form id="test" name="test">
...
<button onclick="email_user();">Email</button>
<button onclick="setuser();"><? echo $set_value; ?></button>
</form>
your functions should submit the form for you:
document.getElementById("test").submit();