I'm afraid I'm missing something basic about html/angular forms. I've created the following form. When I refresh, even if no user data is entered, I get a warning that I entered data into my page: "the page that you're looking for used information that you entered...".
I'm not worried about surpressing this prompt generally, but only when a user actually doesn't enter any data.
Thanks so much!
<form id="contactForm">
<input type="text" name="email" placeholder="not required"/>
<select class="form-control" name="category">
<option value="wrong">Wrong data</option>
<option value="feedback">Feedback</option>
<option value="inquiry">General Inquiries</option>
</select>
<textarea name="body" class="form-control" placeholder="Let us know how to improve"></textarea><br>
<input type="submit" ng-click="submit = 'true'" value="submit" /><br> <span ng-show="submit == 'true'" class="feedback">Thank you! We'll respond to your comments soon.</span>
</form>
Related
<form>
<p><strong>Would you like to receive the Stay Safe newsletter</strong>
<select name="newsletter">
<!-- dropdown box allows user to select if they want to receive newsletter-->
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</p>
<p><textarea name="message" id="address" placeholder="Address"></textarea></p>
<p><input type="email" name="email" placeholder="Valid email"></p>
<button class="smallButton" type="submit">Send</button>
<!-- submission button to send the form-->
</form>
I need help with coding my form what i want it to do is only show
<p><textarea name="message" id="address" placeholder="Address"></textarea></p>
<p><input type="email" name="email" placeholder="Valid email"></p>
<button class="smallButton" type="submit" >Send</button><!-- submission button to send the form-->
based on them selecting yes in the drop down box but unsure how to do this any help would be greatly appreciated
I would use onchange and javascript to solve your question. Here is some documentation:
<select name="newsletter" onchange="newsletterChanged()">
then you can add javascript to hide or show the html you wish to:
function newsletterChanged() {
//do work whenever newsletter changes.
};
Hope this helps you on the way to solve your question. Happy coding :-)
Is there a way to invalidate a form if value="0" in my select tag is chosen? The reason I did this is to have a default select option show up before a user see's anything.
But even if a user doesn't choose anything, the form is valid.
<form name="add_task_frm" ng-submit="!add_task_frm.$valid || functiontoUse()" novalidate>
<input type="text" ng-model="name" required />
<select ng-model="action" required>
<option value="0" selected disabled>Choose an Action</option>
<option value="description">See Description</option>
<option value="view">View</option>
</select>
<button type="submit">Submit</button>
</form>
I think you could just remove the value from the first option this should make it invalid if the user does not select anything. However I would recommend changing this implementation to use ng-options.
https://docs.angularjs.org/api/ng/directive/ngOptions
I'm trying to implement a datalist element with a built-in fallback for older browsers, as demonstrated on the w3 datalist element spec:
<form action="http://example.com/" method="GET">
<label>
Sex:
<input name="sex" list="sexes" />
</label>
<datalist id="sexes">
<label>
or select from the list:
<select name="sex">
<option value="" />
<option>Female</option>
<option>Male</option>
</select>
</label>
</datalist>
<input type="submit" />
</form>
However, the combination of an <input type="text"> and the datalist both with the same name (required for the fallback) cause the "sex" parameter to appear twice in the query string.
Form submit didn't work in SO code snippet, so see this fiddle instead. When submitting "Male" the network tabs shows a request on submit that says http://www.example.com/?sex=male&sex=.
This causes some wonky behavior in the backend code (that I can't modify right now unfortunately). How can I prevent the double parameter while keeping a fallback?
I ended up solving it by setting a single <input type="hidden"> with the "sex" value instead of using the select and input type="text" as a source for the value. On change of either of the latter, I copy the value to the hidden input.
I happened to have jQuery already included so here's the solution I used:
$('#myForm input, #myForm select').change(function() {
$('#sex').val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://www.example.com/" method="GET" id="myForm">
<label>
Sex:
<input list="sexes" />
</label>
<datalist id="sexes">
<label>
or select from the list:
<select>
<option value="" />
<option>Female</option>
<option>Male</option>
</select>
</label>
</datalist>
<input type="hidden" name="sex" id="sex" />
<input type="submit" />
</form>
I'm still open to better solutions.
I don't know if you're still looking for a solution or if my answer even supports older browser, but it was exactly what I was looking for.
I used selectize.
$('#sex').selectize({create: true});
<select id="sex">
<option value="" />
<option>Female</option>
<option>Male</option>
</select>
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.
I have the following HTML form in my HTML page. The problem is that the submit button is not responding (I cannot click on it.) I discovered that this problem happens only if the dropdown is present inside the form. If I comment out the dropdown (#jobtype) it works fine. Can any one please tell what is wrong here?
<form action="register.php" name="form1" method="post" onSubmit="validate()" >
<select id="jobtype">
<option value="" disabled selected>--Select-- </option>
<option value="11" >All</option>
<option value="1" >Contract</option>
<option value="2" >Full Time</option>
<option value="3" >PartTime </option>
<option value="0" >Other</option>
</select>
<input type="text" id="others" placeholder="Please specify"/>
<input type="text" name="email" placeholder="e-mail address">
<input type="submit" name="submit" title="GO" value="GO" >
</form>
I have verified your code in IE8 and it works fine for me...
the submit button functions though the drop down exists...
please check once again...