I'm working on a Rails site, and I've got my database indexed with IndexTank. I have things set up so that to search, all I have to do is browse to [root]/search?q=[query]. To simplify things, I'm planning on just dropping a HTML form with a textbox and a submit button in amongst the erb, but I'm not quite sure how to pass the information from the text box to the end of the /search?q= line.
I'm sure that this is terribly basic, but I've been Googling all morning and I've come up empty-handed.
<form action="/search">
<label>Search term <input name="q"></label>
<input type="submit">
</form>
First off, you'll probably need to post some more code. That said, the solution is likely as simple as setting your form element's method attribute to GET.
Related
I am new to programming please forgive me if my question is out of place or if it does not follow community guidelines.
I was following a youtube tutorial and this is the simplified code:
<form class="form" id="form">
<input type="text" id="input" autocomplete="off"/>
<button type="submit" class="btn">Submit</button>
</form>
My question is why is there a need to state type="submit" ? I tried removing the type and it seems to work fine.
Also, I saw another question on StackOverflow that states the default for button when it is used in a form is already submit.
Is the person in the tutorial just being thorough or is there another reason as to why it needs to be stated?
You don't need to because button's default type is submit.
But, you have to because your purpose is not writing something that "just works". You read code 90% of time and write code 10% of time, so readability is essential. (though there are some weird places where the purpose is exactly the opposite, but that's an edge case)
If the form is so large that you don't know if your submit button is inside the form or not, simply stating type="submit" will give you a clear idea that it's inside a form.
There are many more examples in coding that you simply write "unnecessary" code for documentation purpose, such as naming a function catchButterfly() instead of f().
In general, it's always a good practice to be VERY verbose and explicit about every piece of code you write because it's just a few extra lines of code but the advantage is HUGE.
<button type="submit"> and <button> are the same thing.
The reason is the default type of a button is submit.
So you can leave it off if you want. If you do not want the button to submit the form, then you want to use type="button".
It is explained in the docs on MDN or www.w3.org
It works fine when removed because submit is the default type :
https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type
I need to debug missing data in some from POSTed to the server and after reading lots of tutorials and following other examples about that aspect, I still can't find my problem. The use case is pretty simple in theory: Have one form with two submit buttons to trigger different implementation on the server side.
According to lots of tutorials and examples, the submit-buttons should send their name if they have a name-attribute, while values should not be sent at all. The naming thing seems to differ according server side programming languages, sometimes it's some_name and sometimes some_name[], but that doesn't make any difference for me currently.
My problem is that whatever HTML I create, inputs of type submit are never part of the POSTed data. OTOH, pretty much the same HTML as button works as expected: If the button is used to submit the form, its name and even value are part of the POSTed data. When other inputs are clicked to submit, no names of any submit-input are available in the data.
So, with the exact same form, reaching the exact same endpoint, using same browser etc., the following DOES NOT provide any hint to the clicked button in the POSTed data:
<input type="submit"
name="foobar input"
value="foobar input"
title="foobar input"
/>
While the following OTOH does:
<button type="submit"
name="foobar button"
value="foobar button"
title="foobar button">
foobar button
</button>
So, should the input work the same way like the button does in theory? Or is the HTML wrong and I'm not able to spot the error? Sending the form itself works in both cases, though. So the browser obviously knows about the submit-input and its purpose.
Or have something changed the last years in modern browsers and submit-inputs are not part of POSTed data at all anymore for some reason? I can't remember the need to have multiple submits on a form for years.
How does a minimal example using a submit-input sending its name look like and tested to work for you? And in which browser? I tested an up-to-date Chromium based Opera and IE 11 and neither did include submit names.
Thanks!
OPINION: I would personally NEVER use more than one word in the name of a submit button
FACT: If that word is "submit" or you have id="submit" then you will not be able to programmatically submit the form using .submit()
FACT if you have script that disables the form element, it will not be sent to the server
Conclusion
In my experience and according to documentation - If you have the following
<form>
...................
<button type="submit"
name="whatever you want here but I would only use one name and NOT submit">Whatever</button>
</form>
OR
<form>
...................
<input type="submit"
name="whatever you want here but I would only use one name and NOT submit" value"Whatever">
</form>
your server will receive the button as name=value in the POST array if method = post and in the GET if nothing or method=get AND in the REQUEST array in either case (assuming PHP)
TEST PAGE
<form method="post" action="testsubmit.php">
Did not work according to OP<br/>
But it actually DOES work if not disabled from elsewhere <br/>
<input type="submit"
name="foobar input"
value="foobar input"
title="foobar input"
/>
<hr/>
<input type="text" name="sentField" value="This WILL be sent to the server" style="width:300px"/>
<hr/>
<input type="text" name="disField" disabled value="This will NOT be sent to the server" style="width:300px"/>
<hr/>
Does work
<button type="submit"
name="foobar button"
value="foobar button"
title="foobar button">
foobar button
</button>
</form>
I tried to make button it does not work it is it's supposed to say submit but that it just has a square.I not doing css yet to style my online video instructor has not talked yet so i need help for to have button
on my website and the say submit i do not was wrong did the same i think?? please help me 🥺🥺🥺🥺🥺🥺🥺.
I assume you not only want the button to display "submit" but to trigger something when it is pressed, i.e. submit data to the web server. The straightforward way would indeed be to use a form:
<form action="[NAME_OF_SERVER_SCRIPT]">
...
<input type="submit" value="submit">
</form>
I need a simple html code so that a visitor to my website can type in a textfield what website they would like to visit next and click GO and they are taken there.
I can't seem to find how to do this anywhere. Can't even find any websites that have a similar code.
Here is a quick implementation that will set it based on the text field value. I would suggest putting in validation and much more.
function goToUrl(form){
window.location = form.url.value
}
<form onsubmit="goToUrl(this)">
<input type="text" id="url" />
<button type="submit">Go to URL</button>
</form>
Short version:
How can I have my form's button label text differ from the value submitted to the server without using the <button> tag?
Long version:
I wanted to have the text that appeared in a button in a form to be different than the value submitted in the query string. So, I looked around, and came across this approach...
<button name="method" type="submit" value="repackage">Update Config</button>
...and that worked on IE9 on one of my laptops and I was happy. The user saw "Update Config" and the server received method=repackage in the query string.
Then I brought this app to work and ran it on a workstation, also with IE9. But something had gone wrong. The user still saw "Update Config", but the server now received method=Update%20Config in the query string.
So I investigated some more. I found that www.w3schools.com recommmended not using a <button> tag in a form. They say: "If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form" in this article. This seems to be what I am experiencing.
So I looked some more, and found lots of conflicting information about the right way to do this. For example here is a Stack Overflow post that asks exactly this question, but the accepted answer is to use the <button> tag. I can say from experience and research that this is not a reliable approach.
For newcomers: With some CSS this works like a charm as of September 2017:
<form>
<label style="padding:5px; cursor:pointer; border:solid 1px; border-color:#ccc">
<input style="display:none" type="submit" name="method" value="repackage">
<span>Update Config</span>
</label>
</form>
If there's no other way try this:
Use an image button, instead of button. An image button will work as ordinary submit button, but you create an image of the desired button text (no one can change your text then).
<input type="image" src="http://images.webestools.com/buttons.php?frm=2&btn_type=31&txt=Update+Config" name="method" value="repackage">
This works as well. Manipulate the appearance using the bootstrap button classes.
<label class="btn btn-primary">
<input class="d-none" type="submit" name="method" value="repackage">
Update Config
</label>