I am developing a web site in it I am using Google search bar, code I used
<form id="form_body" method="get" action="http://www.google.com /search">
<p>Google Search<input type="text" name="q"/>
<input type="submit" value="Search"/></p>
</form>
Now the problem is I want the key words entered for search to be saved I tried using this code
<form id="form_body" method="get" action="http://www.google.com/search">
<p>Google Search<input type="text" name="q"/>
<input type="button" onclick="save1()" value="Search"/></p>
</form>
where save1 is my javascript function which does not work(not at all working)
When you hook the click event of a submit button in a form, it will not fire/stop firing when the page unloads. Instead, hook the submit event to ensure your code fires before the page is ever submitted.
<form id="form_body" method="get" action="http://www.google.com/search" onsubmit="return save1();">
<p>Google Search<input type="text" name="q"/>
<input type="submit" value="Search"/></p>
Create an ajax call on the submit of the button that pulls in the text input value and then sends it to a php file to store the value in a database.
Related
I have one form on one page and another on another website. How do i submit the data filled out on the first form to the other?
This is the code i have.
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
Comments: <input type="text" name="comments"><br>
<button type="submit">Submit</button><br>
<button type="submit" formaction="http://www.example.com/formresult.asp")>Submit to another Form</button>
</form>
Ok so i want my users to fill out one form, but have the option to send to another form.
The reason i need this because i have different HELP DESK support teams. INSTEAD of a number of different contact forms on a lot of html pages in my directory, i want to just have the option to send to anyone of my HELP DESK support team from one form. ALL THE FORMS are the same, the PHP files are the same. The EMAIL addresses are the only thing different for each team member.
The OPTION to send to a URL is also helpful. I read it is called 'An absolute URL ' and 'A relative URL' as Attribute Values, but i think i am coding it wrong, it will not work for me.
type="submit" formaction="http://www.example.com/form.php")>Submit to another Form
If i can get some help by an example on the code i will need to do both of these actions - i can start to test my new gaming clan website live.
Thanks in advance
Please advise
Try this you have to change the attributes for action tag on each button click. I have change submit type in to button and placed a hidden input type as submit. hope this help you to move on.
<form action="/action_page.php" method="get" id="myForm">
First name:
<input type="text" name="fname">
<br>
Last name:
<input type="text" name="lname">
<br>
Comments:
<input type="text" name="comments">
<br>
<input type="submit" name="sub" id="sub" style="display:none;">
<button type="button" onClick="javascript:document.getElementById('myForm').setAttribute('action','action_page.php'); javascript:document.getElementById('sub').click();">Submit</button>
<br>
<button type="button" onClick="javascript:document.getElementById('myForm').setAttribute('action','http://www.example.com/formresult.asp'); javascript:document.getElementById('sub').click();">Submit to another Form</button>
<br>
</form>
I think your problem is in the
<form action="/action_page.php" method="get">
You should target it to your php like this:
<form action="/http://www.example.com/formresult.asp" method="get">
Then on the receiver file you should type the handling of the results
I'm trying to get the search term to appear in the URL. What am I doing wrong?
<form name="catsearchform74255" method="post" onsubmit="processSearch(this)" action="/Default.aspx?SiteSearchID=2248&ID=/search-results&keywords=">
<div class="input-field search-box">
<input id="CAT_Search" type="search" name="CAT_Search" placeholder="What are you looking for?" class="white" required="true">
<label class="label-icon" for="CAT_Search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
<script type="text/javascript">
function processSearch(form) {
form.action = form.action + CAT_Search.value;
}
</script>
</form>
Change method="post" to method="get".
Update any server-side code referencing post variables to reference get variables. For example, in PHP code, change $_POST["CAT_Search"] to $_GET["CAT_Search"].
Also, the correct format for the required HTML attribute is either required="" or required="required.
Code
This can be done with JS, you can't edit the method as Business Catalyst expects a post for this form.
If you change the form to the following:
<form name="catsearchform74255" id="searchForm" method="post" action="/Default.aspx?SiteSearchID=2248&ID=/search-results&keywords=">
<div class="search-box">
<input class="cat_textbox_small" type="text" name="CAT_Search" id="CAT_Search">
<input id="submitForm" onclick="submitFormScript()" type="button" class="cat_button" value="Search">
</div>
</form>
and then add the following jQuery:
function submitFormScript() {
var searchAction = $("#searchForm").attr("action");
searchAction = searchAction + $("#CAT_Search").val();
$("#searchForm").attr("action", searchAction);
$("#searchForm").submit();
}
Explanation
By adding the ID's to the fields on the form and then taking type="submit" off the input button we can edit the form action before we submit the form.
In the JS we are getting the form action, adding on the value of the search box (users input) and then setting that back to the form action attribute. After that we have the URL that we want to send to the next page so we can then submit the form.
I'm trying to accomplish a feature where a user can type a piece of text into an input box, click submit and they'll be taken to a webpage which includes the text they submitted in the url.
For example, if the user entered the word 'apple' in the text and clicked submit, they would be taken to http://example.com/link.aspx?username=apple&jump=1 or if they entered the word 'orange', they would be taken to http://example.com/link.aspx?username=orange&jump=1.
I've tried the following code, but to no avail - it doesn't send the user anywhere on submit.
<form method="get">
<input type="text" value="11" id="input">
<button type="button" id="button">Click Me!</button>
</form>
<script>
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#input").val();
window.location.replace(" http://www.example.com/page/"+inputvalue);
});
});
</script>
Why you're trying to use JQuery when you can do it much easier with PHP
Form
<form action="form.php" method="get">
<input type="text" name="n" />
<input type="submit" />
</form>
PHP side - form.php
header("Location: http://yourdomain/page/".$_GET['n']);
your code works for me.
are you sure you added jquery before your script?
add this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Do not use jQuery for this. A simple form with get method will work fine.
<form name="sample" method="get">
<input name="username" type="text" value=""/>
<input name="submit" type="submit" value="submit"/>
</form>
This will automatically submit the form once user fills field and click submit button in the format you are looking for.
I want to make a form like this, and i want to post the form - with javascript - in all the keydowns.
<form action="{$formaction}" enctype="multipart/form-data" method="post">
<input type="text" name="n">
<input type="password" name="pw">
<button name="in" type="submit">enter</button>
</form>
please tell me how to do this.
<form onkeydown="this.submit();">
<!-- form content -->
</form>
<body onkeydown="document.forms["myform"].submit();">
If you do that, the page will reload, just as if you were clicking the submit button.
What you probably want is to attach an onkeydown handler to the password field and submit key presses via AJAX.
For an example look at one of javascript auto-suggest libraries, e.g. AJAX Auto Suggest.
I have an HTML form to edit the details of a person in a database system I have at my place of work. Part of the form allows the user to upload a picture of the person. However, this is giving me trouble, because I'm trying to make the form more Ajax-y by letting the user upload the picture and see it successfully uploaded before they submit the person's details to be saved. The part that's giving me trouble is that it seems to necessitate a nested form (that is, the upload form inside the details form), like so:
<form name="details">
<input name="detail1">
<input name="detail2">
<form name="pictureupload">
<input type="file" name="pic">
<input type="submit" name="upload" value="Upload">
</form>
<input type="submit">
</form>
The way I'm hoping to make it work is that the user would fill out the details of the form, select a picture and hit the "Upload" button, then do an AJAX update when the file is uploaded so that they can see the picture before pressing the final "Submit" button.
Is there a good way to have the upload form be "inside" the details form (at least in appearance on the page) but not nested inside the details form in the HTML?
You aren't allowed to have forms nested inside each other in valid HTML. Also, file uploads through XMLHTTPRequest objects (the most common AJAX technique) don't work in most browsers.
All is not lost, though. For the AJAX uploads, you will need to use an IFRAME, as presented here: http://www.webtoolkit.info/ajax-file-upload.html
The approach I would suggest for the form is to split it into three form elements. You will have a form that holds the fields before the upload form, the upload form, and the form that holds the fields after the upload form. The first form will not have any submit button. The fields in the first form are duplicated in the third form, as hidden inputs. When the last form's submit button is clicked, some javascript will run that will copy the field data from the first form into the third, so it gets submitted with the last form.
For example, your HTML might look like this::
<form name="details1">
<input id="fake_detail1" name="detail1" type="text"/>
<input id="fake_detail2" name="detail2" type="text"/>
</form>
<form name="pictureupload">
<input type="file" name="pic">
<input type="submit" name="upload" value="Upload">
</form>
<form name="details2">
<input id="detail1" name="detail1" type="hidden"/>
<input id="detail2" name="detail2" type="hidden"/>
<input id="detail3" name="detail3" type="text"/>
<input type="submit">
</form>
You can place the "nested" form in another location on the page and only show it when your user clicks on a "Upload Picture..." button.
The nested form may be initially invisible. There are some very nice popups that allow you to display the nested form over the outer form and allow the user to upload the nested form independently.
<div id="nestedform">
<form name="pictureupload">
<input type="file" name="pic">
<input type="submit" name="upload" value="Upload">
</form>
</div>
<div id="mainform">
<form name="details">
<input name="detail1">
<input name="detail2">
Upload Picture...
<input type="submit">
</form>
</div>