I am modifying a php login form, adding javascript check form function to it. I wish when users tick the checkbox, the form is true, and when the checkbox is empty, the form becomes false. the codes are like these:-
//the javascript
function check_sli(form,mark,edit){
if(mark==1 || mark=="all"){
if(form.terms.value==""){
sli_check_terms.innerHTML="Please read the terms and conditions first！";
sli_check_terms.style.height="auto";
return false;
}else{
sli_check_terms.innerHTML="";
sli_check_terms.style.display = "none";
}
}
}
//the form
<form name="form_sli" id = "form_sli" ACTION="<?php echo $loginFormAction1; ?>" METHOD="POST" onSubmit="return check_sli(form_sli,'all')">
<input type="text" name="login"/><br>
<input type="password" name="password"/><br>
<input name="terms" type="checkbox" id="terms" checked="checked" onBlur="check_sli(form_sli,1)">I have read the terms and conditions<br><div id="sli_check_terms" class="right"></div>
<input type="submit" name="button" id="button" value="Login" />
</form>
The above codes works normal for textfields, such as when the textfield is empty, the innerHTML pops up. However, when using checkbox, I don't know the checked and unchecked value, is it 1 vs 0, or !=="" vs ==""??? and shall I use onBlur or onSubmit???
How shall it modify the scripts so that it works for checkbox as well? thanksalot!
checkboxes use .checked in the dom, which is a bool.
if (form.terms.checked) {
... it's checked ...
}
Instead of if(form.terms.value==""), do this if(form.terms.checked==false)
Related
Say I have a simple form on a page called photo/delete.php. This form deletes an image specified by the user. All it is, is this:
<form action="?" method="post">
<input type="checkbox" name="confirmDelete" value="confirm" />
<input type="submit" value="delete" />
</form>
So, this form contains a confirmation check box that must be ticked to ensure the image is deleted. How can I dynamically choose what page to POST this form to, based on its contents?
For example, if the checkbox is not checked, yet the submit button is clicked, I'd like to stay on the same photo/delete.php page and display an error, since its possible they really do want to delete the image and simply forgot to tick the box.
But otherwise, if everything is successful and the checkbox is ticked, I'd like to POST it to another page, say home.php since it makes no sense to stay on the same page of a just-deleted image.
How can I implement this?
You may try something like this
HTML:
<form action="delete.php" method="post">
<input type="checkbox" name="confirmDelete" value="confirm" />
<input id="btn_delete" type="submit" value="delete" />
</form>
JS:
window.onload = function(){
document.getElementById('btn_delete').onclick = function(e){
var checkBox = document.getElementsByName('confirmDelete')[0];
if(!checkBox.checked) {
if(e && e.preventDefault) {
e.preventDefault();
}
else if(window.event && window.event.returnValue) {
window.eventReturnValue = false;
}
alert('Please check the checkbox!');
}
};
};
DEMO.
I'm using CodeIgniter and in a single PHP file with JavaScript inside, I want to pass a JavaScript variable to the body (PHP) and make it a hidden input. But whenever I use the controller to post the value (where the JavaScript variable is), it returns none. Here are some parts of the code:
JS:
function pass() {
//some code
document.getElementById('yes').innerHTML = yes; //where yes is a var
}
HTML (PHP):
<form action="search">
<input type="hidden" name="yes" value="<?php $yes= "<p id='yes'> </p>"; echo $yes;?>" />
<input type="submit" name="yes" value="Done" />
</form>
So whenever I post the yes in the controller $yes = $this->input->post('yes'); it returns nothing.
How can I pass the JavaScript variable so I can use it again in the next file? Thank you!
You did'nt set the form method so it defaults to GET
You should set
<form action="search" method="POST">
try
JS :
var yes = "<?php echo $_POST['yes']; ?>";
document.getElementById('yes').innerHTML = yes;
You have to set the value property of the <input>, not the innerHTML. You also need to give the <input> a different name than other fields or the "submit" button. Finally, you have to give your <input> an "id" property so that you can actually get it with getElementById().
You should be setting the value of the hidden input, not the innerHTML. This code should work:
function pass() {
//some code
document.getElementById('yes').value = yes; //where yes is a var
}
Another problem, as noted by Pointy, is that the hidden input doesn't actually have an id, so you should give it an id (in this case the id should be yes).
Something you should also do is escape the html you are inserting into the hidden input with PHP, so it doesn't accidentally get parsed. You can do this with htmlspecialchars():
<form action="search">
<input type="hidden" id="yes" name="yes" value="<?php $yes= htmlspecialchars("<p id='yes'> </p>"); echo $yes;?>" />
<input type="submit" value="Done" />
</form>
Your submit button and your hidden field have the same name
yes .
You try to access your hidden input by id yes , and your input
does not have this id , use getElementByName('yes') instead or give
your hidden field id='yes'.
You use innerHtml which only sets or returns the inner HTML of an element,it should be value.
HTML CODE:
<form action="search">
<input id='yes' type="hidden" name="yes" value="<?php $yes= "<p id='yes'> </p>"; echo $yes;?>" />
<input type="submit" name="yess" value="Done" />
</form>
JS :
document.getElementById('yes').value = yes;//yes is a variable
I have this:
<form method="post" id="kl" action="step2.php">
<input type="radio" name="rubrik" value="bussines"></input>
<input type="radio" name"rubrik" value="private"></input>
<input type="image" value="submit" src="/images/submit.png" alt="Submit" />
</form>
What i bassicaly want is: When the second radio button is checked, to submit the form to step2a.php, a different file. How can i do this? Jquery, Javascript, php?
You could do this with JavaScript (bind a submit listener that checks the value of the radio button and then sets the action property of the form), but it would be simpler and more reliable to do something (server side) along the lines of:
<form ... action="step-selector.php">
and
<?php
if (isset($_POST['rubrik']) && $_POST['rubrik'] == 'bussines') {
include('step2.php');
} elseif (isset($_POST['rubrik']) && $_POST['rubrik'] == 'private') {
include('step2a.php');
} else {
include('error-state.php');
}
?>
you can do this by modifying the Form into:
<form method="post" id="kl" action="step2.php">
<input type="radio" class="radio" rel="step2.php" name="rubrik" value="bussines"></input>
<input type="radio" class="radio" rel="step2a.php" name"rubrik" value="private"></input>
<input type="image" value="submit" src="/images/submit.png" alt="Submit" />
</form>
I added rel attribute to radio buttons. each has a value of the url. I also added a class to get the element with jQuery.
Now, you will need some Javascript, i will use jQuery code:
$('.radio').click(function (){
rad = $(this);
radRel = rad.attr('rel');
$('form#kl').attr('action', radRel);
});
There are multiple ways of doing it, depending on what you want exactly.
Check this one out, it might help you get there; Radio Button to open pages
You can use form.submit() as onclick-handler (not onchange) and change the action, too.
<input type="radio" name"rubrik" value="private" onclick="this.parentNode.action='yourOtherFile.php'; this.parentNode.submit()"></input>
I have a submit form for a URL and I want it to have specific behavior which I am not able to achieve so far. Initially I want the button to be enabled. After someone enters a URL and hits the "submit" button, I want to call my checkURL() function. If the function returns true, I want the button to become disabled and I want to then open remote_file.php. If it returns false, I want the button to be enabled and make them try another URL.
<form name=URLSubmitForm
action="remote_file.php"
method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="524288000">
<input type="text" name="name" size="50">
<input type="submit"
onchange="this.disabled=false"
onclick="this.disabled=true; checkURL();"
value="submit">
</form>
Edit: It looks like I was just putting the onchange in the wrong place. I ended up doing this to fix reenabling the button
<input type="text" onchange="submit.disabled=false" name="name" size="50">
Thanks!
I would propose that you attach the event handling code to the form's onsubmit event, not the button event(s). What you're trying to control is whether or not the form is posted. The button being disabled while your validation logic runs is a secondary goal.
Try this instead:
<script type="text/javascript">
function checkURL(){
var submitButton = document.getElementById('submitButton');
submitButton.disabled=true;
/* implement your validation logic here
if( url is invalid ){
submitButton.disabled=false;
return false;
}
*/
// everything is valid, allow form to submit
return true;
}
</script>
<form name="URLSubmitForm" action="remote_file.php" onsubmit="return checkURL();" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="524288000">
<input type="text" name="name" size="50">
<input type="submit" name="submitButton" id="submitButton" value="submit">
</form>
<input type="submit"
onclick="if (checkURL()) { this.disabled='disabled'; return true; } else { return false; }"
value="submit">
How about in the form's onsubmit event:
<form onsubmit="(function(){
if(checkURL()){
this.elements['submit'].disabled = 'disabled';
}
else{
return false;
}
})()">
Since you haven't given any ajax code, the form will still be submitted normally and when the page is reloaded the button will be enabled again.
onclick="checkURL(this);"
function checkURL(arg){
this.disabled=true;
if(<something>) this.disabled=false;
}
i have been looking for this script for a while now. I have some rules and then i have a checkbox to click if you agree the terms and rules.
Now how do i make a check in PHP if the person has checked that box and agreed to the rules? Thanks for ur help, i appreciate it!
Assuming you have a form that looks something like this:
<form method="post" action="some_handler.php">
<label for="option1">Option 1</label>
<input id="option1" type="checkbox" name="option1" />
<label for="option2">Option 2</label>
<input id="option2" type="checkbox" name="option2" />
<!-- submit, etc -->
</form>
You can check for the presence of the checkbox values (by name) in $_POST, i.e.
<?php
$optionOne = isset( $_POST['option1'] );
$optionTwo = isset( $_POST['option2'] );
If the boxes aren't checked, $_POST won't contain values for them.
It's totally enough to check for:
$userAgrees = false;
if (isset($_POST['myCheckbox']))
{
$userAgrees = true;
}
If the form is a method POST form. Then on the action page you should have access to the $_POST variable.
Check out the results of this on your action page.
echo "<pre>";
print_r($_POST);
echo "</pre>";
The $_POST variable will be an array. You can access the value of the array like this.
if($_POST["key"] == "value")
Where the key is the name in the output above.
form.php:
<form action="checkbox-form.php" method="post">
<label for="formWheelchair">Do you need wheelchair access?</label>
<input type="checkbox" name="formWheelchair" value="Yes" id="formWheelchair" />
<input type="submit" name="formSubmit" value="Submit" />
</form>
checkbox-form.php:
if(isset($_POST['formWheelchair']) &&
$_POST['formWheelchair'] == 'Yes')
{
$wheelchair = true;
}
else
{
$wheelchair = false;
}
var_dump( $wheelchair );
// shorthand version:
$wheelchair = isset($_POST['formWheelchair'])?true:false;
Straight from: http://www.html-form-guide.com/php-form/php-form-checkbox.html
Note: At a later point you may want to use sessions to store the data for server-side validation if the user has not entered in all the fields.
In form html:
<input type="checkbox" name="terms">
In php script that the form posts to:
if ( $_POST['terms'] == 'on' ) {
echo 'User accepted terms';
}