<body>
<form action= "http://norton.open.ac.uk/reflect.php" method= "post" name= "form1">
<h1> Book Details: </h1>
<select name= "dropdown">
<option value= "Books" selected>Books</option>
<option value= "Magazines">Magazines</option>
<option value= "Journals">Journals</option>
<option value= "Newspapers">Newspapers</option>
<p>
<b>Book name:</b> <input type = "text" name = "book_name" /> </p>
<p>
<b>Author:</b> <input type = "text" name = "author" /> </p>
<p>
<b>Publication Year:</b> <input type = "date" name = "publication_year" /> </p>
<p>
<b>ISBN Number:</b> <input type = "number" name = "isbn_number" /> </p>
<input type= "submit" name= "submit" value= "Submit" />
</form>
I'm pretty sure something is wrong with the code, I just can't pinpoint what exactly it is. The output is not what I want.
So there are a couple of things that you will need to do to get this to work...
<input type="submit" />
you could use an id if you need to set some sort of submit in JS.
not sure 100% what you have going here but your form could look something like this:
<form action="http://norton.open.ac.uk/reflect.php" id="form1">
<div>
<label for="book">Book Name:</label>
<input type="text">
</div>
<div>
<label for="author">Author:</label>
<input type="text">
</div>
<div>
<label for="publication">Publication Year:</label>
<input type="text">
</div>
<div>
<label for="isbn">ISBN Number:</label>
<input type="number">
</div>
<div>
<input type="submit">
</div>
</form>
Make sure your values inside HTML element tags are: type="" vs. what is in your current state type= "". no need for spaces in between.
Also, for future reference please state a little more about what you are trying to accomplish. If you are submitting a form like this and you are using JS please specify what the current output is and what your desired output would be. It could also help if you supplied some research you have done to solve the problem.
Hope this helps you out!
Related
I created a button in html file that move to page with form:
<a class="btn goToProfile" href="{{ url_for('new_meeting', dog = dog[0] ) }}">Click here to schedule a meeting</a>
I add the parameter dog to the GET request
http://127.0.0.1:5000/new_meeting?dog=123
When I move to the new page I have a form:
<form action="/favorites/add_meeting" method="post">
<label for="time">Time:</label><br>
<input type="datetime-local" id="time" name="time">
<br>
<br>
<label for="place">Place:</label><br>
<input type="text" id="place" name="place"><br>
<br>
<label for="place">Dog ID:</label><br>
<input type="text" id="dog" name="dog" value="1" readonly><br><br>
<br>
<input type="submit" value="Submit">
</form>
How can I extract the parameter from the URL and add this to the value in the input tag?
You can find here about how to get query parameters with JavaScript
When you have parameters let's say inside dogName variable. You can change form input field with id dog like this:
document.getElementById("dog").value = dogName
I'm working on a form where the user first selects "USA" or "International" on a radio button. Depending on the country of choice, the telephone input field should require either a 10 digit US number or else an international phone number with a different pattern.
I'm using native HTML validation with the required attribute and a regex pattern. At the moment I have placeholder, pattern, and title attributes for a US number.
<form>
<div>
<fieldset>
<legend>Country</legend>
<p>
<input type="radio" name="country" id="usa" value="usa" required />
<label for="usa">USA</label>
</p>
<p>
<input type="radio" name="country" id="int" value="int" required />
<label for="int">International</label>
</p>
</fieldset>
</div>
<div>
<label for="telephone">Telephone</label>
<input
type="tel"
name="tel"
id="tel"
placeholder="123 456 7890"
required
pattern="(?:\d{1}\s)?\(?(\d{3})\)?-?\s?(\d{3})-?\s?(\d{4})"
title="A valid US 10 digit phone number is required."
/>
</div>
<button id="submit" type="submit">Submit</button>
</form>
How could I implement the placeholder, pattern, and title for the international number?
I could have two divs in the HTML for each and display them with JS depending on the radio button selection. Or I could leave the HTML as it is and insert the HTML or the values of the attributes for the international selection with JS if it is selected. But I'm wondering if there is a better way that will work or at least be acceptable if JS is disabled or not available.
Since you've gone this way, you may attach click-handler to your radio buttons, so that it will modify your input field attributes in the necessary way
<form>
<div>
<fieldset>
<legend>Country</legend>
<p>
<input type="radio" name="country" id="usa" value="usa" required />
<label for="usa">USA</label>
</p>
<p>
<input type="radio" name="country" id="int" value="int" required />
<label for="int">International</label>
</p>
</fieldset>
</div>
<div>
<label for="telephone">Telephone</label>
<input type="tel" name="tel" id="tel" disabled/>
</div>
<button id="submit" type="submit" disabled>Submit</button>
<script>
const phoneInput = document.querySelector('#tel');
const submitButton = document.querySelector('#submit');
[...document.querySelectorAll('input[name="country"]')].forEach(radio => {
radio.addEventListener('click', function(){
phoneInput.disabled = false;
submitButton.disabled = false;
if(this.value == 'usa') {
phoneInput.setAttribute('placeholder', '123 456 7890');
phoneInput.setAttribute('pattern', 'xyz');
phoneInput.setAttribute('title', 'A valid US 10 digit phone number is required.');
}
else if(this.value == 'int'){
phoneInput.setAttribute('placeholder', '+1234567890');
phoneInput.setAttribute('pattern', 'abc');
phoneInput.setAttribute('title', 'International phone number format is required.');
}
});
});
</script>
</form>
I have a noob question.
i have a form with a text field. If i type something in, and push enter, no result. If i type something in, and push the button, i get the result i want. Can someone help me fix this - this is written in vue.js
<div class ="well">
<form class="form-inline" onsubmit="searchName">
<h1><label>Enter Search</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
</form>
</div>
<input id="clickMe" type="button" value="clickme" v-on:click="searchName" />
You may add an event in your text field.
<input
type="text"
name="name"
class="form-control"
v-model="search"
v-on:keyup.enter="searchName"
/>
Or add a submit event in your form
<form
class="form-inline"
v-on:submit.prevent="searchName"
>
put your button inside the <form> tag and change the button type to submit:
<div class ="well">
<form class="form-inline" #submit.prevent="searchName">
<h1><label>Enter Search</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
<input id="clickMe" type="submit" value="clickme"/>
</form>
</div>
EDIT
instead of onclick event in the button, use #submit.prevent in the form.
I am having problems trying to pass values to two different forms on the same page. The page is populated with 16 radio buttons (which I’ve turned into boxes for display reasons) and they all hold a value (e.g. 001). Both of the forms jobs are to somehow grab the active/selected radio button value and post it to a PHP file so database changes can be made. Instead of a submit button, I am using an anchor to pass a JavaScript submit function. I have tried having
both forms cover the whole page but still didn't have any luck.
I’ll post some code below to help you understand.
PS. If you need more code to understand, I can post it to pastebin.
<li>
<form id="form_ready" method="post" action="../backend/screen.php">
<input type="hidden" name="screenid" value="" />
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_ready').submit();">READY</a>
</form>
</li>
<li>
<form id="form_c" method="post" action="../backend/screen.php">
<input type="hidden" name="status" value="" />
<input type="hidden" name="pickupid" value="document.activeElement.value;" />
<a onclick="document.getElementById('form_c').submit();">COLLECTED</a>
</form>
</li>
</ul>
<div id="content">
<div id="container">
<div id="table">
<div id="tr1">
<div id="td1">
<input type="radio" name="pickup" id="1" value="001" />
<label for="1"> <span>001</span> </label>
</div>
<div id="td2">
<input type="radio" name="pickup" id="2" value="002" />
<label for="2"> <span>002</span> </label>
</div>
<div id="td3">
<input type="radio" name="pickup" id="3" value="003" />
<label for="3"> <span>003</span> </label>
</div>
<div id="td4">
<input type="radio" name="pickup" id="4" value="004" />
<label for="4"> <span>004</span> </label>
</div>
To answer the suggestion in the comments and use only one form, here's how to grab the value from the selected radio button:
var inputs = document.getElementsByTagName('input');
var valueSelected;
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) valueSelected = inputs[i].value;
}
valueSelected will contain the value of the selected radio.
If you ever need to reduce the type to "radio" only for some reason, you can check an input type with inputs[i]['type'] === 'radio' in the for loop.
The best would probably still be to set a class for your "radio" inputs, it will allow the loop to be more specific, hence a more efficient code, for example:
<input type="radio" class="myRadio">
and in JS: var inputs = document.getElementsByClassName('myRadio');
I am not able to add a new input box after the onclick event is called and is there way to disable the select options after the input box appears? I am sorry for such a noob question but I am at the dead end here, been trying this for an hour. Please link me to a place where I can easily learn JS with examples.
<script>
function funcGet(val)
{
if(val=="Create new category")
{
var element = document.createElement("input");
element.setAttribute("type", "input");
element.setAttribute("name", "new_cat");
var foo = document.getElementById("cat");
foo.appendChild(element);
}
}
</script>
<div name="cat">
<form method="post" action="">
<input type="text" placeholder="Enter a topic name" name="word"><br/>
<select name = "category" onchange="funcGet(this.value);">
<?php
displayCat();
?>
</select>
</div>
<select name = "site_type">
<?php
displaySitetype();
?>
</select>
<input type="submit" value="Submit data">
</form>
Try changing <div name="cat"> to
<div id="cat">
.getElementById only works on IDs,
as in
document.getElementById("cat");
If you want to leave <div name="cat"> you should use .getElementsByTagName[0] instead.
As foir a a link to learn JavaScript by example, I recommend the W3Schools JavaScript Tutorial, as they let you try out code as you learn it on their website. Once you become more familiar, you can reference the Mozilla Developer Network.
Here
var foo = document.getElementById("cat"); is giving null
There is no element exist with id cat
Error is:TypeError: foo is null
Change this:
<div name="cat">
To this:
<div id="cat">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Untitled Document
</title>
<script>
function generateRow() {
var d=document.getElementById("div");
d.innerHTML+="<td><input type='text'<td><input type='text'<td><input type='text' name='food'name='food'name='food'name='food'>";
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input name="food" type="text" id="food" />
</label>
<td>
<input name="food" type="text" id="food" />
</td>
<td>
<input name="food" type="text" id="food" />
</td>
<div id="div">
</div>
<td>
<input type="button" value="Add" onclick="generateRow()"/>
</td>
<td>
<label>
<input type="submit" name="Submit" value="Submit" />
</label>
</td>
</form>
</body>