I'm not sure why my additional input information is not being submitted when the form is submitted. I have applied what I have found in a similar post to insert additional input before the form is submitted. Unfortunately, only "quesiton1answers" is submitted. Additional "time" info is not :( What's wrong with this code...
<form method="post" id="answer_form" action="./submit_test.php">
<h3>1. xyz</h3>
<div>
<input type="radio" name="question1answers" id="question-1-answers-A" value="A" />
<label for="question-1-answersA">A) <sup>253</sup>/<sub>240</sub> </label>
</div>
<input type="submit" value="Submit" name="Submit" style="font-size:32px;">
</form>
jquery:
$("#answer_form").submit(function(e){
$("<input />").attr('type', 'hidden')
.attr('name', 'time')
.attr('value','60')
.appendTo("#answer_form");
return true;
});
This should work, as many others solutions offered at topic you this code from How to add additional fields to form before submit?
You can also do it simply like this (just add hidden):
$("#answer_form").submit(function(e) {
$(this).append('<input name="time" value="60">');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="answer_form" action="./submit_test.php">
<h3>1. xyz</h3>
<div>
<input type="radio" name="question1answers" id="question-1-answers-A" value="A" />
<label for="question-1-answersA">A) <sup>253</sup>/<sub>240</sub> </label>
</div>
<button type="Submit" value="Submit" name="Submit" style="font-size:32px;">Submit</button>
</form>
This works as you see, if not problem is somewhere else, not in code presented. Maybe in your PHP.
Related
I wanted to try and verify input before being submitted therefore I used the required attribute at the end of input, but it's not working and I've already tried some of the recommended solution like wrapping the input in form tag or trying to close the tag of input () but when i submit my form with an empty input it stills submited normally and doesn't declare a required field .
I would appreciate any help, thank you!!
this is a part of my code
<form id="form" style="background-color:honeydew ;" class="container text-center">
<div><br><h2> Contact Us </h2></div>
<div id="contact">
<div>
<label> Name</label>
<input type="text" placeholder="Your name " name="name" required/>
</div>
<br>
<div>
<label> Email</label>
<input type="email" placeholder="name#gmail.com" name="email" name="email">
</div>
<br>
<div>
<label> Message</label>
<input type="text" style="height:50px;" name="message">
</div>
<br>
<div><input type="button" value="submit" name="submit"><br></div>
<br>
</div>
<br>
</form>
and this is the javascript file linked to it :
//we take informations subbmitted by user from the form and we replace the form with a reply
//containing these pieces of information on the click on the submit button
var form=document.getElementById('form'),
contactForm=document.getElementById('contact'),
submitButton=contactForm.children[6].children[0];
var processForm= function(){
name=document.getElementsByName('name')[0].value,
email=document.getElementsByName('email')[0].value,
sitereplyText=document.createTextNode('this is a initialiazing value'),
sitereplyEl=document.createElement('p');
mytext= 'Hey '+name+'! Thanks for your message :) We will email you back at '+email;
sitereplyText.nodeValue=mytext;
sitereplyEl.appendChild(sitereplyText);
form.replaceChild(sitereplyEl,contactForm);
}
submitButton.addEventListener('click',processForm);
So i firstly corrected the input type into submit
<input type="submit" value="submit" name="submit">
then in the javascript file i changed
submitButton.addEventListener('click',processForm);
to
submitButton.addEventListener('form.submit()',processForm);
and it seems to work :)
So, I was wondering if it was possible to pre-fill a form that doesn't include IDs. If I had a form like this:
<form action="" method="POST" >
<input type="text" name="title" />
<input type="submit" value="Submit" />
</form>
Would it be possible to pre-fill this form on an already built website, without editing the HTML code?
For reference, the link I would like to do this on is:
https://crystalmathlabs.com/tracker/compcreate.php
Since you asked for a jquery solution you can do this
var i=0;
$('form > input').each(function(){
$(this).attr('id','id'+i);
i++;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="" method="POST" >
<input type="text" name="title" />
<input type="submit" value="Submit" />
</form>
This one is possible to make with JavaScript, but I'm curious about pure HTML solution. What's my point of this question:
I have a form:
<form action...>
<input type... />
<label for...>...</label>
and other elements for basic form...
<button type="submit">Send</button>
<button type="submit" target="hidden-form">Remove</button>
</form>
And somewhere else I have this another form:
<form id="hidden-form" action...>
<input type="hidden"... />
</form>
So my point is, that pressing button "Remove" will post form #hidden-form. Is something like that possible? I tried that attribute target, but no help.
You can use <button>'s form attribute:
<button type="submit" form="hidden-form">Remove</button>
<form id="hidden-form" action...>
I think you want something like this, using jQuery it is possible try it:
$("#remove").click(function(){
$('#hidden-form').submit();
});
<form action...>
<input type... />
<label for...>...</label>
and other elements for basic form...
<button type="submit">Send</button>
<button type="submit" id="remove" onClick="document.forms['hidden-form'].submit();
">Remove</button>
</form>
<form id="hidden-form" action...>
<input type="hidden"... />
</form>
I need to add a path to a file to the form url before submitting. I created therefore a text field and want to add the text to the url without php.
can somebody help?
the existing code:
<form action="http://127.0.0.1:8080/WebService1/HTTPMethod_1?new_value=value" method="post">
<input type="text" value="" size="30" name="filename">
<input type="submit" name="submit" value="Submit" class="continue-button">
</form>
look into using hidden input fields. these allow you to send form data, but not necessarily show a form field.
for instance:
<script type="text/javascript">
function setFormAction() {
document.myForm.action = document.getElementById("url").value;
}
</script>
<form name="myForm" method="POST" action="default.php">
<input type="value" name="url" id="url" />
<input type="submit" name="submit" onclick="setFormAction();" />
</form>
I have just finished putting a login and register bit on my website and now I'm just cleaning things up, but then I came to this problem I have two form action's on one page, each one goes to a different page, easy enough, but I can't seem to get them both on one line.
Here is the code for the form actions:
<form action='logout.php' method='POST'>
<input type='submit' value='Logout' />
</form>
<form action='changepassword.php' method='POST'>
<input type='submit' value='Change password' />
</form>
I've tried
<form action='logout.php' method='POST'>
<input type='submit' value='Logout' />
<form action='changepassword.php' method='POST'>
<input type='submit' value='Change password' />
</form>
but both buttons go to the same location
the website is www.crossception.com, you will need to login to get to this problem
I've already made a login and password for every one to use
username : stackoverflow
password : test101
thank you very much
connor
(aged 15)
<span style="float:left;">
<form action='logout.php' method='POST'>
<input type='submit' value='Logout' />
</form>
</span>
<span style="float:right;">
<form action='changepassword.php' method='POST'>
<input type='submit' value='Change password' />
</form>
</span>
If I understand your question properly, I think you need to use some CSS:
form {
float: left;
width: auto;
}
You might want to add a class to those forms to stop yourself styling all forms like this
Here's the dirty inline version
<form action='logout.php' method='POST' style='float:left;'>
<input type='submit' value='Logout' />
</form>
<form action='changepassword.php' method='POST'>
<input type='submit' value='Change password' />
</form>
Of course James's suggestion to use a class is the proper way to do it.
Btw, those forms should be after the opening body tag.