JQuery: How to not join specific field in .submit - javascript

I have a form
<form action="GET" id="form">
....
<input type="text" name="a" value="aaa">
<input type="text" name="b" value="bbb">
<input type="text" name="c" value="ccc">
<button ... value="go" id="submit">
....
is it possible that I can prevent the input name="b" not to be join in the .submit() ? the whole input <input type="text" name="b" value="bbb"> not to be submitted?
$('#submit').click(function(){
$('#form').submit();
});

Disable it.
jQuery('[name=b]').prop("disabled", true);
… and it won't be a successful control.

The form will submit all the fields which have a name. So if you omit the name tag from an element that will not be submitted.
<form action="GET" id="form">
....
<input type="text" name="a" value="aaa">
<input type="text" value="bbb">
<input type="text" name="c" value="ccc">
<button ... value="go" id="submit">
....
This way only a and c will be submitted.

Related

how to reset the form fields to default values using javascript

I have two forms. form1's field data is sending to form2. form2 have 1 set 3 inline inputboxs and 1 reset button.when i clicked the reset button form1's go back to default state with out refresh the page.how can I do that?
**form1 **
<form id="formDrink" onclick="submit1(this.drinkname,this.drinkprice,this.drinkquantity)" >
<input type="text" id="drinkname" name="drinkname" value="{{$drink->product_name}}">
<input type="hidden" id="drinkquantity" value="0" >
<input type="text" id="drinkprice" name="drinkprice" value="{{$drink->selling_bottle}}">
</form>
form2
<form class="form-inline" id="kot">
<input type="text" id="drinkName" name="drinkname" value="" readonly="">
<input type="text" id="drinkQuantity" name="drinkquantity" value="" readonly="">
<input type="text" id="drinkPrice" name="drinkprice" value="" readonly="">
<input type="button" id="resetForm" onclick="drinkRemover()" value="reset" />
</form>
javascript
function drinkRemover(){
$("#formDrink")[0].reset();
}
I dont know why my javascript do not work.I tryed every posible ways but i cant reset the form1's fields to its default values.
This is what the reset input type is for:
<form class="form-inline" id="kot">
<input type="text" id="drinkName" name="drinkname" value="drinkname">
<input type="text" id="drinkQuantity" name="drinkquantity" value="drinkquantity">
<input type="text" id="drinkPrice" name="drinkprice" value="drinkprice">
<input type="reset" id="resetForm" value="reset" />
</form>

how to display a value(in text field) from one form(after submitting it) to another form (both are on the same page)

