My html code is
<form action="http://localhost:5000/fileUpload" method="POST" enctype="multipart/form-data">
<div class="dropzone">
<div class="fallback">
<input id="fileContent" name="Content" type="file" multiple />
</div>
<div class="dropzone">
<div class="fallback">
<input id="fileStyle" name="Style" type="file" />
</div>
</div>
<input class="btn btn-primary" name="submit" type="submit" value="Submit"></button>
</form>
and the div tag is does not inherit the drag and drop properties until and unless there is some value set to the action attribute.
basically i want two input to take two different files that is why i want two drag and drop boxes or inputs
You must set some value to the action attribute. The action attribute specifies where to send the form-data when a form is submitted. So if you don't specify the action attribute, the dragged and dropped files definitely wouldn't find any destination after submit button is clicked.
If that is not your main problem you might wanna go through this link about Plupload library for using multiple dropzones.
Related
I'm developing MVC application where I want to use button tags as it is the best tag as far as I know.
Can I use multiple HTML Button tags with <button type="submit">...</button>.
If you use more than one type=submit, all send the same parent form, but you can put differents submit buttons in differentes forms in the same page.
Both buttons will call submit action, example:
<form>
<input required type="text">
<button type="submit">submit</button>
<button type="submit">submit</button>
</form>
If u will not use any type, submit action will be called to, example:
<form>
<input required type="text">
<button>submit</button>
<button>submit</button>
</form>
If button will have type 'button' then submit action will not be called, example:
<form>
<input required type="text">
<button type="submit">submit</button>
<button>submit</button>
<button type="button">not</button>
</form>
You can use multiple button tags with type="submit" in a single form tag, only if you want that form is submitted after clicking on that button. And you can differ between those buttons by giving different names to them.
I have an <a> link which will only open if I right click it and click on "open in a new tab. If i just click it normally it just puts a "?" after the rest of the link, like this: "http://localhost:8011/login.html?".
Code:
<div class="login-page">
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
<button class="login">login</button>
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
If i put target="_self" it still doesn't work. The two files are definitely in the same folder.
Your HTML is invalid. It is forbidden to put a <button> inside an <a>. Use a validator.
The effect you see is due to error recovery reacting badly and your clicks being handled by different elements.
will only open if I right click it and click on "open in a new tab
This is what happens when you right click on the <a> element.
If i just click it normally it just puts a "?" after the rest of the link
This is what happens when you submit a form using a submit button (and the form has no successful controls in it, which is the case here because none of your controls have names).
If you want a link, then use a link and only a link. Get rid of the <button> element.
If you want something that looks like a button then first think about what message you are sending to the user. Buttons do things. Links go places. Giving the user a visual signal that they are doing something is likely to be wrong.
If you still want a link that looks like a button, then style it with CSS.
That said, having a link marked Login which doesn't submit the form is just confusing. You should probably:
Keep the <button>
Get rid of the <a>
Give your form controls name attributes
Make the form use method="POST"
… and then write server side code to process the data so the login form can be used to login to the site.
You can change your HTML form to be as follows so that the form is submitted when login is clicked:
<div class="form">
<form class="login-form" method="POST" action="index.html">
<!-- user inputs -->
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<!-- your submit button -->
<input type="submit" name="submit" value="login">
<!-- your other link -->
<p class="message">Not registered? Create an account</p>
</form>
</div>
This approach will be better than the current one for creating a login form.
This way you still have your button that will redirect to index.html without having to use a messy approach with <a> and <button>.
It's because you've a button, and it's trying to submit the form.
Try using bootstrap and give the <a> tag some classes, like this:
<div class="login-page">
<div class="form">
<form class="login-form">
<input type="text" placeholder="Username" />
<input type="password" placeholder="Password" />
login
<p class="message">Not registered? Create an account</p>
</form>
</div>
</div>
Or just give style to your <a> by css, but if you use the button, then you're submitting the form instead clicking the link.
EDIT: you could also wrap the <a> inside the button, so the link on the <a> will execute first instead of submitting the form
<button class="login">login</button>
im very new to html and am making a basic rock paper scissor page where you can select the image to choose your action. My issue is that it always selects the last option in the html.
<form action="/result <%#choice = "rock"%>">
<div id="rock_button" class="slideRight">
<input type="image" src="http://i.imgur.com/XT41ZXk.jpg" alt="Rock";>
</div>
</form>
<form action="/result <%#choice = "paper"%>">
<div id="paper_button" class="slideUp">
<input type="image" src="http://i.imgur.com/r1GckhD.jpg" alt="Paper";>
</div>
</form>
<form action="/result <%#choice = "scissors"%>">
<div id="scissors_button" class="slideLeft">
<input type="image" src="http://i.imgur.com/ttUlD5y.jpg" alt="Scissors";>
</div>
</form>
So from the above code, #choice is always set to "scissors". regardless of which picture is clicked on. ive tried putting onclick="<%#choice = "paper"%>" within th input, without any luck and creating one large form for all three picures but nothing has worked. Thanks for any help provided.
The choice variable is only used within the current page: Before any of the images is even clicked.
Use one form. Use buttons. Give them a name and a value. Read the form data in the server side program that acts as your form handler.
<form action="/result">
<button id="rock_button" class="slideRight" name="choice" value="rock">
<img src="http://i.imgur.com/XT41ZXk.jpg" alt="Rock">
</button>
<button id="paper_button" class="slideUp" name="choice" value="paper">
<img src="http://i.imgur.com/r1GckhD.jpg" alt="Paper">
</button>
<button id="scissors_button" class="slideLeft" name="choice" value="scissors">
<img src="http://i.imgur.com/ttUlD5y.jpg" alt="Scissors">
</button>
</form>
Then, in the program that handles the /result URL, you would do something along the lines of:
my $choice = $c->request->params->{choice};
The specifics depending on your choice of server side language.
I have one page with two separate forms. Most input fields are required. When I click the submit button on the second form, it asks me to fill out the required fields in the first form.
How do I make sure that it only validates the form in which I clicked the submit button?
<form method="post" action="index.php" name="orderQuick" id="orderQuick">
<input type="text" name="street" id="street" required>
<button type="submit" name="submitBtn" id="submitBtn">Submit</button>
</form>
<form method="post" action="index.php" name="order" id="order">
<input type="text" name="street2" id="street2" required>
<button type="submit" name="submitBtn2" id="submitBtn2">Submit</button>
</form>
I think it is because you have not closed <button> tag so it is considering both input type in one form. Close <button> tag.I think it will solve your issue.
I think you will need to use the jqueryvalidation plugin: (http://jqueryvalidation.org/valid/)
Using this plugin, on the click of the respective submit buttons, you just need to call the method:
$("#orderQuick").valid();
and
$("#order").valid();
This should solve your issue.
I have several sections in my page that I need to include under the same form tag, but doing so breaks the HTML. For example:
<div>
<form name="firstform">
<input type="text" name="input1" />
<input type="text" name="input2" />
<input type="text" name="input3" />
</div>
<p>bla bla</p>
<div>
<form name="secondform">
<input type="text" name="one" />
</form>
<input type="text" name="input4">
</form>
So basically I want to submit the form firstform but in a way that will include input4 but without submitting secondform?
EDIT:
I have a pretty long page with a lot of inputs, in the middle of the page I have a different form that is used to allow file upload which I want to keep where it is in the page, however, after that section I have a continuation of the first form. so I have the first form, then another form with the file upload and then the rest of the first form.
If you want to have multiple forms, use one form tag with multiple submit buttons. Give to the buttons name and value and its time a user submit the form, chech in the back end which button has been pushed.
You could simply add an html button with an onClick event that calls a function to mimic a nested form. If the second form's onSubmit function is pure javaScript this could be a quick cut/paste. If your second form is communicating with a server you'll have to jump into some AJAX.