i have a login hyperlink. so when i click on it a login form with id=nd_login_form will show.
<li class="active"><a href="#nd_login_form" ><?php _e('Login', 'ninety'); ?></a></li>
this is the login link. the form is:
<form action="<?php echo home_url(); ?>/?wcz" method="post" class="nd_form" id="nd_login_form" style="z-index:100;background:gainsboro;position:absolute;"><div class="nd_form_inner">
<p><label for="nd_username"><?php _e('Username','ninety'); ?>:</label> <input type="text" class="text" name="log" id="nd_username" placeholder="<?php _e('Username', 'ninety'); ?>" /></p>
<p><label for="nd_password"><?php _e('Password','ninety'); ?>:</label> <input type="password" class="text" name="pwd" id="nd_password" placeholder="<?php _e('Password','ninety'); ?>" /></p>
<input type="submit" class="button" value="<?php _e('Login →','ninety'); ?>" />
<input name="nd_login" type="hidden" value="true" />
<input name="redirect_to" type="hidden" id="redirect_to" value="<?php echo nd_login_current_url(); ?>" />
</p>
</div></form>
the jquery script i used is:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
(function ($) {
$(document).ready(function() {
$("#nd_login_form").slideUp();
$(".active").click(function () {
$("#nd_login_form").slideToggle("fast");
});
});
})(jQuery);
</script>
So the problem is when the document is ready first the form will not appear correctly and it will show up on clicking the login link. till now everything is fine. but on the next click on the login hyperlink the form is not hiding or sliding up. can anyone help me to find the mistake in here.??
replace the script with this
$(document).ready(function() {
$("#nd_login_form").slideDown();
$(".active").on('click',function () {
$("#nd_login_form").slideToggle("fast");
});
});
you have two docuent.ready functions in your script. and at first you want to show the form use the slideDown() class.Working Fiddle
Just add display:none to the form style
<form action="<?php echo home_url(); ?>/?wcz" method="post"
class="nd_form"
id="nd_login_form"
style="z-index:100;background:gainsboro;position:absolute;display:none">
and jQuery:
$(document).ready(function() {
$(".active").on('click',function () {
$("#nd_login_form").slideToggle("fast");
});
});
WORKING DEMO
Related
I am facing an issue while validating the input fields inside the form using PHP and JavaScript. I am providing my code below.
<form autocomplete="off" action="<?php echo base_url() . $tourModule; ?>/search" method="GET" role="search" onSubmit="return checkform();">
<input type="text" data-module="<?php echo $module; ?>" class="hotelsearch locationlist<?php echo $tourModule; ?>" placeholder="Tourist Destination" value="<?php echo $_GET['txtSearch']; ?>">
<input type="hidden" id="txtsearch" name="txtSearch" value="<?php echo $_GET['txtSearch']; ?>">
<div class="col-md-12 form-group go-right colspecing col-xs-12 submit text-center">
<button type="submit" class="btn btn-lg pfb0 loader">
<?php echo trans( '012'); ?> </button>
</div>
</form>
<script type="text/javascript">
function checkform(){
console.log('validate form');
var textname=document.getElementById('txtsearch');
if (textname.value=='' || textname.value==null) {
alret('Please select Tourist Destination.');
return false;
}else{
return true;
}
}
</script>
Here I need before submit the form the input field will validate but in my case when I am clicking on submit button checkform function is not executing at all. I need to check that validation.
There is a typo in your code. Change alret to alert
I have a problem with my code. I am trying to click on the button to check all of the checkboxes but nothing is working.
Here's my code.
<body>
<html>
<input type="checkbox" id="chk_boxes1" name="chk_boxes1" class="delete_customer" value="<?php echo $rowTrackers['id']; ?>" />
<br>
<input type="checkbox" id="chk_boxes1" name="chk_boxes1" class="delete_customer" value="<?php echo $rowTrackers['id']; ?>" />
<br>
<input type="checkbox" id="chk_boxes1" name="chk_boxes1" class="delete_customer" value="<?php echo $rowTrackers['id']; ?>" />
<br>
<button type="button" name="btn_checkall" id="btn_checkall">Check all</button>
</html>
</body>
<script>
$(document).ready(function(){
$('#btn_checkall').click(function(){
if($(this).prop('checked')){
$('.chk_boxes1').prop('checked', true);
}else{
$('.chk_boxes1').prop('checked', false);
}
});
});
</script>
I don't know where the trouble is coming from, but I guess that something have to do with the id, name or whatever it is that make it stop working.
Can you please show me the correct code that I could use to check and uncheck all of the checkboxes when I click on a button using with my code?
One thing to correct is that you have your html tag after your body tag. The html tag should for sure be the parent.
Other than this it looks like you have assigned "chk_boxes1" to id's instead of classes. If you change them to classes then things should work:
<input type="checkbox" name="chk_boxes1" class="delete_customer chk_boxes1" value="<?php echo $rowTrackers['id']; ?>" />
<br>
<input type="checkbox" name="chk_boxes1" class="delete_customer chk_boxes1" value="<?php echo $rowTrackers['id']; ?>" />
<br>
<input type="checkbox" name="chk_boxes1" class="delete_customer chk_boxes1" value="<?php echo $rowTrackers['id']; ?>" />
<br>
Also you are checking at button to determine checked status. This also will make the code not work. You can add and remove a class to the button if you want to change status or you can do something like this to check the group of checkboxes:
$(document).ready(function(){
$('#btn_checkall').click(function(){
if ($('.chk_boxes1:checked').length == $('.chk_boxes1').length) {
$('.chk_boxes1').prop('checked', false);
}
else {
$('.chk_boxes1').prop('checked', true);
}
});
You have a lot going wrong there.
Firstly, your HTML tags are in the wrong order. Your document should start with <html> and end with </html>:
So, change your document to be like this:
<html>
<body>
// your content
</body>
</html>
And you also want to include your script at the bottom of your <body> or, as you're listening for DOM ready event, include the script in the <head>. So, adjust your <script> position to here:
<html>
<body>
// your content
<script>
// script here
</script>
</body>
</html>
As for the main question, I suggest these changes:
HTML:
Remove the duplicate IDs. ID are meant to be totally unique for each element.
<input type="checkbox" name="chk_boxes1" class="delete_customer" value="<?php echo $rowTrackers['id']; ?>" />
<br>
<input type="checkbox" name="chk_boxes1" class="delete_customer" value="<?php echo $rowTrackers['id']; ?>" />
<br>
<input type="checkbox" name="chk_boxes1" class="delete_customer" value="<?php echo $rowTrackers['id']; ?>" />
<br>
jQuery:
Select the checkboxes by name instead of ID:
$(document).ready(function() {
$('#btn_checkall').click(function(){
var $chk_boxes = $('input[name="chk_boxes1"]');
if($chk_boxes.prop('checked')) {
$chk_boxes.prop('checked', true);
} else {
$chk_boxes.prop('checked', false);
}
});
});
As people have said, ids should be unique:
$(document).ready(function(){
//Use JQuery .on to attach event handler
$('#btn_checkall').on('click', function(){
//Get all checkboxes by class
const $checkboxes = $('.delete_customer');
//Use .each to iterate the checkboxes
$checkboxes.each(function(){
$(this).prop('checked', true);
});
});
});
i need help with javascript problem, i want to insert a search form to my website navigation, but after i paste searchform html code , all my javascript not working, example - Audio Play container "javascript" doesnt working. maybe i cannot place html before /head tag?
Update :
after adding closing tag , my searchbox is working!
To answer your question, no, you can not place HTML elements in the <head> tag. These things must go between the opening <body> tag and before the closing </body> tag.
Additionally, you're not closing your form, the following example would be a 'complete' form in your case:
<form method="get" id="searchform" class="search-form" action="<?php echo home_url(); ?>" _lpchecked="1">
<fieldset>
<input type="text" name="s" id="s" value="<?php _e('Search the site','point'); ?>" onblur="if (this.value == '') {this.value = '<?php _e('Search the site','point'); ?>';}" onfocus="if (this.value == '<?php _e('Search the site','point'); ?>') {this.value = '';}" >
<button id="search-image" class="sbutton" type="submit" value="">
<i class="point-icon icon-search"></i>
</button>
<!-- <input id="search-image" class="sbutton" type="submit" style="border:0; vertical-align: top;" value="<?php //_e('Search','point'); ?>"> -->
</fieldset>
</form>
You'll notice I've added a </form> tag after your </fieldset>.
I have 3 separate forms each with their own submit buttons (removed all other lines of form code as not required):
<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicSub" id="postingTopicSub" enctype="multipart/form-data">
<input type="button" name="submittopic" id="submittopic" value="Submit" onclick="topicPostSubmit();"/>
<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicReply" id="postingTopicReply" enctype="multipart/form-data">
<input type="button" name="submitreply" id="submitreply" value="Submit" onclick="replyPostSubmit();"/>
<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicEdit" id="postingTopicEdit" enctype="multipart/form-data">
<input type="button" name="submitedit" id="submitedit" value="Submit" onclick="editPostSubmit();"/>
I am using Javascript to verify the form data is filled in before submitting however because using JavaScript the POST data from the button is not being sent.
JavaScript submit for each form:
document.getElementById("postingTopicSub").submit();
document.getElementById("postingTopicReply").submit();
document.getElementById("postingTopicEdit").submit();
On my data page I use isset to make the SQL queries run are for the correct form:
// User meets all conditions and posts a topic
if (isset($_POST['topicID'], $_POST['subject'], $_POST['post_text'], $_SESSION['username'], $_POST['submittopic']) && !isset($_POST['forumID'])) {
// User meets all conditions and posts a reply
if (isset($_POST['topicID'], $_POST['post_text'], $_SESSION['username'], $_POST['submitreply'], $_POST['forumID'], $_POST['subject'])) {
// User meets all conditions and edits a post
if (isset($_POST['topicID'], $_POST['post_text'], $_SESSION['username'], $_POST['submitedit'], $_POST['forumID'], $_POST['postID'], $_POST['subject'])) {
My questions:
Is there a way to keep my method of keeping the 3 SQL queries separate
to the specific forms
Is there a way to sent the POST of the submit even though it is being
submitted through JavaScript?
Is there another way that I just haven't seen.
Thanks in advance.
EDIT:
Full form (without bbcodes)
<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicSub" id="postingTopicSub" enctype="multipart/form-data">
<input type="hidden" name="topicID" id="topicID" value="<?php echo $topicID ?>"/>
<div class="post-subject">
Subject:
<input type="text" name="subject" id="subject" />
</div>
<div class="post-textarea">
<textarea name="post_text" id="post_text" cols="100" rows="30"></textarea>
</div>
<div class="post-button">
<input type="button" name="submittopic" id="submittopic" value="Submit" onclick="topicPostSubmit();"/>
</div>
</form>
Full JS for form validation:
function forumssubmit()
{
var subject = document.getElementById("subject").value;
var text = document.getElementById("post_text").value;
if(subject=="" || text=="")
{
alert('Please fill in the subject and text');
return false;
}
return true;
}
function topicPostSubmit()
{
if(forumssubmit())
{
document.getElementById("postingTopicSub").submit();
}
}
EDIT2::
New js:
function forumssubmit()
{
var subject = document.getElementById("subject").value;
var text = document.getElementById("post_text").value;
if(subject=="" || text=="")
{
alert('Please fill in the subject and text');
return false;
}
return true;
}
function topicPostSubmit()
{
if(forumssubmit())
{
//document.getElementById("postingTopicSub").submit();
return true;
}
}
New button:
<input type="button" name="submittopic" id="submittopic" value="Submit" onclick="return topicPostSubmit();"/>
If you're really just "using Javascript to verify the form data is filled" you can add a return to the onclick's of your submit buttons. You'll then be able to use those for submitting the form instead of Javascript.
<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicSub" id="postingTopicSub" enctype="multipart/form-data">
<input type="submit" name="submittopic" id="submittopic" value="Submit" onclick="return topicPostSubmit()"/>
<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicReply" id="postingTopicReply" enctype="multipart/form-data">
<input type="submit" name="submitreply" id="submitreply" value="Submit" onclick="return replyPostSubmit()"/>
<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicEdit" id="postingTopicEdit" enctype="multipart/form-data">
<input type="submit" name="submitedit" id="submitedit" value="Submit" onclick="return editPostSubmit()"/>
Then in the javascript if you have a bad state return false.
function editPostSubmit(){
if(data == 'bad')
return false;
return true;
}
I also want to make sure you're doing data validation on the backend. We don't want to allow SQL injection on your page.
Edit:
Updated your modified code.
<form action="<?php echo esc_url($_SERVER['PHP_SELF']); ?>" method="post" name="postingTopicSub" id="postingTopicSub" enctype="multipart/form-data">
<input type="hidden" name="topicID" id="topicID" value="<?php echo $topicID ?>"/>
<div class="post-subject">
Subject:
<input type="text" name="subject" id="subject" />
</div>
<div class="post-textarea">
<textarea name="post_text" id="post_text" cols="100" rows="30"></textarea>
</div>
<div class="post-button">
<input type="submit" name="submittopic" id="submittopic" value="Submit" onclick="return forumssubmit();"/>
</div>
</form>
How to set readonly all input except input that user try to fill data ?
When user loads page index.php and tries to fill data into EG: <input id="edValue2" ...>, I want to set readonly all input except <input id="edValue2" ...>
But my code not work, how can i do ?
index.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<html>
<body>
<form id="form-id" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<?PHP
for ($i=1;$i<=5;$i++)
{
?>
<input id="edValue<?PHP echo $i; ?>" type="text" onKeyUp="send_it_register_to_hidden_input<?PHP echo $i; ?>()" onKeyPress="send_it_register_to_hidden_input<?PHP echo $i; ?>()"><br>
<?PHP
}
?>
<br>
<br>
<br>
<input type="text" id="lblValue" value="">
<input type="text" id="lblValue_number" value="">
</form>
</body>
<?PHP
for ($i=1;$i<=5;$i++)
{
?>
<script>
function send_it_register_to_hidden_input<?PHP echo $i; ?>()
{
lblValue.value = $("#edValue<?PHP echo $i; ?>").val();
lblValue_number.value = <?PHP echo $i; ?>;
Check_register_it();
}
</script>
<?PHP
}
?>
<script>
function Check_register_it()
{
$('#form-id input').attr('disabled','disabled'); //disable all
$(this).removeAttr('disabled'); //enable the one that triggers the event
}
</script>
</html>
I strongly suggest don't create functions like that. It just makes your codes complicated. Use classes in this case so that you don't need to setup functions for each id that you want to manipulate:
<body>
<form id="form-id" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);">
<?PHP for ($i=1;$i<=5;$i++) { ?>
<input class="input_boxes" type="text" data-i="<?php echo $i; ?>"><br/>
<?PHP } ?>
<br>
<br>
<br>
<input type="text" id="lblValue" value="">
<input type="text" id="lblValue_number" value="">
</form>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$('.input_boxes').on('keyup', function(e){
var value = $(this).val();
var i_val = $(this).attr('data-i');
$('#lblValue').val(i_val);
$('#lblValue_number').val(value);
$('input').prop('readonly', true);
$(this).prop('readonly', false);
});
</script>
Assuming all inputs are children of the same element (i.e. siblings), you can use jQuery to do this easily:
$('input').on('focus', function(){
$('input').removeAttr('readonly');
$(this).siblings().attr('readonly', 'readonly');
});
JSBin:
http://jsbin.com/qukohosafuje/1/edit
Try this :-
$("input").on('keyup', function () {
$('input').not(this).attr('readonly', 'readonly');
});
DEMO
You have to put all JQuery statement within:
$(function(){
//put your JQuery code here
});
Try and let me know if now works.
You can simply use the html attribute of readonly for the inputs you don't want users to fill.
e.g
<input type="text" id="lblValue" value="" readonly>
if you would required the readonly inputs to be accessible after the necessary input has been filled, you can use jquery to trigger the event.
e.g
$('input').keyUp(function(){
if($('#edValue2').val()!=""){
$('input:not("#edValue2")').removeAttr('readonly');
})