So, I have the form1 where i am giving values in two fields and submitting it,
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
I want these values to automatically be written and visible in the two textinput and numberinput fields in form2.
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
how do i use javascript to automatically set values visible and ready to submit
to the fields in form2 ???
Note: i'm using two forms because they both have different actions after clicking submit and both the forms are on the same page.
Here is one small example using id hashes, with this idea, I think you can start, object hash will have pair list,
You can restrict specific form by mentioning id of it, in place of $('form :input').on():
var hash = {
aadhar_r : 'a_number',
cand_r : 'cid'
}
$('form :input').on('keyup',function(){
if(this.id in hash){
$('#'+hash[this.id]).val($(this).val())
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="new_cand.php" name="form1" method="post">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="cand_r" required/>
<input type="submit" name="submit" id="submit" onclick="setValues();" />
</form>
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="cid" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
If you use jQuery, you can serialize your first form and send it directly to the server. Then you get the value from the input field and set it to the other input field.
Form 1:
<form id="form1">
<input type="number" name="aadhar_r" id="aadhar_r" required/>
<input type="text" name="cand_r" id="idOfInput1" required/>
<button id="submit" />
</form>
Script:
$("#submit").click(function () {
$.post("new_cand.php", $("#form1").serializeArray(), function () { /* Nothing to do with new_cand.php data */});
$("#idOfInput2").val($("#idOfInput1").val());
});
Form 2:
<form action="in_cand.php" name="form2" method="post">
<input type="number" id="a_number" name="a_number" required>
<input type="text" id="idOfInput2" name="cid" required>
<input type="submit" name="submit" id="submit" />
</form>
Attention: this is not tested, requires jQuery and is for a post method

Send value from another form

I have multiple forms that point to the same site where the datas are stored into a sql database. For each form the user has to fill out a textfield which is separated from the form. I don't understand how i could send for each form the same value from the separated textfield.
<form name="user" action="http://hello.xy/login.php" method="GET">
<input type="text" value="User" name="provider" hidden>
Name: <br/>
<input type="text" value="" name="user_name"><br/>
Email: <br/>
<input type="text" value= "" name="user_email"><br/>
<textarea hidden name="comment" value="value from the form comment"></textarea>
<input type="submit" value="submit">
</form>
<form name="google" action="http://hello.xy/login.php" method="GET">
<input type="text" value="Google" name="provider" hidden>
<textarea hidden name="comment" value="value from the form comment"></textarea>
<input type="image" src="images/logos/google.png" value="submit">
</form>
<form name="twitter" action="http://hello.xy/login.php" method="GET">
<input type="text" value="Twitter" name="provider" hidden>
<textarea hidden name="comment" value="value from the form comment"></textarea>
<input type="image" src="images/logos/twitter.png" value="submit">
</form>
<form name="facebook" action="http://hello.xy/login.php" method="GET">
<input type="text" value="Facebook" name="provider" hidden>
<textarea hidden name="comment" value="value from the form comment"></textarea>
<input type="image" src="images/logos/facebook.png" value="submit">
</form>
Separated textfield, but on the same site:
<form name="comment" >
<textarea name="input" ></textarea>
</form>
I hope somebody can help me.
Thanks,
Misch
You can't send data from two forms at the same time without JavaScript.
The solution without JavaScript is to use one form:
<form action="http://hello.xy/login.php" method="GET">
<textarea name="comment"></textarea>
<label for="user_name">Name</label>
<input type="text" name="user_name" id="user_name">
<label for="user_email">Email</label>
<input type="text" name="user_email" id="user_email">
<button type="submit" name="provider" value="User">Submit</button>
<input type="image" src="images/logos/google.png" name="provider" value="Google">
...
</form>
Update
Since you're using jQuery, use:
<textarea name="comment" class="comment-visible"></textarea>
And include this in each form:
<input type="hidden" name="comment" class="comment-hidden">
jQuery:
$(document).on('input', '.comment-visible', function(){
$('.comment-hidden').val( $(this).val() );
});
A <textarea> doesn't have a value= attribute. The value is the text node inside. ex.
<textarea>value</textarea>

submit button will empty the values of inputs

<form name="input" action="html_form_action.asp" method="post">
<input type="text" name="a" class="inp">
<input type="text" name="b" class="inp">
<input type="text" name="c" class="inp">
<input type="text" name="d" class="inp">
<input type="submit" name="e" class="inp">
</form>
$("input").focusin(function () {
$("input").not($(this)).not(':input[type=submit]').val("");
});
DEMO
http://jsfiddle.net/PJLQq/1/
This code will clean the post values when i press the submit button. How can be solved? I only want to clean the values when the user change the focus in the user interface, not when the form is submitted.
Based on the comments
$("input:not([type=submit])").focusin(function () {
$("input").not(this).not('[type=submit]').val("");
});
Demo: Fiddle

HTML - I cannot write in some textboxes shown dynamically by javascript in internet explorer

I have 2 forms on my page.
The first one is always visible and the second one is hidden at first.
When the user clicks a specified radio option, the second form shows up.
In Chrome and Firefox, everything is fine, but in IE, the form shows, but I cannot write inside the textboxes fields.
The wierdest thing is that I can erase everything inside the textboxes but I cannot add anything.
Here is some code:
The first form:
<form name="calendar" action="" method="post">
<input type="text" name="n" />
<input type="radio" name="t" value="0" onclick="showSecondForm();" />Option 1
<input type="radio" name="t" value="1" onclick="showSecondForm();" />Option 2
<input type="radio" name="t" value="2" onclick="showSecondForm();" />Option 3
<input type="submit" name="submit" value="Submit" onclick="onSubmitAction();return false;">
</form>
The function showSecondForm() checks if option 3 is checked and if so, it shows the second form.
The second form is:
<div id="customForm" style="display: none;">
<form name="custom" action="" method="post">
<input type="text" name="a" />
<input type="text" name="b" />
<input type="text" name="c" />
<input type="text" name="d" />
<input type="text" name="e" />
</form>
</div>
The forms will never submit because everything I have to do is in javascript and I can reach both forms easilly. All my code is working fine except for the typing in textboxes in ie.
My javascript
<script type="text/javascript">
function showSecondForm()
{
if(document.calendar.t[2].checked)
{
document.getElementById('customForm').style.display = 'block';
}
else
{
document.getElementById('customForm').style.display = 'none';
}
}
</script>
In browsers like Google Chorme and Mozilla Firefox, when you put a maxlenght of 0 on a text input field, the textbox lenght is "unlimited". In Internet Explorer, it is really 0, so you cannot write anything in it.
So the code must be:
<div id="customForm" style="display: none;">
<form name="custom" action="" method="post">
<input type="text" name="a" maxlength="255" />
<input type="text" name="b" maxlength="255" />
<input type="text" name="c" maxlength="255" />
<input type="text" name="d" maxlength="255" />
<input type="text" name="e" maxlength="255" />
</form>
</div>
Try this:
<script type="text/javascript">
function showSecondForm() {
document.getElementById('customForm').style.display='block';
}
</script>

Categories