|
JavaScript - Changing Form Code To Use Dynamic Url As Form Action
So I have a little calendar widget on my site, for people to choose their dates for a reservation system. They then click a 'Book Now' button which creates a dynamic url (using their start date and the number of dates) to the booking engine. The problem is, the way it accomplishes this (window.location.href=), breaks cross-domain tracking on Google Analytics. And I'm not smart enough to figure out how to do it any other way.
What I'd like to do is have clicking the Book Now button change the URL in the form action within the form with ID resForm, and then submit the form. I'm hoping someone can help me edit the form so that it accomplishes this. I'd be incredibly thankful. This is what I currently have: Code: <script>
jQuery(document).ready(function($) {
$(".book-now").click(function() {
if($('#check-in').length > 0 && $('#DepartureDate').val() != '') {
var data = $('#check-in').val();
var arr = data.split('/');
var datac = $('#DepartureDate').val();
var arr2 = datac.split('/');
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(arr[2],arr[0] -1,arr[1]);
var secondDate = new Date(arr2[2],arr2[0] -1,arr2[1]);
var diffDays = Math.round((firstDate.getTime() - secondDate.getTime())/(oneDay));
if ((diffDays) < 0)
{
diffDays = Math.abs(diffDays);
var link = "https://res.windsurfercrs.com/bbe/page1.aspx?propertyID=13841&checkin=" + arr[0] + "/" + arr[1] + "/" + arr[2] + "&nights=" + diffDays;
console.log(link);
window.location.href= link;
}
else
{
alert ('Please fill in correct Check-In and Check-Out dates. The Check-In date must be before the Check-Out date.');
}
} else {
alert ('Please fill in a Check-In and Check-Out date, thanks!');
}
});
});
</script>
The form looks like this: Code: <form action="#" onSubmit="_gaq.push(['_linkByPost',this]);" method="post" id="resForm"> <input type='text' name="checkin" id="check-in" readonly="readonly" style="cursor: text" data-default="MM/DD/YYYY" class='arrivaldate'/> <input name="checkout" id="DepartureDate" readonly="readonly" style="cursor: text" data-default="MM/DD/YYYY" class='departuredate'/> <input type="button" value="BOOK NOW" class='book-now' /> </form> Reply With Quote 01-25-2015, 12:46 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts Just call the _gaq() function manually. Code: _gaq.push(['_linkByPost',document.getElementBy("resForm")])
window.location.href= link;
Similar TutorialsHere is the code for test.html: Code: <html>
<head><title></title></head>
<body>
<script type="text/javascript">
function OnSubmitForm(){
document.myform.action ="insert.html";
return true;
}
</script>
<form name="myform" onsubmit="return OnSubmitForm()" method="get">
<input type='radio' name='Search' value='test'>test</input>
</form>
<a href='javascript:document.myform.submit()'><img src='images/buttonnext.jpg'></a>
</body>
</html>
The way I want it to work: when the img (buttonnext.jpg) is clicked, the form is submitted. When the form is submitted it runs the javascript, which sets the action to be that insert.html is loaded. i.e. the end result should be to redirect to insert.html?Search=test The way that it is working now: the page is redirected to test.html?Search=test Note: If I use a submit button that is part of the form (i.e. input field with type "submit") the page is redirected correctly. What do I need to change to accomplish my goal? Hi everyone In the below code i tried to write java scirpt in action attribute of form tag in html . Why i wrote that was i want to get the scirpt variable as a part of the url of the target page . I also tried using the location.href="targetpage?value="+value . But It is not redirecting to targetpage because of the action attribute in the form tag. And if we use location.href without action attribute only that script variable was posted and all other remaining textboxes and other form items are being not posted .. Thats why I wrote the scirpt in action attribute. I want the action attribute to work and also the java script variable to be posted .so i wrote the script tag in action attribute of form tag . I hope u got the Scenario . Please help me to resolve the issue.. Thank in advance .. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <? if($_POST['submit'] ) { $var = $_GET['width'] ; } ?> <form name="form_submit" method="post" action="test2.php?width= '<script type= text/javascript> document.write(num)</script>' " onsubmit="return fun(); "> <script type="text/javascript"> function fun() { width = screen.width; height = screen.height; if (width > 0 && height >0) { window.location.href = "http://localhost/test2.php?width=" + width + "&height=" + height; } else exit(); } </script> <input type="text" name="txt" value="sample text" /> <input type="submit" name="submit" value="submit" /> </form> </body> </html> Hi - Im pretty new to all this! Have created a form on my website, uploaded database to server, but when the form is submitted - instead of opening the property selection, it just lists the Index of /home/properties and files within that folder. Can anyone help me please? Perky
Need help adding var target to this form action Would This be correct? var form = inp.form; form.target = "_self"; Code: <html>
</head>
<script type="text/javascript">
function formop(inp,op)
{
var form = inp.form;
form.action = op + ".php";
var temp = inp.id.split(",");
form.id.value = temp[0];
form.FirstName.value = temp[1];
form.LastName.value = temp[2];
}
</script>
</head>
<body>
<form method="post">
<input type="hidden" name="id">
<input type="hidden" name="FirstName">
<input type="hidden" name="LastName">
<input type='image' id='show,me,data' onclick=formop(this,'add'); src='static/icon16/add.jpg'>
<input type='image' id='show,me,data' onclick=formop(this,'edit'); src='static/icon16/edit.jpg'>
<input type='image' id='show,me,data' onclick=formop(this,'delete'); src='static/icon16/delete.jpg'>
</form>
</body>
Hi guys. I was wondering if its possible to switch a form action using javascript. Because im trying to have a search field on my main site for my forum and website. By having two boxes underneath my search field so people can select if the want to search my phpbb forum ore my site. Well anyway, mabey switching the form action is not the right approach. Any tips are welcome thanks. OK I basically have a form field called prepend and if someone enters something in there I want it to prepend to my form action="" how can I insert anything into action ="" depending on what is entered I hope this makes sense. I AM SO LOST <script type="text/javascript"> function SearchGo(){ var searchField = document.getElementById("SearchInput"); var url = "http://url" document.location = url + encodeURIComponent(searchField.value); } </script> //field where URL will be entered and needs to be prepended <input type="text" name="prepend"> //form output is here <form name="searchform" target="_blank" action="";> <input type="button" value="Search" onClick="SearchGo();"/> Hello guys, so i have a problem. i have a css/div box, and i have a login form. what im tryn to do is make it so that when i login, it it takes whats in the action of the form and shows it in the div box. the div box is like one of those cool popup boxes, it's done by using javascript and css. anyway, the div box works. the login form works. i just haven't been able to figure out how to get it to appear in the div instead of into a new page. so if any1 can help that would be much appreciated! here's my code: Code: <head><link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="popup.css" /></head>
<form name="Login" method="post" action="login/check.php">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>Username:</td>
<td>Password:</td>
</tr>
<tr>
<td><input name="myusername" type="text" class="txt" id="myusername"></td>
<td><input name="mypassword" type="password" class="txt" id="mypassword"></td>
<td><input type="submit" class="btn" name="Submit" value="Login" onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('PopUp').style.display = 'block' "></td></tr>
</table>
</form>
<div id='PopUp'>
<br />
<div id="close">
<a id="link"
onmouseover='this.style.cursor="pointer"'
onfocus='this.blur();'
onclick="document.getElementById('PopUp').style.display = 'none'">
<span id="span">Close</span></a>
</div>
</div>
Hi, I'm trying to make a form that when you click "submit", the original page goes somewhere, and it also creates a popup for the action URL. Currently, I can get the popup portion, but the can't get the original window to redirect somewhere else. this is what I have in the head. Code: <SCRIPT TYPE="text/javascript">
<!--
function popupform(myform, windowname)
{
if (! window.focus) return true;
window.open('', windowname, 'height=200,width=400,scrollbars=no');
myform.target=windowname;
return true;
}
//-->
</SCRIPT>
And this is what I have in the body Code: <form id="update" action="update.php" method="POST" name="update" onSubmit="popupform(this, 'join')"> hi, Can any one tell how to change action attribute in form tag using javascript. thanks in advance regards sugeet I have a form with an action url, but I need to alter it on submit. What I need to do is take the value of the text field, escape it, and append it on the end of the action url. Something like this: action url: /search/node appended action url: /search/node/some_escaped_string To do this, I create the function ahead of time and change the submit to a button with onClick. What isn't working is the escape mechanism. If I were to test for "ttt hhh", I'll get "/search/node/ttt hhh", instead of "/search/node/ttt%20hhh" Code: <script type="text/javascript">
function urlAppend()
{
termsValue = document.getElementById('terms').value;
escapedVar = escape(termsValue);
appendedUrl = "/search/node/" + escapedVar;
location.href = appendedUrl;
}
</script>
<form method="get" action="/search/node">
<input type="text" name="terms" id="terms"></input>
<input type="button" value="Search" onClick="urlAppend();">
</form>
Can someone tell me what I'm doing wrong? I need for the submission of an unvalidated from to reload the page to allow for php validation which, if passed, would use javascript to change the form's action to an external site. First, is the following approach sound? Code: <script type="text/javascript"> if(my_php_validation_ok == true) document.form.action="the_external_url" else document.form.action="current_page.php" </script> Second, how should the <form> action be styled to accomplish this? I have three buttons on my form. The user has to be logged in for the buttons to do anything. Is it possible to get an alert to popup on the form page without the form action occuring? If so, how do I go about it?
OK so I have a variable called url and I want to move its contents into the form action once the button is submitted. <script type="text/javascript"> function elibrarySearchGo(){ var url = "http://url'" } </script> <form name="searchform" target="_blank" action="" onsubmit=""> I need the syntax as to how to put in a variable coming from javascript inside onsubmit="document.form.action.value = variable" for example. Also, is it better to run this population of the action onsubmit or onclick? Thanks all in advance!! Hey all - I've searched high and low for this through Google, and tried piecing together some solutions, but 1) I'm way too incompetent from a Javascript perspective to take two ideas and make them work and 2) I've spent close to 2 hours and dont have a solution. SOOOO I thought I'd ask the geniuses here for some ideas: I have a page with an iFrame called portalCalcFrame that I'm trying to submit data to to do some calculations and preview in the iFrame before actually submitting the page to the next...well...page (both the "Recalculate" button to send to iFrame and the "Next Step" button to submit it further into the process are on the main frame). So I've got two problems. A) I need to submit a form to a different target, aka portalCalcFrame B) I need to submit the form to a different "action" page than my form actually submits to. (The form submits to a page called step2.php, whereas the iFrame needs to load page calcframe.php and have the form submit to that) I don't really know where to start, Javascript is far from my forte. I've taken it a couple of different ways. Any ideas guys? I love you long time. Thanks in advance! JE Hi, I have a body onload doing multiple things, changing a select option value, changing the form submit action and then auto submitting. Everything works fine until the auto submit part of it. Code: function run()
{
document.myform.myselect.selectedIndex = 1;
document.myform.action = 'page.php?x=1&y=2';
document.myform.submit();
}
<body onload="run()">
Thanks for any help with this Hi Guys, I'm developing a registration form to be viewed on an iPad, this will be put on display in store for customers to complete. The idea is that once the form has been completed a success message will show in lightbox form (currently using query reveal) and then after a few seconds disappear and the form will be refreshed. Any idea on how to do this? I am using the below code but the obvious error is with the action. "<form name="signup" class="form" id="signup" action="data-reveal-id="myModal"" method="post" onsubmit="return validate_signup(this)">" All help very much appreciated. Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks I have the following form working with on onsumbit function, but I would like to change it so that instead of having to click the purchase button to see total price, you only have to change the quanity text box input. I would welcome any help. I just can not seem to get it to work. Code: <script language="javascript" type="text/javascript">
function checkQuantity(frm) {
var succesful = false;
var numQuantity;
numQuantity = parseInt(frm.Quantity.value);
var numTotalPrice;
if (numQuantity != 0) {
numTotalPrice = numQuantity * 4;
frm.TotalPrice.value = numTotalPrice; //new String(numTotalPrice);
successful = true;
}
else {
alert("Sorry must order more than 0");
successful = false;
}
return succesful;
}
</script>
Code: <form action="" onsubmit="return checkQuantity(this)" style="width: 193px">
<table cellpadding="4" style="width:111%">
<tr>
<td class="style1">
Quanity:</td>
<td class="formInputCell">
<input name="Quantity" type="text" style="width: 55px" /></td>
</tr>
<tr>
<td class="style1">
Total Price $
</td>
<td class="formInputCell">
<input name="TotalPrice" type="text" style="width: 55px" /></td>
</tr>
<tr>
<td class="style2"></td>
<td><input id="Submit1" type="submit"
value="Buy Now" class="buttonstyle" /></td>
</tr>
</table>
</form>
I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) {
var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;
result = result.toFixed(2) ;
result = addCommas(result) ;
document.getElementById("total"+selected).innerHTML = result ;
}
The bit that adds a new row of fields is: Code: function addPart(divName){
var newdiv = document.createElement('div') ;
newdiv.setAttribute('id', 'partrow' + counter) ;
newdiv.setAttribute('style', 'clear:both;') ;
newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
document.getElementById(divName).appendChild(newdiv) ;
counter++ ;
}
The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong Hi All, I have created my second Form to File Web Form thanks to some help from other members. Looks great. I am still new to HTML and Javascript, but basically I took my First Web Form coding (with the Java Script) and manipulated it so that it suited my needs for my 2nd Form (both are very close to being the same). For some reason, I can't get my Java Script validation to take effect. I was wondering if some one could try to pin point why it isn't functioning properly? Again it could be the most obvious thing, but please bear with me as I learn. Just for a little more clarity, I am going to list the things that I have changed to possibly make it easier to pin point: Added Fields: Department, SteetAddress, CityState Deleted: State/Research Accounts, Vendor Checkbox Modified: "Type" which is a radio button that I have changed the choices of. I beleive that's it...I will post my Java Script here and attach my Index File. Thank you in advance!! Code: /********************************************************************************
*
* FORM VALIDATION
*
********************************************************************************/
// get the value of a radio button group:
function getRBValue(grp)
{
if ( grp.length == null ) return grp.checked ? grp.value : null;
for ( var g = 0; g < grp.length; ++g )
{
if ( grp[g].checked ) return grp[g].value;
}
return null;
}
// trim a string
function trim(fld)
{
var val = fld.value.replace(/^\s+/,"").replace(/\s+%/,"").toUpperCase();
fld.value = val;
return val;
}
var echk = /^([a-z][\w\-\'\.]*)+\@([a-z][\w\-\'\.]+\.)+[a-z]{2,6}$/i
function emailCheck( fld )
{
var email = trim( fld );
fld.value = email;
return echk.test(email);
}
var digonly = /[^\d]/g
function formatPhone( fld )
{
var ph = fld.value.replace( digonly, "" );
if ( ph.length != 10 ) return;
fld.value = "(" + ph.substring(0,3) + ") " + ph.substring(3,6) + "-" + ph.substring(6);
}
var phchk = /^\(\d\d\d\) \d\d\d\-\d\d\d\d$/
function phoneCheck( fld )
{
return phchk.test(fld.value);
}
function validateForm( frm )
{
var oops = "";
if ( trim( frm.elements["Username."] ).length < 5 )
oops += "You must enter your first and last name\n";
if ( ! emailCheck( frm.elements["Email."] ) )
oops += "That does not appear to be a valid email address\n";
if ( trim( frm.elements["Department."] ).length < 3)
oops += "You must enter your department name\n";
if ( ! phoneCheck( frm.elements["Phone."] ) )
oops += "That is not a valid 10-digit phone number\n";
if ( trim( frm.elements["ShipToBuildingRoom."] ).length < 5 )
oops += "You must enter your building and room information\n";
if ( trim( frm.elements["StreetAddress."] ).length < 5 )
oops += "You must enter your street address information\n";
if ( trim( frm.elements["CityZip."] ).length < 5 )
oops += "You must enter your city and zip code information\n";
apptype = getRBValue( frm.elements["Type."] );
if ( apptype == null )
oops += "You must check one class\n";
var app = getRBValue( frm.RequireApprovalYesNo );
if ( app == null )
oops += "You must specify whether or not approval is required.\n";
if ( app == "Yes" )
{
if ( trim( frm.Approver ).length < 5 )
oops += "You must enter the name of the approver\n";
if ( ! emailCheck( frm.ApprovalEmail ) )
oops += "The approval email is not a valid email address\n";
}
}
function showapp(yesno)
{
document.getElementById("APP1").style.display =
document.getElementById("APP2").style.display =
document.getElementById("APP3").style.display =
yesno ? "" : "none";
}
</SCRIPT>
|
|||||||