Submitting multiple inputs in one form? - html

I'm currently trying to create a webpage where you can submit multiple inputs within a single form with one button.
This is the code:
<form id="additem" name="item" action="add_item.php" method="get">Item Name:
<input type="text" name="name">
<br>
<br>Amount:
<input type="text" name="amount">
<br>
<br>Description:
<input size=1 00 type="text" name="desc">
<br>
<br>
<select>
<option value="picture">Picture</option>
<option value="sculpture">Sculpture</option>
<option value="painting">Painting</option>
<option value="quilt">Quilt</option>
<option value="clothing">Clothing</option>
<option value="Pottery">Pottery</option>
</select>
<br>
<br>
<?php session_start(); if(isset($_SESSION[ 'upload_pic'])==t rue){ echo
"<img src =".$_SESSION[ 'upload_pic']. "><br>"; unset($_SESSION[ 'upload_pic']); }
?>
<form action="upload_file.php" method="post">Image:
<br>
<label for="file">Filename:</label>
<input type="file" name="file" id="file">
<br>
<input type="submit" name="submit" value="Upload">
</form>
<br>
<br>
<input type="submit" name="add" value="Add">
</form>
Currently when I click the "Add" button, it does nothing, doesn't load, doesn't refresh. And I'm not sure why. If anyone has any suggestions about why that happens, that would be awesome.

Do not use nested forms. Instead use the attribute enctype as follow:
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="Submit">
</form>

for file type you need to set the content-type to multipart/alternative only then can you upload. Also I do not see any name assigned to select

Form in Form is not acceptable, you can do that, you can't nest forms like this do them side by side but not nested

From the MDN form docs:
Note: It's strictly forbidden to nest a form inside another form.
Doing so can behave in an unpredictable way that will depend on which browser
the user is using.
So remove the nested form and add the eventual php code from upload_file.php into add_item.php.

Related

How can I make a submit button using html for several form action?

Can I use just a single <input type="submit" value="submit"> but for several form actions ...
Say if I type
<form id="form1" action="action1.py" method="get">
<input type="text" name="name">
</form>
<form id="form2" action="action2.py" method="get">
<input type="text" name="random">
<form>
then I want to use just a single <input type="submit" value="submit" or if there is another way to do it? Can anyone please explain me how to do it?

form action parameter not working

Test
<br><br>
<form action="index.php?page=test">
<input type="text" placeholder="enter text"> </input>
<button type="submit">Send</button>
</form>
Why is the link working correctly while the form gets me the url http://example.com/index.php? in the adress bar of the browser?
Every parameter i define in the action attribute is getting cut off
you have to use this code.
Test
<br><br>
<form action="index.php" method="get">
<input type="text" placeholder="enter text"> </input>
<input type="hidden" name="page" value="test">
<button type="submit">Send</button>
</form>
You are submitting a GET form. The data in the form will be expressed as a query string and replace the one in the URL in the action.
Move the data from the query string into hidden inputs inside the form.

How to submit a form after submitting other form?

I'm working with html and jsp, and I'm trying to do a custom search that performs the same action as that of a catalog search that is on another page. I have two pages:
There is a page (outside my app, so I can't modify at all) that is a catalog search:
<form name="formulario" id="formulario" method="post" action="Main">
<input tabindex="116" size="55" id="txtSimpleSearch" name="txtSimpleSearch">
<input value="Search" type="submit" name="btnSearch" tabindex="102">
</form>
I have to create a page in my app that works as a custom search in that catalog seach. So I created this form:
<form method="post" rel="external" action="http://example.com/pages/SimpleSearch" target="_blank">
<fieldset>
<label for="txt"><span class="label">Text:</span>
<input name="txtSimpleSearch" id="txt" type="text"></label>
</fieldset>
<div>
<input class="boton" value="Search" type="submit">
</div>
</form>
The action of the second form (my page) goes to the catalog search, with the value of txt input, but it isn't do the search on the first page (the catalog search page not execute the submit of the form formulario).
Maybe I could get the form of the catalog search page and do the submit using Javascript? Or isn't possible?
Thanks.
You'll have to use the same name attributes for your input, so the page will be able to get the search value.
<form method="post" rel="external" action="http://example.com/pages/SimpleSearch" target="_blank">
<fieldset>
<label for="txt"><span class="label">Text:</span>
<input name="txtSimpleSearch" id="txt" type="text"></label>
</fieldset>
<div>
<input class="boton" value="Search" type="submit" name="btnSearch">
</div>
</form>
change input type='submit' to type='button' , add attribute to the input onclick='actionSubmitForm1()' then use javascript submit
document.forms["myform"].submit();
then submit you'rs second form
document.forms["myform2"].submit();

How to set button's label without changing value in post

I've got this code in html:
<form action="/login/" method="post">
<input type="text" name="login">
<input type="text" name="pass">
<input type="submit" value="login" name="type" >
<input type="submit" value="register" name="type" >
</form>
When I submit this form it sends a get request with the value of the field of the button clicked. However I want to change the label of the button without changing the value sent in get. Is it possible or not?
Use a button element:
<button type="submit" name="type" value="register">Sign up for an account</button>
Note that old IE has problems with this.

Two submit buttons

I have two forms on a same page and I have two submit buttons...so how do I check if the user filled out the first form before clicking the submit button on second form? The first form posts the data to php page which presents on a same page as the html and the second form sends the data to another PHP page with thank you message....I mean how do force the user to finish the first form before clicking the submit button on the second form? if the user hits the submit button on the second form, the form directs to thank you page with out checking if the user finished the first form..how do I stop that?
<html>
<body>
<form action="" method="post" enctype="multipart/form-data">
<input type="hidden" name="submited" value="true" />
<label for="file">Choose Photo:</label>
<input type="file" name="file" onchange="file_selected = true;" required>
<input type="submit" value="Submit" name="submit">
</form>
<form action="Send.php" method="post">
First Name:<input type="text" name="fname" required><br>
Last Name:<input type="text" name="lname" required><br>
Choose Username:<input type="text" name="username" required><br>
Age:<input type="text" name="age" required><br>
<input type="submit" value="Submit" name="submit">
</form>
You can change the name field and then access the value on the server side.
For example:
<input type="submit" value="Submit" name="submitOne" />
If you're using php you could use something like this:
if(isset($_POST['submitOne'])){ /* first one pressed */ }
There are also some other options like using jQuery or javascript to validate first.
Try: http://bassistance.de/jquery-plugins/jquery-plugin-validation/