Having a bit of trouble with a form. Is any one who know's the ins and outs of GET able to have a look at this markup and suggest what is going wrong?
I have already looked into it and came across this answer: How can I pass a parameter via submit button? - scripting is taken from there but am still unsure where I am going wrong. The url is being populated but no value is being passed into it, so this is what I get: 'gender='
Markup:
<form onsubmit="validateEmail(document.emailsonly1,'Please enter a valid email address'); return false;" method="get" action="http://URL" name="emailsonly1">
<input type="hidden" name="gender">
<input type="image" src="/content/ebiz/shop/resources/images/spacer.gif" class="buttonSignUpGirl" id="btnSignUpGirl" onclick="setType('1')">
<input type="image" src "/content/ebiz/shop/resources/images/spacer.gif" class="buttonSignUpBoy" id="btnSignUpBoy" onclick="setType('2')">
</form>
Script:
function setType(type)
{
document.getElementById('gender').value = type;
}
You don't even need a new function for that, just do
<form onsubmit="validateEmail(...); return false;" method="get" action="http://URL" name="emailsonly1">
<input type="hidden" name="gender">
<input type="image" src="your image" onclick="emailsonly1['gender'].value = 1;">
<input type="image" src "your image" onclick="emailsonly1['gender'].value = 2;">
</form>
Fiddle here
BTW, it was probably not working because you forgot to give an id to the gender field.
Related
This is my form code:
<form enctype="multipart/form-data" name="upload-file" method="post" action="http://example.com/upload">
<div class="formi">
<input id="text-link-input" type="text" name="url" class="link_form" value="your link" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;" />
<input type="submit" value="OK" class="link_but" />
</div>
<div class="upl" title="Upload"><img src="http://example.com/example.png" alt="" style="vertical-align:middle;"/>Upload
<input type="file" name="file" size="1" class="up" onchange = "document.getElementById('text-link-input').value = String(this.value).replace('C:\\fakepath\\','')"/>
</div>
</form>
Now, I want to redirect the submitter to any page of my choice after the form data has been submitted, but the action resides on another website where I cannot edit. Is it possible to redirect the user to any page after he has submitted the data to that site?
From some Googling, this is what I have found. Adding this to form code:
onSubmit=window.location='http://google.com'
This didnt work. Maybe I didnt implement it correctly? This is what I did:
<form enctype="multipart/form-data" name="upload-file" method="post" onSubmit=window.location='http://google.com' action="http://example.com/upload">
Another person says adding a hidden field should work:
<input type="hidden" name="redirect" value="http://your.host/to/file.html">
How should I implement this is my code?
Suggestions and help awaited...
Try this Javascript (jquery) code. Its an ajax request to an external URL. Use the callback function to fire any code:
<script type="text/javascript">
$(function() {
$('form').submit(function(){
$.post('http://example.com/upload', function() {
window.location = 'http://google.com';
});
return false;
});
});
</script>
So this was brought to my attention today, that our website search field does not work in chrome... I cannot click and enter text into the text field, nor click the search icon to initiate searching...
Sorry I do not know the specifics as to what is causing this, nor did I develop this. One of our developers who left quite some time ago did. I am now in charge of trying to figure this out.
FireFox and IE 11 seems to working fine.
Any insight is greatly appreciated.
<div class="searchbox" id="searchbox">
<script type="text/javascript">
function RunSearch() {
window.location.href = "http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + document.getElementById("search").value;
}
</script>
<div class="formSrchr">
<input type="text" size="20" name="qt" id="search" value="Search" onfocus="if(this.value == 'Search') {this.value=''}" onblur="if(this.value == ''){this.value ='Search'}" />
<input type="hidden" name="qlOld" id="qlOld" value="" />
<input type="hidden" name="colOld" id="colOld" value="web1" />
<input type="image" name="imageField" alt="search" src="/_images/search-mag.gif" onclick="RunSearch();" />
</div>
</div> <!-- /searchbox -->
This is bad code and i suggest an entire re-write.. As for a quick fix..
You could try the following :
var searchTerm = document.getElementById("search").value;
location.assign("http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + searchTerm );
Or
function RunSearch() {
window.location.href = "http://search.domain.com:8765/query.html?ql=&col=web1&qt=" + document.getElementById("search").value;
return false;
}
But dont use this.. re-write it!
My recommendation is to open the Developer tools in chrome and look at the Javascript debug window. That should tell you what's going on in the more general case. In either case, I recommend rewriting that snippet like this:
<div class="searchbox" id="searchbox">
<div class="formSrchr">
<form action="http://search.domain.com:8765/query.html" method="get">
<input type="text" size="20" name="qt" value="Search" onfocus="if(this.value == 'Search') {this.value=''}" onblur="if(this.value == ''){this.value ='Search'}" onmouseup="return false" />
<input type="hidden" name="ql" id="ql" value="" />
<input type="hidden" name="col" id="col" value="web1" />
<input type="image" alt="search" src="/_images/search-mag.gif" />
</form>
</div>
</div>
The standard form element will behave the way it's supposed to without JavaScript. All the named inputs will be added as URL parameters just like it did before. That's what method="get" does. For most forms, the default method="post is best; however, for search you aren't really posting anything. There are some strange proxy servers that disable all HTTP POST calls to prevent people behind that proxy from accidentally sharing information they aren't supposed to. The method="get" allows those people to at least search your site.
NOTE: based on some searching around, Chrome needs you to disable the onmouseup event for focus and blur to work as expected. My HTML form above has that change in it already for you.
In HTML 5, you can simplify it even more by using the placeholder tag. It would look like this:
<input type="text" size="20" name="qt" placeholder="Search" value=""/>
That removes all the Javascript from your search form.
I am going to need to add a form to a page on a site, that takes a domain name as the input from the viewer and sends it to who.is so that the DNS for this domains a returned.
When searching onwho.is, the URL for the search query when looking for me.com looks like this:
http://who.is/dns/me.com
I am struggling here since I can't pass the domain name using the variable form, with ?q=...
Any Ideas?
This is so far the html I have for this form:
<form method="get" action="http://who.is/dns/" target="_blank">
<input type="text" name="q" size="31" maxlength="255" placeholder="Who is" width="255"/>
</form>
Thanks
You will not be able to do this in HTML unless you find a URL with parameters, like TechnoKnol posted.
You need this or a server process
window.onload=function() {
document.getElementById("who").onsubmit=function() {
window.open("http://who.is/dns/"+document.getElementById("q").value(),"_blank");
return false;
}
}
using
<form id="who">
<input type="text" id="q" size="31" maxlength="255" placeholder="Who is" width="255"/>
</form>
By inspecting on who.is, I found below url
http://who.is/search.php?search_type=Whois&query=me.com&commit=Search
With some modification in your form will work.
i am working on a search function, herefore i need the value of an input to generate the final url (which shows the results)
Let's say the user enters the content he is looking for here:
Name: <input type="text" id="myText">
now i need to generate a hyperlink from
http://constant/constant?query=NAME&someotherconstantthings
here, the NAME needs to be replaced from the content of the input
Try to use PHP, you could add a action to the Form Element to post the entered informations to the PHP file, then generate ur hyperlink.
<form action="phpfilename.php" method="post">
Name: <input type="text" id="myText" name="myText">
<input type="submit" value="Search">
</form>
<?php
$name = $_POST['myText'];
$hyperlink = 'http://constant/constant?query='.$name;
?>
You need something like this:
<form action="URL" method="get">
Enter your name here: <input type="text" name="query" value="">
<input type="submit" value="Search">
</form>
You need to replace the keyword URL with the path to the page which performs the search. You can remove the keyword URL if want to submit the form to the same page.
I have multiple images inside one form. Depending on the image clicked a specific value should be sent with a POST.
Can this be done without javascript? (I use jquery, if not).
I tried something like this:
<input type="image" name="type" value="1" src="images/type1.jpg" />
But only the coords of the image were sent, not type=1.
The safe approach to this problem is to give the inputs unique names and see which one sends coordinates.
<input type="image" name="submit_blue" value="blue" alt="blue" src="blue.png">
<input type="image" name="submit_red" value="red" alt="red " src="red.png">
Only the successful control will send any data. So test to see if submit_blue.x has a value, then test if submit_red.x has one.
There is no need to involve JavaScript at all.
Alternatively, use regular submit buttons instead of server side image maps.
<button name="action" value="blue"><img src="blue.png" alt="blue"></button>
… keeping in mind that this will break in old-IE as it doesn't support <button> properly.
Using jQuery you can submit the clicking on the image. You can add a id for the image or even a classe.
$( "#yourImageId" ).click(function() {
$( "#yourFormId" ).submit();
});
My approach is to define multiple images, with a single "name", and multpiple "value".
<form id="myform" method="post" action="mypage.php">
<input type="image" name="color" value="blue" alt="blue" src="blue.png">
<input type="image" name="color" value="red" alt="red " src="red.png">
</form>
Then, on server side, i will be able to read directly the selected value ("blue" or "red") in the "color" POST variable.
<?php
if (isset($_POST["color"]) && !empty($_POST["color"])) {
$selected_color = $_POST['color'];
echo('Selected color is ' . $selected_color);
//"blue" or "red"
}else{
echo ('No image selected');
}
?>
Try this
<form id="myform" action="mypage.php">
your content form here
<img scr="img1" class="submitableimage" />
<img scr="img2" class="submitableimage" />
<img scr="imgn" class="submitableimage" />
</form>
<script>
$('img.submitableimage').click(function(){
$('#myform').submit();
});
</script>