Using CSS, when a link is clicked it brings up a hidden DIV that contains a form. The user will then enter information and then submit the form. I'd like the hidden DIV to remain visible, and a 'success message' to be displayed after submission. Then the user will have the option of closing the DIV. I can't get it to work without reloading the page, which causes the DIV to become hidden again. Any ideas?
<body>
Click Me
<!--POPUP-->
<div id="hideshow" style="visibility:hidden;">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<a href="javascript:hideDiv()">
<img src="images/icon_close.png" class="cntrl" title="Close" />
</a>
<h3>Remove Camper</h3>
<form method="post" onsubmit="email.php">
<p><input name="Name" type="text" /></p>
<p><input name="Submit" type="submit" value="submit" /></p>
</form>
<div id="status" style="display:none;">success</div>
</div>
</div>
</div>
<!--END POPUP-->
<script language=javascript type='text/javascript'>
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.hideshow.style.visibility = 'hidden';
}
}
}
function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'visible';
}
else { // IE 4
document.all.hideshow.style.visibility = 'visible';
}
}
}
</script>
</body>
Forms by default submit content by changing to the specified page in its 'action' attribute. You will need to build additional scripts to prevent it from doing that and submit the data using either AJAX or jQuery then process the result.
Or you could simply use whatever language you're programming in to set the default visibility for the division. If the form data exists, display it by default, otherwise hide it by default.
How about using an AJAX call to post the form instead of posting back the whole page?
Instead of using a "submit" type for your button, you can use a "button" type and use a script called by onclick which will use ajax to submit the form and do whatever is necessary.
This defeats slightly the meaning of a form, but works well. You might also want to think about using a javascript library like prototype or similar (jquery, etc) that gives you the functionality to create a get or post array of your form in order to make it easier.
Related
I am using Materialize css to design my post. Suppose I have a form in modal and I and post it to server.
In that form I am checking if all fields are having value.
<form>
<div class="input-field">
<input type="text" id="title" class="validate" required="" aria-required="true">
<label for="title">Title</label>
</div>
The title field is required. But when I click on a submit button in modal it is closing even if title field has empty value. Is there any way to keep the modal open for validation error in Materialize css v1.
Think about this is in separate steps. The form submission only takes place at the end of the chain, when our criteria have been met.
User Submits form
We check the form
We feedback to user
Depending on the results of 2, we may either go back to step 1, or on to step 3.
Modal Structure:
<div id="modal1" class="modal">
<div class="modal-content">
<div class="input-field">
<input type="text" id="title" class="validate" required="" aria-required="true">
<label for="title">Title</label>
<span class="helper-text" data-error="Please enter your name" data-success="Thankyou!"></span>
</div>
</div>
<div class="modal-footer">
<a id="submit-button" href="#!" class="btn">Submit</a>
close
</div>
</div>
We add optional helper-text span for user feedback, as per the documentation.
The Javascript:
document.addEventListener('DOMContentLoaded', function() {
// init modal
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
// get button
var button = document.querySelector('#submit-button');
// Run our own function when clicked
button.addEventListener("click", checkForm);
// Function checks for input
function checkForm() {
var input = document.querySelector('#title');
if(input.value) {
// submit form
// add valid class to show helper
input.classList.add('valid');
// close modal
instances[0].close();
// clear form
input.value = '';
// remove valid class
input.classList.remove('valid');
} else {
// prompt user for input
input.classList.add('invalid');
}
}
});
We grab the value of the text input, and based on that, add a valid or invalid class - this is the built in materialize stuff that hides or shows the relevant message that we set in data-error and data-success.
The only thing you need to add to this is the actual form submission - so something like form.submit().
Codepen.
I have a desktop website written in php.
I have a form that has a submit button in the form of an image displaying the word "next". When my users complete the form and click on it i want it to display the loading gif. I have placed the necessary coding (as i understand it ) to do this but it does not replace the next image with the loading gif. Can anyone pick up what i'm doing wrong.
relevant code section below.
<div class="bb"><input type="image" src="./img/next.png" alt=" Create
My Account " onclick="ButtonClicked()"/></div>
<div class="lb"><input type="image" src="./img/loading6.gif" alt="
loading button "/></div>
<BR>
<BR>
<BR>
</form>
</div>
<script type="text/javascript">
function ButtonClicked()
{
document.getElementById("bb").style.display = "none"; // to undisplay
document.getElementById("lb").style.display = ""; // to display
return true;
}
var FirstLoading = true;
function RestoreSubmitButton()
{
if( FirstLoading )
{
FirstLoading = false;
return;
}
document.getElementById("bb").style.display = ""; // to display
document.getElementById("lb").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
//document.onfocus = RestoreSubmitButton;
</script>
You use class for getElementById replace class by 'id' that will work better.
Each id must be single, you cannot have many time the same id.
And use img tag rather input for picture.
And to conclude display = "" and display ="none" it's the same use display = 'block' or display = 'inline-block';
Because there are no "IDs" on your HTML. You have set class names as 'bb' and 'lb'. Replace those classes with id and it will work. So change the HTML as below.
<div id="bb"><input type="image" src="./img/next.png" alt=" Create
My Account " onclick="ButtonClicked()"/></div>
<div id="lb"><input type="image" src="./img/loading6.gif" alt="
loading button "/></div>
<BR>
<BR>
<BR>
</form>
</div>
I am using WordPress for my website.
I want to add radio buttons to my WordPress page when a radio button is selected I want to display a table below. Can anybody help me
Hello maybe more details help ppl to tell you better answer. but with
this much of information i'v got something for you : this is just
sample. you just need to edit for your specific purpose.
** put html code in wordpress editor ( put in editor section, not visual, visual editor maybe auto convert some tags)
** put js codes into your js script tag some where!! if you don't have any idea just use this plugin
** if jQuery not worked add this lines to function.php of your theme or child-theme to add jQuery library to your page(99% wordpress load it by default) :
// include custom jQuery
function shapeSpace_include_custom_jquery() {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');
HTML CODE :
<form>
<div>
<input type="radio" name="fruit" value="orange" id="orange">
<label for="orange">orange</label>
</div>
<div>
<input type="radio" name="fruit" value="apple" id="apple">
<label for="apple">apple</label>
</div>
<div>
<input type="radio" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>
</div>
<div id="show-table"></div>
</form>
SCRIPT CODE:
<script>
jQuery(document).ready(function ($) {
$("input").on("click", function () {
var checkedNode = $("input:checked").val();
var orangTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>orang</td></tr></table>';
var appleTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>apple</td></tr></table>';
var bananaTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>banana</td></tr></table>';
switch (checkedNode) {
case 'orange':
$("#show-table").html(orangTable);
break;
case 'apple':
$("#show-table").html(appleTable);
break;
case 'banana':
$("#show-table").html(bananaTable);
break;
default:
}
}
}
</script>
specific table assigned to each button will display inside div
with id="show-table" when that button selected. you can outspread this
method for what purpose you have. just know this is not efficient
method or best way. it's just a way ..
I have a client that wants the function of being able to enter a key word into a search bar and have it start to highlight the results on the page as you are typing (or after you hit search).
This is just like using the ⌘+F function on a Mac (or Ctrl+F on PC) and the browser itself pops up a search box.
He doesn't want to have to hit ⌘+F though, or have his customers to have to know that command. He wants to just have a search bar already on that page that he can type into and it start highlighting words.
ANY idea how to do this in WordPress? I've searched the internet and cannot find a tutorial on how to do it.
If not a search box, maybe a button they can click that prompts to pull up command F on a mac or Ctrl+F on a pc?
I am at a loss here and cannot figure this out. Any tips or experience with this, I would be very grateful.
So I found this on another thread and it seems to work but it only finds the first occurrence. I need it to highlight all the occurrences. Any idea how to get it to do that?
<p> hello world, hello world, hello world, hello world</p>
<!--BEGIN SEARCH BOX -->
<div class="search_box">
<form action="" id="form2">
<div>
<input type="text" id="search">
<input type="button" id="submit_form" onclick="checkInput()" value="Submit">
</div>
</form>
</div>
<!--END SEARCH BOX -->
<script>
function checkInput() {
var query = document.getElementById('search').value;
window.find(query);
return true;
}
</script>
https://codepen.io/b-jody-spedicato/pen/ExNzqQP
<html>
<head>
<script language="JavaScript">
<!--
var TRange=null;
function findString (str) {
if (parseInt(navigator.appVersion)<4) return;
var strFound;
if (window.find) {
// CODE FOR BROWSERS THAT SUPPORT window.find
strFound=self.find(str);
if (strFound && self.getSelection && !self.getSelection().anchorNode) {
strFound=self.find(str)
}
if (!strFound) {
strFound=self.find(str,0,1)
while (self.find(str,0,1)) continue
}
}
else if (navigator.appName.indexOf("Microsoft")!=-1) {
// EXPLORER-SPECIFIC CODE
if (TRange!=null) {
TRange.collapse(false)
strFound=TRange.findText(str)
if (strFound) TRange.select()
}
if (TRange==null || strFound==0) {
TRange=self.document.body.createTextRange()
strFound=TRange.findText(str)
if (strFound) TRange.select()
}
}
else if (navigator.appName=="Opera") {
alert ("Opera browsers not supported, sorry...")
return;
}
if (!strFound) alert ("String '"+str+"' not found!")
return;
}
//-->
</script>
</head>
<body>
<form name="f1" action=""
onSubmit="if(this.t1.value!=null && this.t1.value!='') findString(this.t1.value);return false">
<input type="text" name=t1 value="" size=20>
<input type="submit" name=b1 value="find">
<p>This is some sample text, do a search above to see how the search bar functions.
You can now add your own CSS styling.
</p>
</form>
</body>
</html>
Here's my case: I'm developing a little widget, and I was looking for a way to hide/show different DIVs on selecting a set of radio buttons. I found the proper code and adjusted it to my needs. The only problem is that the hide/show feature stops working after clicking on save while configuring the widget :S
Here's the JS:
jQuery(document).ready(function($) {
$(document).ready(function() {
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="link_to_image"){
$(".radio-option").hide();
$(".linked-image").show();
}
if($(this).attr("value")=="link_to_page"){
$(".radio-option").hide();
$(".linked-page").show();
}
});
});
});
And the HTML:
<p>
<label>Link:</label><br>
<label>
<input type="radio" name="link_to" value="link_to_image">
Link to image
</label><br>
<label>
<input type="radio" name="link_to" value="link_to_page">
Link to page
</label>
</p>
<div class="linked-image radio-option">
<label for="linked_image">Linked image:</label>
<p>
Content for linked_image DIV
</p>
</div>
<div class="linked-page radio-option">
<label for="linked_page">Linked page:</label>
<p>
Content for linked_page DIV
</p>
</div>
And the [JSFiddle] (http://jsfiddle.net/ccwsy5z4/)
Could you give me a hand with this, guys?
So finally I found out that the problem was that the JS stopped working after the AJAX started by clicking on the Save button.
And the solution for that was to recall the JS function after AJAX finished it job. To do that first I had to give a name to the JS function, called it after that, and then call it again after AJAX stopped. Like this:
jQuery(document).ready(function($) {
function radioButtonShow() {
if($(this).attr("value")=="link_to_image") {
$(".radio-option").hide();
$(".linked-image").show();
}
if($(this).attr("value")=="link_to_page") {
$(".radio-option").hide();
$(".linked-page").show();
}
};
$('input[type="radio"]').click(radioButtonShow);
$(document).ajaxStop(function() {
$('input[type="radio"]').click(radioButtonShow);
});
});
Hope this may be useful to somebody :)