JavaScript - Need To Escape And Append Value(s) To Form's Action
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? Similar TutorialsI'd like to create a basic form where 3 text input fields are named with the following names referrerId, referrerId2 & referrerId3. My goal is once the text fields within the form are populated with the users data, then once the user clicks submit, a new browser window opens up (in parent window preferably), navigating to the following url exactly as shown. Highlighted in red is the dynamic information I'd like appended. Vacation Packages &referrerId=FIRSTNAME&referrerId2=LASTNAME&referrerId3=AGENTNUMBER Any help would be greatly appreciated. Thanks! 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; 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
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();"/> 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. 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> 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, Can any one tell how to change action attribute in form tag using javascript. thanks in advance regards sugeet 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?
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? 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')"> Here 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? 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!! 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. 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 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> all OK, appears as expeced Code: tmpHTML += "<input style = '" + "color:red;" + "' ... all I get is string "color:red" from whole line of code, no errors in javascript console Code: tmpHTML += "<input style = '" + (arr1[i].split("|")[1] != null)?"color:red;":"color:blue;"; + "'.... ? In my coding I have the following lines: Code: for (index = 0; index < slidesNumber; index++) { $('<a href="#"></a>') } Now I want to give each href a unique name with the index variable. So it should look like Code: $('<a href="#index"></a>') Problem is that it just displays the word 'index', and I don't know how to escape it, so that it displays the value of index. Who can help me out? Hi, i am new to Javascript i want to know what is the use of the escape() function i read it on w3schools that the function is to encode the string passed top it so as it convert into ascii format so that it can be transferred over any network, can anybody explain me this with an example. Please recommend Regards ltoso |