<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 :-)
Related
I’m using the FormSubmit API.
When a person fills out the form and submits it, whatever they have filled out doesn’t show and I just receive an empty form.
<section id="form-section" class="fade-contact">
<h2 id="form-title" class="fade-contact">Get in touch</h2>
<form action="https://formsubmit.co/8421d4ce6448fbeda493e2c8ce639a8e" method="POST" id="form">
<!-- <input type="hidden" name="_captcha" value="false"> -->
<!-- <input type="hidden" name="_autoresponse" value="Thank you for getting in touch!"> -->
<div class="name-email fade-contact">
<input type="text" name="name" placeholder="YOUR NAME" id="form-name" required>
<input type="email" name="email" placeholder="YOUR EMAIL" id="form-email" required>
</div>
<input type="text" name="textarea" placeholder="YOUR MESSAGE" id="form-message" class="fade-contact" required>
<button type="submit" class="btn submit-btn fade-contact">submit</button>
</form>
</section>
I corrected the name attribute to not use 2 of the same values but still it doesn’t work!
Here is an image of the formsubmitAPI website instructions
screenshot of formsubmitAPI guide
btw I hosted with netlify just incase that helps
I FIXED IT!!!!!!!
Turns out I had some JavaScript to clear the input values after submission and that was somehow affecting the form. I guess the input values were clearing before the form was submitting hence I was getting blank emails.
I just commented it out for now and will look into it later.
But…..I fixed it!! I’m so happy!
Thank you to everyone that helped
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 am having problem with angular validation.
this one does'nt work...
<input type="text" ng-model="text1" name="text1" required>
<span ng-show="text1.$error.required">Please enter something!</span>
but this works:
<form name="myform">
<input type="text" ng-model="text1" name="text1" required>
<span ng-show="myform.text1.$error.required">Please enter something!</span>
</form>
is it possible to somehow correct the first one without placing it inside a form?
thanks
You can use the "ng-form" directive if you really dont want to add a form tag.
<body ng-controller="MainCtrl">
<div ng-form="myForm">
<input type="text" required ng-model="user.name" placeholder="Username">
<button ng-click="doSomething()" ng-disabled="myForm.$invalid">DO</button>
</div>
</body>
example
As far as I know, no, it is not possible. The FormController is what handles the states of each form element, so you need a reference to it in order to check the validation state.
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.
Hey guys, I have a form and there are 4 buttons possible for the user to click to submit. One searches for everything, another for users, another for clips, and the fourth for topics. Now my question is that the buttons has name=category and value=(type of search) and what I intend to do is send the user to the search result page with the category=value in the address bar(using GET method). This is working fine on firefox but it isn't working at all using google chrome. Any help? Here's the code:
<form method="get" action="search.php" name="search" onsubmit="return Validate();">
<input type="text" class="searchit" title="Search..." name="search" id="search" /><br/>
<label><span> </span> <input name="submitter" type="submit" value="Search" class="searchsubmitButton" id="submitter" /></label>
<span class="searchfor">Search for:</span>
<label><span> </span> <input name="c" type="submit" value="Users" class="searchsubmitButton" id="submitter" /></label>
<label><span> </span> <input name="c" type="submit" value="Clips" class="searchsubmitButton" id="submitter" /></label>
<label><span> </span> <input name="c" type="submit" value="Topics" class="searchsubmitButton" id="submitter" /></label>
</form>
because your input fields are inside the <label></label> tags ?
Take a look at this thread: Safari and Chrome back button changes hidden and submit values in forms
The easiest solution I can think of is for you to create a hidden field called "c". Then, when the submit button is clicked, set the value (Users, Clips or Topics) in "c" hidden field first before submitting the form.