I want to show a loading gif after submit button click.
what changes I need to do thanks.
the problem is when student enter seat number they click submit but in response to the result server take 4 to 5 sec in that time interval student presses button multiple time and server receive the unwanted request
<script type="text/javascript">
function check()
{
var candidateid = document.getElementById("candidateid").value;
if(candidateid=='')
{
$('.candidateid').toggle("show");
setTimeout(function()
{
$(".candidateid").toggle("hide");
}, 3000);
return false;
}
return true;
}
</script>
<html>
<body>
<!-- Contact Us -->
<section id="contact" class="contact section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-title">
<h2><span>Manthan</span> Talent Search Exam <?php echo date('Y')?></h2>
<p>विद्यार्थ्यांना देण्यात आलेल्या हॉलतिकीट वरील Student ID वरील रकान्यात भरून Submit वर क्लिक करा</p>
</div>
</div>
</div>
<div class="contact-head">
<div class="row">
<div class="col-lg-4 col-md-4 col-12">
</div>
<div class="col-lg-4 col-md-4 col-12">
<div class="form-head">
<!-- Form -->
<form class="form" action="<?php echo ('https://www.manthanpublication.com/view_result/')?>" method="POST" autocomplete="off" onsubmit="return check();">
<div class="form-group">
<input id="candidateid" name="candidateid" type="number" placeholder="Enter Candidate Id">
</div>
<p class="candidateid" style="display:none; color:red;"><i class="fa fa-times"></i> Enter Candidate Id</p>
<div class="form-group">
<div class="button">
<button name="submit" type="submit" class="btn primary">Submit</button>
</div>
</div>
</form>
<!--/ End Form -->
</div>
</div>
</div>
</div>
</div>
</section>
<!--/ End Contact Us -->
</body>
</html>
Related
I'm trying to create a simple webpage using Flask, I'm trying to capture the text written in a textfield in a javascript variable and then display it on console, when the user presses a button.
Here is the code
HTML
<script type="text/javascript" language="javascript" src="{{url_for('static',filename='js/main.js')}}"></script>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" id="txtWord" name="search" placeholder="Search..." >
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" name="search" placeholder="# Result..." id="inputNumResults">
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 text-center">
<br>
<button class="btn btn-success" type="button" id="buttonSearch" onclick="getText()">Search for words</button>
</div>
<div class="col-md-4"></div>
</div>
Javascript
function getText() {
var txt = document.getElementById('txtWord').innerHTML;
console.log(txt);
}
Here is working solution
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" id="txtWord" name="search" placeholder="Search..." >
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" name="search" placeholder="# Result..." id="inputNumResults">
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 text-center">
<br>
<button class="btn btn-success" type="button" id="buttonSearch" onclick="gt()">Search for words</button>
</div>
<div class="col-md-4"></div>
</div>
<script>
function gt() {
var txt = document.getElementById("txtWord").value;
alert(txt);
}
</script>
https://jsfiddle.net/ovtkmnmn/3/
I believe in Your case the problem is about order of loading this js file.
Always check what console displays, when I used "On load" load type it clearly returned an error that the function is not defined
You should simply clear your browser's cache. A full browser's cache can cause such a problem.
(function () {
function getText() {
var txt = document.getElementById('txtWord').value;
console.log(txt);
}
document.getElementById('buttonSearch').addEventListener('click', getText, true);
})();
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" id="txtWord" name="search" placeholder="Search..." >
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<input type="text" name="search" placeholder="# Result..." id="inputNumResults">
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 text-center">
<button class="btn btn-success" type="button" id="buttonSearch">Search for words</button>
</div>
<div class="col-md-4"></div>
</div>
</div>
I was having the same problem using jQuery until I figure out that I declared the function inside the $(document).ready() method :
$(document).ready(function () {
function name(){} // not working
}
On my code I have a area where I can preview any code as I am typing. The problem I am having is when I select some text and then click on button either bold, italic, pre. The preview area does not display same code straight away.
Question How can I make sure that the preview area when I select some text and then click on a button then it will display correct code below straight away. At the moment just displays plain text.
Live Example
Codepen Code View
Codepen Full View
Script
<script type="text/javascript">
$('#code_view').on('click', function(e) {
var code = $('#editable').clone();
$('#preview').html(code);
});
$('#editable').keyup(function(){
$('#code_view').trigger('click');
});
$('#editable').each(function(){
this.contentEditable = true;
});
</script>
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
<div class="form-group">
<input type="text" class="form-control" name="title" placeholder="Title" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
<div class="panel panel-wmd">
<div class="panel-heading">
<div class="clearfix">
<div class="pull-left">
<button id="bold" class="btn btn-default">B</button>
<button id="italic" class="btn btn-default"><i>I</i></button>
<button id="pre" class="btn btn-default">{}</button>
<button id="code_view" class="btn btn-default">Code View</button>
</div>
<div class="pull-right">
</div>
</div>
</div>
<div class="panel-body">
<div id="editable"></div>
</div><!-- .panel-body -->
</div><!-- .panel -->
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12">
<div id="preview"></div>
</div>
</div>
</div><!-- .container -->
Seeing at the code you have done everything right. For achieving the result instantly on click of the button you need to call the code_view click function on the functionality buttons.
Updated code:
Code Pen
Hope this helps you.
-Help :)
I am working on a new concept to allow Users to made update their account profile without the need to reload the screen to allow for updates.
Currently, I have two sections that will display the information they already submitted. By default, all field are disabled. Each section contain an "Edit" button to allow for modifications.
The problem that I am facing is that my "Edit" buttons are enabling editing on all sections, not their own section.
Toggle Disabled fields for editing in Sections
Here's the HTML code:
<div class="container">
<p>User should use the "Edit" button to correct any information separated in the form sections, individually.
User should be allowed to submit individual sections with updated information.</p>
<br />
<form name="ReviewInformation" method="post" class="clearfix">
<section id="NameConfirmation" style="background-color: #F1F3F2; border-radius: 8px; clear: both;" class="border-gray">
<!-- FIRST AND NAME SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-users"></i> First & Last Name Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserEmail" name="UserEmail" class="form-control" placeholder="First Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="Last Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- /FIRST AND LAST NAME SECTION/ -->
</section>
<div class="col-lg-12 spacer"></div>
<hr class="horizontal-line" />
<div class="spacer"></div>
<section id="EmailPhoneConfirmation" style="background-color: #E5F2F5; border-radius: 8px; clear: both;" class="border-gray">
<!-- EMAIL AND PHONE SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-envelope"></i> Email & Phone# Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="emailaccount#isp.com" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="801-999-9999" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- EMAIL AND PHONE SECTION -->
</section>
<div class="clearfix"></div>
<hr />
<div class="clearfix"></div>
<div class="align-text-center">
<button type="sumbit" id="myForm" class="btn btn-success">Submit Form</button>
</div>
</form>
</div>
Here's the JS:
<script>
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
$(function() {
//$('input:editlink').click(function() {
$('input:button').click(function() {
$('input:text').toggleDisabled();
});
});
</script>
Here's the DEMO: https://jsfiddle.net/UXEngineer/7tft16pt/35/
So, I am trying to get individual editing enable only the section they are associated with.
Can anyone help with this issue? I would appreciate any help, thanks!
You can use:
$(function() {
$('input:button').click(function() {
$(this).closest('.col-lg-12').next().find('input:text').toggleDisabled();
});
});
Demo: https://jsfiddle.net/7tft16pt/38/
Use closest() -> https://api.jquery.com/closest/ , and next() -> https://api.jquery.com/next/
I'm using jQuery dialog to gather the informations from users then append to my desired div. This function works very well, but when comes to edit/update my contents, I have no ideas how to do.
Front-Ends HTML
<li class="description_panel">
<a id="editPanel" href="#"></a>
<a id="closeBtn" href="#" class="closeButton"></a>
<div class="panel_title">
<h2>**Subscribe Here!**</h2>
</div>
<div class="panel_img">
<img width="320px" src="link_to_img_url"/>
</div>
<div class="panel_description">
<p>My paragraph 1</p>
<p>My paragraph 2</p>
</div>
</li>
Edit Panel
<div id="edit-dialog-form" title="Edit Panel">
<form id="formUpdatePanel">
<div class="form-group">
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel title::</h5>
<input style="margin-bottom:20px;" id="updatePanelTitle" class="form-control input-lg" name="title" placeholder="Panel Title" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>URL to image: </h5>
<input style="margin-bottom:20px;" id="updatePanelImageURL" class="form-control input-lg" name="imageURL" placeholder="Link to Image URL" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel description:</h5>
<textarea id="updatePanelDescription" rows="5" cols="50" style="width:312px"></textarea>
</div>
</div>
</div>
</div>
</form>
</div>
JQuery
$('#editPanel').click(function(){
editDialog.dialog("open");
});
var editDialog = {...};
function updateDialog {
}
How to retrieve all the inputs values and textarea value and display in the dialog input box and update/overwrite the contents again.
I`m use front-end framework Foundation. How i can in this menu enable Log in button only if Login and Password input filled text.
<form data-abide="ajax">
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Login" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
Log in
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Register
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Forgot password?
</div>
</div>
</form>
You could add a function to watch the onkeypress listener for the input box. Here is a working fiddle of how to do it on the username and you could do something similar for the password input as well.
http://jsfiddle.net/fFLq4/
Add a couple element id's to your elements:
<form data-abide="ajax">
<div class="row">
<div class="large-12 columns">
<input type="text" id="loginTxtBox" placeholder="Login" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
Log in
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Register
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Forgot password?
</div>
</div>
</form>
And add the javascript function to listen for the keypress:
var textBox = document.getElementById("loginTxtBox");
textBox.onkeypress=function(textBox){
if(this.value.length >= 5)
{
document.getElementById("loginButton").className = "button tiny";
}
else
{
document.getElementById("loginButton").className = "button tiny disabled";
}
};
This will only activate your login button once you have at least 5 characters in it. Apply this to your password input as well.
If I understand this correctly, you would like to show the login form only if the user clicks on the Login Link.
To achieve this, I would suggest moving the links outside the and use any of these (toggle/show/slide) in jQuery to show it on click.
Here is the modified HTML:
<form id="loginForm" data-abide="ajax">
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Login" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<input type="text" placeholder="Password" />
</div>
</div>
</form>
<div class="row">
<div class="large-12 columns text-center">
<a id="login" href="#" class="button tiny disabled">Log in</a>
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Register
</div>
</div>
<div class="row">
<div class="large-12 columns text-center">
<br />Forgot password?
</div>
</div>
And here is a working fiddle of how to show/hide the login form:
http://jsfiddle.net/9C4s7/
The commented line in the js toggles the slide (clicking the link will show the form, clicking it again will hide it). The active line will only make it slide down once clicked. So, you go ahead and choose whichever works best for you!