I have a HTML page with about 10 inputs.
There are two forms, one inside the second. I want check first the small form before sending the big one, but when I check the submit button, it refresh the page with all inputs.
How can I discriminate all inputs except one I'm interested to?
<html>
<body>
<form id="big" name="big">
<input type="text" name="input1" value= "" />
<input type="text" name="input2" value= "" />
<input type="text" name="input3" value= "" />
<input type="text" name="input4" value= "" />
<form id="small" name="small"><input type="text" name="sendonlythisinput" value="" />
<inputtype="submit" value="Send only this" />
</form>
<buton type="submit" value="SEND ALL!" />
</form>
</body>
</html>
you can create a custom function for your button :
<button type="button" onclick="submit_custom();">submit</button>
<script type="text/javascript" charset="UTF-8">
function submit_custom(){
//do things here
and then send data via ajax or something
}
</script>
You have used one form in inside the another <form> s in your html. You can split like below and use,
Form1:
<form id="big" name="big">
<input type="text" name="input1" value= "" />
<input type="text" name="input2" value= "" />
<input type="text" name="input3" value= "" />
<input type="text" name="input4" value= "" />
<input type="submit" value="SEND ALL!" />
</form>
Form 2:
<form id="small" name="small"><input type="text" name="sendonlythisinput" value="" />
<input type="submit" value="Send only this" />
</form>
Related
I have an HTML Form with some fields. I want to add two buttons to it. First two recreate a new set of all the fields in this form on the next line. Second to delete any of the newly recreated set of fields.
<form action="">
<label for="college">College</label>
<input name="college" type="text" />
<label for="degree">Degree</label>
<input name="degree" type="text" />
<label for="discipline">Discipline</label>
<input name="discipline" type="text" />
<label for="passout-year">Passout Year</label>
<input name="passout-year" type="number" min="2000" max="2021" />
<input type="submit" value="Submit" />
</form>
Yes, you can use only html, or you can use JS or if you want you can use HTML and JS to make it more dynamic,:-
You can refer this
you can use var cln=form.cloneNode(true); to clone a particular element or a whole form and then just append it to the body of the document using document.body.appendChild(cln);
run the code snippet to see how it works
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function copyForm(){
var form=document.getElementById("form1");
var cln = form.cloneNode(true);
document.body.appendChild(cln);
}
function deleteForm(event){
event.parentElement.remove();
}
</script>
</head>
<body>
<input type="button" name="copy" value="add new form" onclick="copyForm();">
<form id="form1" action="">
<label for="college">College</label>
<input name="college" type="text" />
<label for="degree">Degree</label>
<input name="degree" type="text" />
<label for="discipline">Discipline</label>
<input name="discipline" type="text" />
<label for="passout-year">Passout Year</label>
<input name="passout-year" type="number" min="2000" max="2021" />
<input type="submit" value="Submit" />
<input type="button" value="delete form" onclick="deleteForm(this);" />
</form>
</body>
</html>
I have a form. Right now it has one action and simply just submits the inputs to URL. I would like it to be modified where when the form is completed the inputs are saved to a file and then submitted to the URL.
<form class="snp-subscribeform snp_subscribeform" action="join.cgi" method="post">
<input name="page" type="hidden" value="1" />
<div>
<input id="snp-firstname" class="snp-field snp-field-firstname " name="firstname" required="" type="text" value="" placeholder="Enter Your First Name" />
<input id="snp-lastname" class="snp-field snp-field-lastname " name="lastname" required="" type="text" value="" placeholder="Enter Your Last Name" />
<input id="snp_email" class="snp-field snp-field-email" name="email" type="text" placeholder="Enter Your Email " />
<input id="snp-password" class="snp-field snp-field-password " name="password" required="" type="text" value="" placeholder="Select A Password" />
</div>
<div>
<input class="snp-subscribe-button snp-submit" type="submit" value="CONTINUE" data-loading="Creating Account!" data-success="Account Created!" />
</div>
</form>
</div>
You would need to use javascript and the onclick event for the submit button to retrieve the values from the DOM elements you are interested in and save them to the file.
Here is a sample of how to get started:
<input type="submit" name="submit" value="Save" onclick="writedata()" />
<script>
function writeData() {
}
</script>
I have a superfish menu containing two forms, a search box in superfish tab 1 and a newsletter signup in tab 3. The search form works fine, and the newsletter signup works fine so long as the search form isn't present on the page. But when both are present, the submit button on the newsletter signup form appears to try and submit a search instead, which not only doesn't sign the user up for the newsletter, but it doesn't search for anything either.
My code goes like this:
<form class="search-form" action="/search/node" method="post" id="search-form" accept-charset="UTF-8"><div><div class="container-inline form-wrapper" id="edit-basic"><div class="form-item form-type-textfield form-item-keys">
<input type="text" id="edit-keys" name="keys" value="" size="20" placeholder=" Search this site" maxlength="255" class="form-text" />
</div>
<input type="submit" id="edit-submit" name="op" value="Go" class="form-submit" /></div><input type="hidden" name="form_build_id" value="form--JTbYKjZwG8SjIstLVU7J0HOiZZiSoB88bE4VoRYTG4" />
<input type="hidden" name="form_token" value="HoVlLGidOtcgITb3XmNhvH7mKKzW8ldmnahr3t0HGAU" />
<input type="hidden" name="form_id" value="search_form" />
<many other divs>
<form class="webform-client-form" enctype="multipart/form-data" action="/content/newsletter-signup" method="post" id="webform-client-form-22" accept-charset="UTF-8"><div>
<div class="form-item webform-component webform-component-email webform-container-inline" id="webform-component-email">
<input class="email form-text form-email required" type="email" id="edit-submitted-email" placeholder="Email address" name="submitted[email]" size="24" />
</div>
<div class="form-item webform-component webform-component-textfield webform-container-inline" id="webform-component-name">
<input type="text" id="edit-submitted-name" name="submitted[name]" value="" placeholder="Name" size="14" maxlength="128" class="form-text required" /> <input type="submit" id="edit-submit" name="op" value="Submit" class="form-submit" />
</div>
<input type="hidden" name="details[sid]" value="" />
<input type="hidden" name="details[page_num]" value="1" />
<input type="hidden" name="details[page_count]" value="1" />
<input type="hidden" name="details[finished]" value="0" />
<input type="hidden" name="form_build_id" value="form-I8MgMoURjB6BhqJATKhhNZ5nAUwk855bGWgxH75Gs5Q" />
<input type="hidden" name="form_token" value="IKALClB6fmkRPFA6Ko8VIbBN2uDEwpVBxFM6w2_2JAo" />
<input type="hidden" name="form_id" value="webform_client_form_22" />
</div></form>
How can I get the submit button on the second (newsletter signup) form to submit that form and not the search?
I need to have two step submission form which accepts multiple images to be uploaded to server. The problem here is I need to have some temporary hidden inputs for storing values from the first step to acquire more info in the second step before the actual submission.
Take a look the following codes.
This is for example, the first step:
<form action="" enctype="multipart/form-data" method="post">
<input type="hidden" name="step" value="1" />
Name: <input name="name" value="" type="text" />
Email: <input name="email" value="" type="text" />
Image 1: <input type="file" name="images[]" />
Image 2: <input type="file" name="images[]" />
<input type="submit" value="Submit" />
</form>
The following will be the second step:
<form action="" enctype="multipart/form-data" method="post">
<input type="hidden" name="step" value="2" />
<input name="name" value="<?=$_POST['name'];?>" type="hidden" />
<input name="email" value="<?=$_POST['email'];?>" type="hidden" />
<!-- Here is the problem, how should I store the submitted images for the time being? -->
<input type="file" name="images[]" />
<input type="file" name="images[]" />
<!-- ... -->
Please select a type:
<select name="type">
<option>Type 1</option>
<option>Type 2</option>
</select>
<input type="submit" value="Submit" />
</form>
Please note that this code is just for the sake of clarification and is by no means the actual code.
They should be stored in $_FILES I think. You can also use move_uploaded_file() for storing the files temporarly. See: php-manual
I have a form on a remote server I'm trying to submit data to, example below
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="submit" name="send" value="Submit" />
</form>
</body>
</html>
I'm trying to auto submit the data like this
<html>
<head>
</head>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<script type="text/javascript">
document.forms[0].submit();
</script>
</form>
</body>
</html>
It works fine if the first example didn't have a (name="send") name but when it does have a name nothing submits. My question is how would I go about sending the data with a input button that has a name.
Thank you
Note: The answer turned out to be type="hidden" instead of type="submit", in which the second does not allow DOM submission while also submitting that input's value in the GET/POST data. type="hidden" does, and it works here since the button does not need to be physically clicked.
Pick one:
<form name="formname" id="formid" action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="submit" name="send" value="Submit" />
</form>
<script type="text/javascript">
if (confirm('Ok for "formname", Cancel for "getElementById"')) {
console.log('document.formname.submit()');
document.formname.submit();
} else {
console.log('document.getElementById("formid").submit()');
document.getElementById('formid').submit();
}
</script>
http://jsfiddle.net/userdude/EAmwj/3
Your JavaScript code will get executed as soon as the page is loaded. That is why it gets submitted immediately.
You need to wrap the JS code in a function and let an event call it from the page.
You can use a regular button and set the function for the onclick event of a button.
<html>
<head>
<body>
<form action="http://www.example.com/post.php" method="post">
<input type="text" name="input1" value="test1" />
<input type="text" name="input2" value="test2" />
<input type="button" name="send" value="test2" onclick="doSubmit()" />
<script type="text/javascript">
function doSubmit() {
document.forms[0].submit();
}
</script>
</form>
</body>
</html>