I have the following (simplified) HTML code containing two forms:
<html>
<form name="form1" method="get">
Name: <select name="name" type="text">
<option selected>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</form>
<form name="form2" method="post" action="../cgi/test.pl">
City: <input name="city" type="text"/>
Country: <input name="country" type="text"/>
<input value="Click Me!" type="submit"/>
</form>
</html>
Thus when clicking the submission button the CGI script is executed and I would like the script to be able to ingest also the name selected in the dropdown of the first form. Any suggestion on how to achieve this? In older questions I just found similar things but not suitable for my problem (if I am not wrong...).
I've created a snippet which works as you want, I've done the explaining in the comments wherever necessary. See if this works for you.
<form name="form1" method="get">
Name:
<select name="name" type="text" onchange="document.querySelector('#any_id').value = this.value" style="width: 50%">
<!-- trigger onchange event and change the value of hidden field in the second form -->
<option selected>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</form>
<hr>
<form name="form2" method="post" action="../cgi/test.pl">
<!--<input type="hidden" name="any_name" id="any_id" value="Your-default-value"> -->
<!-- Make this field hidden↓↓, here only for demo purpose-->
Hidden Field: <input type="text" name="any_name" id="any_id" value="A"><br><br>
<!-- Give it a default value from your select element(which is A) -->
City: <input name="city" type="text" /><br><br> Country: <input name="country" type="text" /><br><br>
<input value="Click Me!" type="submit" />
</form>
Then get the value from the name of hidden field(here any_name).
Related
I am using HTML, bootstrap, php, MySQL, and Ajax. I want that when I submit the form the value set in the input field's value attribute become null. I am badly stuck here. Can anyone please advice me that how can I solve this problem?? Thanks in advance guys. codes are given below :
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll" value="12"><br>
<label>Name : </label>
<input type="text" name="name" id="name" value="Sneha"><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="submit" class="btn-submit" name="submit" value="Submit">
</form>
<script type="text/javascript">
jQuery(document).ready(function() {
$('.btn-submit').click(function() {
$.ajax({
url:"insert.php",
method:"POST",
data:$('#cForm').serialize(),
success:function(data)
{
document.getElementById("cForm").reset();
$("input[type='text']").val('');
}
});
});
});
</script>
First of all you should remove default values of input fields, because on submit the page refreshes and default values will popup. Next you should create an event listener "submit". Once it is present find the nodes with input and replace the value with empty string. The working sample is bellow:
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll" value=""><br>
<label>Name : </label>
<input type="text" name="name" id="name" value=""><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="submit" class="btn-submit" name="submit" value="Submit">
<input type="submit" class="btn-modify" name="modify" value="Modify">
</form>
<script>
const form = document.querySelector('#cForm');
let inputs = form.getElementsByTagName('input')
form.addEventListener('submit', function() {
console.log('Submit');
inputs.name.value = '';
inputs.roll.value = '';
inputs.age.value = '';
})
</script>
Don't forget to remove default value from input!!! Otherwise you will see them after submit.
Just use $("input[type='text']").val(''); to remove the values hardcoded in the input's value tag.
$("#cForm").on("submit", function(e) {
e.preventDefault();
$("input[type='text']").val('');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cForm" name="cForm" method="post">
<label>Roll No : </label>
<input type="text" name="roll" id="roll" value="112"><br>
<label>Name : </label>
<input type="text" name="name" id="name" value="john"><br>
<label>Stream : </label>
<select name="stream" id="stream">
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="ECE">ECE</option>
<option value="ME">ME</option>
</select><br>
<label>Age : </label>
<input type="text" name="age" id="age"><br>
<input type="submit" class="btn-submit" name="submit" value="Submit">
<input type="submit" class="btn-modify" name="modify" value="Modify">
</form>
EDIT
You are using ajax to submit the form so you should add the line $("input[type='text']").val(''); inside you ajax success callback function
$.ajax({
url:'/some-url/file.php',
success:function(data){
//your code to check if the save was success full
//and if yes then reset the form inputs
$("input[type='text']").val('');
}
});
Hi I have problems to figure out how to copy select value data from one form to another form. I need a copy javascript for this I guess.
Form1
<form id="form1" name="form1">
<input type="checkbox" name="email'.$emailCount++.'" value="'.email.'"/>
<input type="hidden" name="name'.$nameCount++.'" value="'.$id.'"/>
</form>
Form2
<form id="form2" method="POST" action="script/do-something.php" name="form2">
<label for="name">Add Selected</label>
<select name="list" id="list" class="form-text">
<option value="">Add To List</option>
<option value="All">All</option>
<option value="All">Blog</option>
<option value="All">Dj</option>
</select>
<input type="hidden" name="name'.$nameCount++.'" value="'.$id.'"/>
<input type="button" name="new_address" id="clicky3" value="Add Selected">
</form>
Hi I'm a relative beginner. I need each object in my form to be validated and basically I don't know how to validate a drop-down menu. Here is my HTML, thanks guys.
<div id="valAlert"></div>
<form name="review" onsubmit="return validateForm()">
<div id="valAlert"></div>
<fieldset>
Title: <input type="text" name="Title"><br/>
Email Address: <input type="text" name="Email"><br/>
Rating: <select name="Rating">
<option value="0"></option>
<option value="1">Excellent</option>
<option value="2">Good</option>
<option value="3">Bad</option>
<option value="4">Awful</option>
</select><br/>
<textarea name ="Comments" rows="8" colspan="40">Comments: </textarea>
</fieldset>
<fieldset>
<input class="button" type="submit" value="Submit"/>
</fieldset>
</form>
`else if (r=="0"){
document.getElementById("valAlert").innerHTML="We require a rating";
return false;
} `
I have a form like so:
<form name="search" class="form-search" method="get" action="http://www.bernhardt.com/search.php?">
<div>
<input name="search" type="text" class="search-query input-large" onkeypress="return submitenter(this,event)">
<select>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
<button type="submit" class="btn btn-primary">Search</button>
</div>
</form>
I would like it so that when Option1 is selected, the form's input be like this:
<form name="search" class="form-search" method="get" action="http://www.websitehere.com/search.php?">
<div>
<input name="search" type="text" class="search-query input-large" onkeypress="return submitenter(this,event)">
<button type="submit" class="btn btn-primary">Search</button>
</div>
When Option2, like so:
<form name="search" class="form-search" method="get" action="http://www.websitehere.com/search.php?">
<div>
<input name="searchbynum" type="text" class="search-query input-large" onkeypress="return submitenter(this,event)">
<input type="hidden" name="searchbydesc" value="" />
<input type="hidden" name="Submit" value="Go" />
<button type="submit" class="btn btn-primary">Search</button>
</div>
So no and so forth with other options. I do understand that a fair bit of Javascript is required here, but I don't know how (I know basic HTML and CSS, not so much Javascript). I would appreciate any help on this topic.
Take a look at document.createElement()
You should be able to do:
<script>
function addInputs() {
var input = document.createElement("input");
document.getElementById("frm").appendChild(input);
}
</script>
<form id="frm">
<select onchange="addInputs()" id="sel">
<option>Option 1</option>
</select>
</form>
I have a form in my page like the one below;
<form name="testform" id="testform" action="test.php" method="get">
<input name="field1" id="field1" type="text" value="">
<input name="field2" id="field2" type="text" value="">
<select name="dropdown" id="dropdown">
<option value="option1" selected="selected">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<input type="submit" name="Submit" value="Submit" id="Submit">
</form>
I want the form to get submitted automatically when user select an option from the drop-down menu. How can I do this with or without using JavaScript (with or without jQuery)?
Thanks in advance... :)
blasteralfred
Click (or select)? In that case the user would not be able to make any selection. You probably mean as soon as another option is selected. If so
<select name="dropdown" id="dropdown" onchange="this.form.submit()">
If jQuery is being used, unobtrusive event handler change should be used instead of inline javascript.
$(function(){
$("#dropdown").change( function(e) {
this.form.submit();
});
});
Use on if the form elements are dynamically being added in the DOM
$(function(){
$('#testform').on( "change", "#dropdown", function(e) {
this.form.submit();
});
});
You will need to use the jQuery change() event.
('#dropdown').change( function() { ('#testform').submit(); })
I think
$('#dropdown').change(function () { $('Submit').click(); } );
will do the trick!
Here Answer
<form name="testform" id="testform" action="test.php" method="get">
<input name="field1" id="field1" type="text" value="">
<input name="field2" id="field2" type="text" value="">
<select name="dropdown" id="dropdown" onChange="document.testform.submit()">
<option value="option1" selected="selected">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</form>