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...
Related
As far as I know, ios Chrome is the only browser where my datalist is doing this. Any other browser or device combination seems to work. I know there used to be support issues for datalists but not seeing anything recent that explains the issue I am having. The datalist only does this when the input box receives focus.
<div>
<label></label>
<input id="plist" class="form-control" type="text" list="p" name="p" value="A">
<datalist id="p">
<option>S</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>Aggron</option>
<option>E</option>
<option>F</option>
</datalist>
</div>
IOS requires the value property
<div>
<label></label>
<input id="plist" class="form-control" type="text" list="p" name="p" value="A">
<datalist id="p">
<option value="S">S</option>
...
</datalist>
</div>
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 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>
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.