JavaScript - Easiest Question Ever!! Form Action Replacement
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!! Similar TutorialsHi, 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 all, As the title suggests, I'm new to JS and I've been working with HTML, CSS, and PHP for the past few years. I've decided to add some interactivity to my websites and one of the new courses requires JS in our implementations, so I figure why not. Anyhow, more to the point...the topic is a bit vague, but I didn't want to put a 50 word topic either so bear with me as I try to explain : Okay, so I'm designing an art portfolio page and I have a 250x250 pixels preview shot of an art piece on my side bar at the top. There is a horizontal column at the bottom of the page (before the footer) that contains about 6 to 8 mini thumbnails around 100x100 pixels. Right now, I am able to make it so that if I mouse over the bottom thumbnails, the 250x250 at the sidebar is replaced to reflect what was hovered at the bottom, only in a bigger size. This is my current coding: Code: <script type="text/javascript"> <!-- function change_img(path) { document.large_img.src=path} function preload(){ myImg01 = new Image(); myImg01.src = "/msjb/wp-content/themes/msjb_theme/images/front_gal/arrival.png"; differentImag = new Image(); differentImag.src = "/msjb/wp-content/themes/msjb_theme/images/mini_gal/arrival.png"; } --> </script> From that point, I would insert the following code with each 100x100 thumbnail: Code: onmouseover="javascript:change_img('/msjb/wp-content/themes/msjb_theme/images/front_gal/wind.png')" I'm not even sure if that's the correct or most efficient way to do it...it took me a while to figure out, and it finally worked so I went along with it. What I want to do, and what I need help with is...I'd like to give the current artwork, or the piece that's currently @ 250x250 pixels at the sidebar a title. Preferably, perhaps from the context of the alt tag from an img src but not required. However, I would like for it to change to the corresponding pieces' title when I mouseover, so for example: 250x250 piece1's name is ...art1 and that name is located right under the image. I mouse over the bottom thumbnails to the 5th thumbnail, the 250x250 piece1 is replaced and becomes 250x250 piece5. I'm trying to make it so that art1 becomes art5. I'm really bad at explanations so it was clear enough for some sort of understanding. I do appreciate the help, and thanks for time! 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
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 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();"/> 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> 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')"> 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 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?
hi, Can any one tell how to change action attribute in form tag using javascript. thanks in advance regards sugeet 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? 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 Hello, I was wondering what the easiest and best way for a beginner like myself to set up a keypad with numbers only and have them incorporate it to a text area or box, basically the user will click the button and the number that is pressed will show up in the textarea or text box. I am wondering what the best way to do this is. Code: <input type="image" id="1" src="Button1.gif" alt="Calculator Button #1"/> This is the line of code (an example of it) that I am working with. So my question is what is the best way to do this. Thanks for the help. So, I've designed a basic site and everything is fine except for the posts. You can see the site here. What I'm talking about is this: Code: <div id="posts"> <h1>Bonjour</h1> <p>Welcome to my website! Please note that it's fairly new, and so it might still go under some construction, so don't expect what you see now to be stay the same forever. Furthermore, if you have any suggestions, please run them by me and I'll take them into consideration.</p> <p>As of 9/23: Working on Adding Games.</p> <br> </div> The CSS code for it is: Code: #posts{text-indent:15px;background-color:#424242;border:3px solid #e0e0e0;position:absolute;left:212px;top:180px;width:565px;} Now, the post is only one post, and I can't add any more as it is only one div. I was wondering if there was an easy way to make a master, parent div and all the div's inside it would be transformed into div's that are respectively positioned under it, automatically. ^^ Now, I liked that idea at first but then I thought of the technicalities such as having to use HTML to write blog posts which would be kind of ridiculous and I was wondering if anyone knows how of a simple-free easy to integrate blog system which could be embedded into my site without having to re-design everything. I need a simple handy utility of some sort to test out the scripts while I am studying, any referrals please?
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> |