I have this HTML code which contains two HTML forms and two buttons:
One for submit and one for cancel (basically get back to the previous page). What I would like to do is after I click the SUBMIT button and submit my forms do the same as the cancel button (get back to the previous page).
The problem is that I can't specify what page I want it to go back since this page will be used in many pages so it will be dynamic.
<div data-role="page" id="customer" data="Page" data-expired="true" data-theme="c">
<div data-role="content" data="customers" data-key="id" data-params="item:itemid">
<div align="left">
<h3 style="margin:0px">Customer Profile</h3>
</div>
<br/>
<div class="popup-hrule">
<div data-role="collapsible" data-collapsed="false" data-collapsed-icon="false" data-theme="a">
<h3>Customer</h3>
<form id="submit-edit-customer" method="post" data-formaction="process">
<label for="customer_name">Customer</label>
<input type="text" name="customer_name" id="customer_name" data-item=":customer_name">
</div>
<div class="ui-block-b">
<label for="name">Primary Contact</label>
<input type="text" name="name" id="name" value="no valid name"
data-item=":name">
</div>
</form>
</div>
<div data-role="collapsible" data-collapsed-icon="false" data-theme="a">
<h3>Billing</h3>
<form id="submit-edit-customer" method="post" data-formaction="process">
<label for="customer_name">Customer</label>
<input type="text" name="customer_name" id="customer_name" data-item=":customer_name">
</div>
<div class="ui-block-b">
<label for="name">Primary Contact</label>
<input type="text" name="name" id="name"
data-item=":name">
</div>
</form>
</div>
</div>
<a id="createeditcancel" data-role="button" data-inline="true" href="#" data-rel="back">Cancel</a>
<a id="submit-edit-customer-btn" data-role="button" data-inline="true" data-theme="a">Save</a>
</div>
</div>
My question is, is there any easy way to do this without writing a lot of javascript code in the onclick event?
Thanks.
Very easy all you have to do is change the href to the url of previous page:
<a id="createeditcancel" data-role="button" data-inline="true" href="YOUR_URL_HERE" data-rel="back">Cancel</a>
Edit: if your submit is using php to save the info just add
header("Location: last_page.html");
Since its dynamic you can just get the back URL from the same place as the rest of your info and do:
header("Location:" + URL);
I didn't know I could do this but I tried it and it worked!
I added: data-rel="back" to the submit button.
Like this:
<a id="submit-edit-customer-btn" data-role="button" data-inline="true" data-rel="back" data-theme="a">Save</a>
For redirect to other page in JavaScript you can use
window.location = "http://www.yoururl.com";
add to button onclick="location.href = 'www.yoursite.com';"
where u handle your form?php file?
other option in php
if (isset($_POST['submitform']))
{
?>
<script type="text/javascript">
window.location = "http://www.google.com/";
</script>
<?php
}
or in form
<form action="demo_form.asp" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function myFunction() {
location.href = 'www.yoursite.com';
}
</script>
With document.referrer:
var cancel = function() {
window.location.href = document.referrer;
};
<input type="button" value="Cancel" onclick="cancel()" />
With history:
var cancel1 = function() {
history.back();
};
var cancel2 = function() {
history.go(-1);
};
<input type="button" value="Cancel" onclick="cancel1()" />
<input type="button" value="Cancel" onclick="cancel2()" />
on the action page or your controller try adding this:
$(document).ready(function(){
document.location = 'url' // the path to your homepage
});
Related
I have made a html form to take inputs from user. My sample code is given below:
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="what" value="faculty" />
<div class="form-item">
<div class="form-left">
<label><big>Name:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="facname" id="fac_name" size="20" required >
</div>
</div>
<div class="form-item">
<div class="form-left">
<label><big>Education:</big></label>
</div>
<div class="form-right">
<input class="txtbox" type="text" name="educn" id="fac_edu" size="20" required >
</div>
</div>
<div id="buttons">
<button class="greenbtn" type="submit" name="btn-upload" value="Add Now" id="add_fac" >Submit</button>
<input class="orangebtn" type="reset" value="Clear" id="clear_fac" />
</div>
</form>
I want to add a feature that, after the submit button being clicked it will be disappeared so that user can't double click on that. Is it possible? How will I do this?
Two easiest ways would either be with javascript and have
<form class="form-main" action="../php/additem.php" method="post" enctype="multipart/form-data" onsubmit="hideSubmit()">
<script>
function hideSubmit(){
document.getElementById("buttons").style.display = "none";
}
</script>
or jquery
<script>
$(function(){
$('.form-main').on('submit', function(){
$('#buttons').hide();
});
});
</script>
after the submit button being clicked it will be disappeared so that user can't double click on that.
You've literally described how to do it.
document.getElementById('test-button').addEventListener('click', function () {
this.remove()
})
<button id="test-button">Click me!</button>
I suggest reading about setting up events.
I am building a custom url based on form field inputs and javascript. Everything is working the way it is, but I would like the url that gets built to open in a new window. Is that possible?
It's a little booking widget, a calendar will pop out on click of the date boxes and that part works too. I really would just like it to open in a new window on submit.
<script type="text/javascript">
jQuery(function() {
var form = jQuery('form#form1');
form.submit(function(e) {
var checkin = form.find('input[name="from"]').val();
var nights = form.find('input[name="nights"]').val();
var guests = form.find('input[name="number"]').val();
window.location = "https://example.com" + checkin + ";" + nights + ";" + guests + ";?";
return false;
});
});
</script>
<div class="book-popup">
<a class="opener btn" href="#">Book Now</a>
<div class="slide">
<form id="form1" method="POST" target="_blank" class="timer-box" >
<div class="selections">
<div class="set">
<strong class="title">Arrival</strong>
<div class="frame">
<em class="month"><?php echo date("M") ?></em>
<span class="date-text"><?php echo date("j") ?></span>
<input type="hidden" name="from" class="from" value="<?php echo date("mdY") ?>">
</div>
</div>
<div class="set">
<strong class="title">Nights</strong>
<div class="frame">
<input type="number" name="nights" value="1" max="8" min="1">
</div>
</div>
<div class="set">
<strong class="title">Guests</strong>
<div class="frame">
<input type="number" name="number" value="2" max="8" min="1">
</div>
</div>
</div>
<div class="col"> <input type="submit" value="BOOK NOW" class="btn" >
</div>
</form>
</div>
</div>
window.location will update the url of the current page. Try window.open().
You should be able to just pass in the url.
From MDN
Try with window.open instead of window.location:
window.open('http://your-url.com','_blank');
Just use the following
window.open(‘url’)
So basically, i'm trying to make a button "Call me back" so when you click it, it disappears and shows other two hiddens fields.
http://investinlisbon.ml/
What im trying to change is that little form on top of that page where it has 2 fields and a call me back button.
try jquery show / hide functions like
$("#div_to_show").show();
$("#div_to_hide").hide();
This is how you should approach your problem:
HTML
<div id="div1"> </div>
<div id="div2" style="display:none"> </div>
<div id="div3" style="display:none"> </div>
JS
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "inline-block";
document.getElementById("div3").style.display = "inline-block";
Another one, one liner:
HTML
<div id="fields" style="display:none">
<input type="text" name="name" placeholder="Name"/>
<input type="text" name="tel" placeholder="Telephonoe"/>
</div>
<button type="button" id="contact-btn" onClick="toggleFields()">
Contact me
</button>
JS
function toggleFields(){
$('#fields, #contact-btn').toggle();
}
Example JSFiddle
in your View
<div style="display: none;" class="hideDiv">
<input type="hidden" name="_wpcf7" value="1101">
<input type="hidden" name="_wpcf7_version" value="4.4">
<input type="hidden" name="_wpcf7_locale" value="pt_PT">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1101-o1">
<input type="hidden" name="_wpnonce" value="7b5f59556f">
</div>
and jquery
$(document).on('click','.send-cmb',function(e){
e.preventDefault();
$('.hideDiv').css('display:block');
});
Try this
html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<input type="text" name="text-574" value="" size="40" class="txt" placeholder="Name">
<input type="text" name="text-574" value="" size="40" class="txt" placeholder="Telephone">
<button type="button" id="callback" >
Call Back
</button>
js code
jQuery( document ).ready(function() {
jQuery(".txt").hide();
jQuery("#callback").click(function(){
jQuery(".txt").show();
jQuery("#callback").hide();
});
});
You can view demo here
I have a popup login form. I want the form to submit, then close that popup window. How can I accomplish this? The window is currently set to close before the return for the function happens. Where does window.close() go in this case? Thank you for any help.
Form:
<form name="catseczoneform30738" onSubmit="return checkWholeForm30738(this)" method="post" action="https://redlakewalleye.worldsecuresystems.com/ZoneProcess.aspx?ZoneID=12695&Referrer={module_siteUrl,true,true}&OID={module_oid}&OTYPE={module_otype}">
<div class="form">
<div class="item">
<label for="SZUsername">Username</label>
<br />
<input class="cat_textbox_small" type="text" name="Username" id="SZUsername" maxlength="255" />
</div>
<div class="item">
<label for="SZPassword">Password</label>
<br />
<input class="cat_textbox_small" type="password" name="Password" id="SZPassword" maxlength="255" autocomplete="off" />
</div>
<div class="item">
<input type="checkbox" name="RememberMe" id="RememberMe" />
<label for="RememberMe">Remember Me</label>
</div>
<div class="item">
<input class="cat_button" type="submit" value="Log in" />
Lost password?</div>
</div>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
function checkWholeForm30738(theForm){var why = "";
if (theForm.Username) why += isEmpty(theForm.Username.value, "Username");
if (theForm.Password) why += isEmpty(theForm.Password.value, "Password");
if (why != ""){alert(why);
return false;
}
theForm.submit();
window.open('http://www.redlakewalleye.com/promotional/activation-form','_blank');
window.close();
return false;
}
//]]>
</script>
</form>
If possible the window.close() should be included as part of the server response to your submit event. If you include the window.close() as part of the submit on the form, it will cause your form to close before the submit has actually happened.
I have a series of divs that load each has a dynamic id name based on a database result.
Within each div are several hidden input text fields that all have the same name and id.
The user clicks a href which is dynamically generated from the database launching colorbox. For example ()
On the opening div is a button. When the user clicks this button it submits a form.
As it is now it sumbits only the values of the first instance of the fields (for example Yellow, digital-world, Digital Revolution).
It is suppsoed to submit the values of the url that is active. For example, if the user clicks (">) then it should submit Blue, abstract, Abstract Panel. Instead of Yellow, digital-world, Digital Revolution.
In addition, there are scroll buttons on the colorbox so for example the user can click a next button to load the next set of values. Ie. if he is on and clicks the next button he is suddenly on so if he clicks the button on here it should submit the correct values ie. Blue, abstract, Abstract Panel.
Does this make sense?
Let me show...
<div class="doneit">
<div style="float:left;"><img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" ></div>
div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Yellow">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="digital-world">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Digital Revolution">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Blue">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="abstract">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Abstract Panel">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Red">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="abstract">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Abstract Disks">
</div>
<div class="doneit">
<div style="float:left;"><img src="/videos/electric-effect/Purple/electric-purple-grid.jpg"></div>
<div class="doit"></div>
<div style="height:70px;"></div>
<input type="hidden" id="Product_Vid_1" name="Product_Vid_1" value="Purple">
<input type="hidden" id="Product_Dir_1" name="Product_Dir_1" value="electric-effect">
<input type="hidden" id="Product_Name_1" name="Product_Name_1" value="Electric Grid">
</div>
<div style="display:none">
<div id="container"><div id="video"></div>
<div id="doesit">
<script type="text/javascript">
function submitMyForm(){
$('#Product_color_16').val($('#Product_Vid_1').val());
$('#Product_Dir_16').val($('#Product_Dir_1').val());
$('#Product_Name_16').val($('#Product_Name_1').val());
$('#myform').submit();
}
</script>
<form name="myform" action="/thisurl.asp" method="post">
<input type="hidden" id="Product_color_16" name="Product_color_16" value="">
<input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="">
<input type="hidden" id="Product_Name_16" name="Product_Name_16" value="">
<button class="addtobutton addtocart" onclick="submitMyForm();"></button>
</form>
</div></div>
</div>
Thanks for any and all help!
You have multiple elements sharing the same ID - which is wrong and can cause you lots of problems.
One of the problems is exactly the one you're facing now.
As you don't have a unique ID for the elements, the code will consider just the first match (in your case, the "Yellow" ones)
To fix this? Let's leave as much as possible with jQuery, to make it simple. Also, let's fix a bit the HTML markup. Please refer to the comments.
HTML
<!-- Removed all the input ids, because they were duplicated and useless. If you really need them for something else, make them unique. -->
<div class="doneit">
<div style="float:left;">
<a href="#container" id="02_Digital_Revolution_Yellow" target="Yellow" title="digital-world" class="lightbox-image inline">
<img src="/videos/digital-world/Yellow/02_Digital_Revolution_Yellow.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Yellow" />
<input type="hidden" name="Product_Dir_1" value="digital-world" />
<input type="hidden" name="Product_Name_1" value="Digital Revolution" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="06_Abstract_Panel_Blue" target="Blue" title="abstract" class="lightbox-image inline">
<img src="/videos/abstract/Blue/06_Abstract_Panel_Blue.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Blue" />
<input type="hidden" name="Product_Dir_1" value="abstract" />
<input type="hidden" name="Product_Name_1" value="Abstract Panel" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="10_Abstract_Discs_Red" target="Red" title="abstract" class="lightbox-image inline">
<img src="/videos/abstract/Red/10_Abstract_Discs_Red.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Red" />
<input type="hidden" name="Product_Dir_1" value="abstract" />
<input type="hidden" name="Product_Name_1" value="Abstract Disks" />
</div>
<div class="doneit">
<div style="float:left;">
<a href="#container" id="electric-purple-grid" target="Purple" title="electric-effect" class="lightbox-image inline">
<img src="/videos/electric-effect/Purple/electric-purple-grid.jpg" />
</a>
</div>
<div class="doit">
</div>
<div style="height:70px;"></div>
<input type="hidden" name="Product_Vid_1" value="Purple" />
<input type="hidden" name="Product_Dir_1" value="electric-effect" />
<input type="hidden" name="Product_Name_1" value="Electric Grid" />
</div>
<div style="display:none">
<div id="container">
<div id="video"></div>
<div id="doesit">
<form name="myform" action="/thisurl.asp" method="post">
<input type="hidden" id="Product_color_16" name="Product_color_16" value="" />
<input type="hidden" id="Product_Dir_16" name="Product_Dir_16" value="" />
<input type="hidden" id="Product_Name_16" name="Product_Name_16" value="" />
<!-- You can just ommit the onclick here. It's gonna work automatically, because it's a submit type. -->
<button class="addtobutton addtocart" type="submit"></button>
</form>
</div>
</div>
</div>
jQuery (Javascript):
// Add this bit to your page header, straight into the HTML markup (wrapped
// into script tags) or save into a separate JS file. Up to you.
var setFormValues = function(div) {
// Getting the inputs values. The ones within the clicked div.
// We look for the inputs which name starts with Product_...
// Let's use .prop() instead of .val() because IE sometimes doesn's like it.
var div = $(div);
var productVid = $("input[name^='Product_Vid_']", div).prop("value");
var productDir = $("input[name^='Product_Dir_']", div).prop("value");
var productName = $("input[name^='Product_Name_']", div).prop("value");
// Setting the form inputs values.
$("#Product_color_16").prop("value", productVid);
$("#Product_Dir_16").prop("value", productDir);
$("#Product_Name_16").prop("value", productName);
}
$(function () {
// When the user clicks on one of the divs.
$(".doneit").on("click", function () {
setFormValues($(this));
return true;
});
// When the user clicks the cart button, on the video window.
$(".addtocart").on("click", function() {
// Here we need a bit of native Javascript.
var videoPlaying = document.getElementById("video_video");
if (typeof videoPlaying != "undefined") {
var videoSource = videoPlaying.currentSrc;
if (typeof videoSource != "undefined") {
var videoSourceFilename = videoSource.split("com/")[1].split(".")[0];
// Check which div has an image which src
// matches the video filename.
var image = $(document).find("img[src*='" + videoSourceFilename + "']");
if (typeof image != "undefined") {
var divContainer = $(image).parent().parent().parent();
if (typeof divContainer != "undefined")
setFormValues($(divContainer));
}
}
}
return true;
});
});