HTML Form element to URL - html

I am using an eCommerce engine script that uses a different search method.
Instead of a URL using GET like this:
http://search.com/searchc?q=the+query
It uses
http://search.com/searchc/the+query
How can I make a form to POST or GET to that, because this form makes the URL
http://search.com/searchc/?q=the+query
<form action="/searchc/" method="post">
<input type="text" id="q" name="q">
<input type="submit" value="go">
</form>
Also tried this (get or post do not work for both of these)
<form action="/searchc/" method="post">
<input type="text" id="" name="">
<input type="submit" value="go">
</form>

The reliable way has two components: Client-side JavaScript manipulation, which turns form submission to a request as needed, and (as backup for non-JS situations) a simple server-side redirect utility which receives a request from the form and redirects it as modified.
Something like this (for the GET case):
<form action="http://www.example.com/redirect"
onsubmit="location.href = document.getElementById('f1').value +
document.getElementById('q').value; return false">
<input type="text" id="q" name="f2">
<input type="submit" value="go">
<input type=hidden id=f1 name=f1 value="http://search.com/search/">
</form>
Here http://www.example.com/redirect is some server-side form handler that just reads the form fields and picks up fields named f1, f2,..., concatenates them into a single string, and redirects using it as a URL. As a CGI script, this would be
use CGI qw(:standard);
$dest = '';
$i = 1;
while(param('f'.$i)) {
$dest .= param('f'.$i++); }
print "Location: $dest\n\n";

<form action="/searchc/" method="post" onsubmit="this.action+=this.q.value;return true">
<input type="text" id="q">
<input type="submit" value="go">
</form>
spaces will be submited as %20
you can use
this.action+=this.q.value.split(' ').join('+')
to replace them

This is very strange url pattern, but anyway you could do something like:
$(function () {
$('form').submit(function () {
var url = '/searchc/' + encodeURIComponent($(this).find('[name=q]').val());
window.location = url;
return false;
});
});

Related

How to have 2 textboxes as mutually exclusive in an html form?

I would like to have 2 mutually exclusive fields.
One will be a FileField and other TextBoxField.
Is there a ready html form I can get my hands on to.
I have searched the web and couldnt find any.
Oh I am a little sorry..
I meant that I wanted to do this via Django Templates
You can make an onInput event listener and handle it using javascript, so that if the user types in one field it empties the other.
For example:
<form>
<label for="first">Fill This:</label>
<input type="text" name="first" id="first" oninput="run('first')"><br><br>
<label for="second">Or This:</label>
<input type="text" name="second" id="second" oninput="run('second')"><br><br>
<input type="submit" value="Submit">
</form>
<script>
function run(activeField) {
if (activeField == 'first') {
const second = document.querySelector('#second')
second.value = ''
} else {
const first = document.querySelector('#first')
first.value = ''
}
}
</script>
For Your textbox, you can use this:
<input type="text" name="name" placeholder="Please enter your name">
And for your files:
<input type="file" name="fileName">
But for file name it needs to be encrypted. HTML won't let you submit a form with a file. But you can override this in the form attr, like this:
<form action="dirToForm.py" method="POST" enctype="multipart/form-data"></form>

HTML generate URL from Input

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.

passing input text to action field

I want to pass the input field to the form action part covering field; so it looks like /{user}/some_integer_in_field if you know what I mean.
<form action="<c:url value='${user}/?field'/>"
method="post" >
<input type="hidden" name="_method" value="DELETE">
<input type="text" name="field" id="field"/>
<input type="submit" value="DELETE">
</form>
can someone help? is this possible?
I see you've only tagged HTML. What other languages are you using? I recommend you change the desired action via JavaScript, based on the user variable.
HTML
<form>
<input type="hidden" name="_method" value="DELETE">
<input type="text" name="field" id="field"/>
<input type="submit" value="DELETE" id="submitBtn">
</form>
JavaScript
<script>
var sub = document.getElementById('submitBtn');
// When sub is clicked, compare user var
sub.addEventListener('click', function(event){
if(user == 1){
// Perform post action 1
}else if(user == 2){
// Perform post action 2
}
// etc...
});
</script>
You'll have to change the user variable as the field changes as well.

Do Not Load Page After Form Submit

I have created a basic HTML contact form using cgimail and everything works, but I can't get it to keep from redirecting somewhere after the form is submitted. I'm trying to instead use a bootstrap alert at the top of the page.
How do I get the form to submit, then keep it from redirecting?
here's the code:
<form method="post" action="/cgi-bin/cgiemail/forms/email.txt">
<fieldset>
<h2 id="contact-header">Contact</h2>
<label>Name:</label>
<input type="text" name="yourname" placeholder="" autofocus>
<label>Email Address:</label>
<input type="email" name="email" value="" placeholder="">
<label>Phone:</label>
<input type="tel" name="phone" value="" placeholder="">
<label>Message:</label>
<textarea name="message" rows="2"></textarea>
<br>
<button type="submit" id="formSubmit" class="btn">Send</button>
<input type="hidden" name="success" value="">
</fieldset>
</form>
Thanks,
Ryan
The "action" attribute in your form is telling it to send the browser over to that email.txt, which would then have control over whether or not to redirect you to another page. By default it would at least redirect you to the email.txt page for the post, but odds are cgi is doing extra stuff when posting to that page.
Using jQuery AJAX, you can do the following (this code skips error checking):
$('form').submit(function() {
var data = { };
data.yourname = $(this).find('input[name="yourname"]').val();
data.message = $(this).find('textarea[name="message"]').val();
// do the same as above for each form field.
$.post("/cgi-bin/cgiemail/forms/email.txt", data, function() {
//add the alert to the form.
$('body').prepend('div class="alert">Success!</div>');
});
return false;
});
You have two straight-forward choices. You can use jQuery and its forms plugin to turn this into an ajax operation or you can roll your own equivalent. It would look something like this (using jQuery):
$('form').submit(function() {
... get all values.
... ajax post the values to the server.
return false;
});
If you're using jQuery, then you could try cancelling the submit event. First give your form an id
HTML:
<form id="myform" ...
JavaScript:
$('#myform').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: '/cgi-bin/cgiemail/forms/email.txt',
type: 'post',
data: $(this).serialize()
});
return false;
});

Redirect to the same page (without PHP)

I have a form that can be called from any page. It opens on top of the current page with z-index. I cannot use php in this case. The form is send to a cgi to process the values. It is necessary to put something in "redirect" if I leave it blank it don't works. In redirect is there a way to put the value to the current page whatever it is?
<Form id="formulari" method="POST" action="http://cgi.domain.com/FormMail.pl">
<p>
<input type="hidden" name="recipient" value="info#domain">
<input type="hidden" name="subject" value="IB4 correu">
<input type="hidden" name="redirect" value="TheSamePageWeAre">
</p>
<form>
<input type="text" name="name" value="name"/>
<input type="submit" value="Send"/>
</form>
Put this javascript at the end of the page.
<script type='text/javascript'>
document.getElementsByName('redirect')[0].value = window.location.pathname;
</script>
Set an id on the hidden field, for example id="redirect", and use this Javascript:
<script>
window.onload = function (){
document.getElementById('redirect').value = location
}
</script>