I am building a django website,my codes are:
<script type="text/javascript">
$("#lxwjsubmit").click(function(){
var userId=$('#id_user1').val();
var password=$('#id_password1').val();
var newtable2='<table id="table2"><tr><th></th><td><input type="text" name="userId" value="'+userId+'" /></td></tr><tr><th></th><td><input type="password" name="password" maxlength="100" value="'+password+'" /></td></tr></table>'
$('#table2').html(newtable2);
document.getElementById('form2').submit();
document.getElementById('form1').submit();
})
</script>
<div class="form-group">
<form action="" method="POST" id='form1'>
<table>
<tr><th></th><td><input type="text" name="user" id="id_user1" /></td></tr>
<tr><th></th><td><input type="password" name="password" id="id_password1" /></td></tr>
</table>
<input type="button" value="submit" id='lxwjsubmit'>
</form>
</div>
<div class="form-group">
<form action="http://localhost/Login.do" method="POST" id='form2' hidden='true' >
<table id="table2">
<tr><th></th><td><input type="text" name="userId" /></td></tr>
<tr><th></th><td><input type="password" name="password" /></td></tr>
</table>
<input type="button" value="submit" >
</form>
</div>
I can submit each form singly.
when put together,only one form can be submited.
Could you correct me pls? or is there more elegant way to submit two different forms?
You can't submit multiple forms in one go, you can only submit one form per submit. There are some options:
Replace it with one big form and use <fieldset> where you now have your <form>.
On submitting the first form, get the values of the other form and add those via hidden fields to the first form. Takes a bit of javascript and is going to require maintenance.
You can use AJAX post() to submit them (combined or seperate), but this has to fit your case. Ajax could make things a bit more complex than needed.
And there are more workarounds. I recommend the first one as it keeps your code cleaner and easier to understand. Not many people expect two forms to be submitted in one go.
$("#form2").ajaxSubmit({url: 'server.php', type: 'post'})
$("#id_user1").ajaxSubmit({url: 'server.php', type: 'post'})
ajax submit jQuery
Related
I'm really stuck on this I'm not sure how I would code text being sent or where i could send it to
<div class="comment-box">
<h2> submit quiz </h2>
<form action="#">
<input type="text" name="full_name" placeholder="Full Name...">
<input type="email" name="email" placeholder="Email Address...">
<button type="submit">submit comment</button>
</form>
any help or ideas on how i can do this would be great
Assuming you want to receive this information via email and need a quick and easy solution (however not reccomended), you can use this form tag
<form action=”mailto:contact#yourdomain.com” method=”POST” enctype=”text/plain” name=”EmailForm”>
Ensure you change the email in the form action="" tag.
You can also look into using a more advanced method through PHP.
I'm building two forms which will live on a single page on a Kentico website. kentico websites are wrapped in one single form field so I can't create individual form elements for each form on the page. The problem is parsleyJS will only allow you to pass a form to initialise it e.g. $("#form").parsley(); and I need to validate the forms independent of each other. Has anyone had this issue before? Can anyone recommend a workaround.
$("#form").parsley();
input{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.min.js"></script>
<form action="" id="form">
<div class="form1">
<label for="fname">First Name</label>
<input type="text" name="fname" required>
<label for="lname">Last Name</label>
<input type="text" name="lname" required>
<input type="submit" value="submit">
</div>
<div class="form2">
<input type="text" name="anotherInput" required>
<input type="submit" value="submit">
</div>
</form>
You may be able to get the results you want using the group option to validate only part of the fields in your form. This is used in this example of a multi step form.
Initialize the forms independent of one another by using the class selector.
$(".form1").parsley();
$(".form2").parsley();
I'm very new to JS. But basically, I'm creating a form. Using JavaScript, how do I take a form so that you must fill in form data?
Thanks!
HTML:
<form>
<p>First Name:</p>
<input type="text" name="firstname" class="form">
<p>Last Name:</p>
<input type="text" name="lastname" class="form">
<p>Email:</p>
<input type="text" name="email" class="form">
<p>Questions / Concerns:</p>
<textarea name="concerns" rows="5" cols="30"></textarea>
<br>
<input type="submit" name="submit" value="Submit">
<input type="reset" name="reset" value="Reset">
</form>
There are multiple ways of solving this particular problem.
The easiest way would be to use the required tag in elements:
<input type="text" name="firstname" class="form" required>
Edit: This may not work in very old browsers.But I don't believe you need to worry about that now.
Use required tag in all of your input elements which you need filling compulsorily.
Once you have your basic problem solved, look at using javascript functions for validation. Ref: https://www.w3schools.com/js/js_validation.asp
Once you know this, you can safely progress to reading on how validation is done on large projects- https://validatejs.org/
use document.getElementByTagName to get the input tag
Use addEventListner with first parameter as blur to detect input leave
Use this.value within if statement to check if empty
Alert something
var element=document.getElementByTagName(input);
element.addEventListner("blur",myFunction);
function myFunction(){
if(this.value==''){
alert ("write something");
}
}
I have a form which generates a email using Google Apps Mail, and all I want really its to do is to not go to the different page after pressing Submit, although I want it to still generate the email.
Any ideas what is the best way to do it? I learn jQuery now, so solutions in it are more than welcome.
<form class="flex-form" id="gform" method="POST" action="https://script.google.com/macros/..../exec" onsubmit="return confirm('Do you really want to submit the form?');">
<input id="formName" type="text" placeholder="Full Name" name="name" value="" required autocomplete="off">
<br>
<input id="formNumber" type="tel" pattern="[0-9]*" placeholder="(0034) 606248059" name="phone-number" required autocomplete="off">
<br>
<input id="formGeo" type="text" placeholder="Tap to share location" name="coordinates" required autocomplete="off">
<br>
<input type="submit" name="submit" value="Send Us Request">
</form>
Thanks.
You can intercept the form's "submit" event with Javascript.
$('gform').on('submit', function(event){
event.preventDefault();
if ( ! confirm('Do you really want to submit the form?'))
return false;
// ....
});
That will catch the "submit" event and prevent the event's default action, which would be to POST the form to the URL given in the action attribute. Remove the onsubmit attribute from the form, better handle it all in one place.
Next, you need to send the data yourself. Easiest way is to use either jQuery's $.post() or $.ajax() functions, together with $('gform').serialize() to transform the form's data fields into a string, ready to be POSTed.
I have two forms on my page...
<form method="post" action="">
<input type="text" name="name" id="name"/>
<input type="submit" name="form1_submit_pushed"/>
</form>
<form method="post" action="">
<input type="submit" name="form2_submit_pushed/>
</form>
On my php side I want to be able to know the value of the text input "name" when I push the submit button of the second form. Kind of like....
if(isset($_POST['form2_submit_pushed']))
{
echo $_POST['name']; //or something else?
}
The reason behind is that first form has a bunch of data that I don't want in the second form submission.
You could do something like this...this code uses jQuery:
<form id="form1" method="post" action="">
<input type="text" name="name" id="name"/>
<input type="submit" name="form1_submit_pushed"/>
<input type="hidden" name="form2_submit_pushed" id="form2_submit_pushed">
</form>
<form id="form2" method="post" action="">
<input type="submit" name="form2_submit_pushed"/>
</form>
<script>
$('#form2').submit(function(event) {
//prevent form2 from submitting and submit form1 instead...
event.preventDefault();
//before submitting, indicate that the "form2_submit_pushed" button was pushed
$('#form2_submit_pushed').val(true);
//submit form1
$('#form1').submit();
});
</script>
...but why you would want to I don't know. Why not make all the controls part of the same form? HTML is designed to send info from only one form (at a time) to the server...
UPDATE: Sorry, I didn't notice your line where you explain your reason for wanting to do this. If you want more explicit control over what gets sent to the server I recommend using AJAX to submit the form. Look at https://api.jquery.com/serializeArray/ and https://api.jquery.com/jQuery.ajax/
Correct me if I am wrong here, but I beleive normal HTML will only post the inputs from the form you are posting from. One option would be to have a hidden input on the second form which gets updated via javascript during the input's change event.
So, you could do something like this (I don't recommend inline javascript but it should get you in the right direction):
<form method="post" action="">
<input type="text" name="name" id="name" onchange="document.getElementById('hiddenname').value=this.value"/>
<input type="submit" name="form1_submit_pushed"/>
</form>
<form method="post" action="">
<input type="hidden" name="hiddenname" id="hiddenname"/>
<input type="submit" name="form2_submit_pushed/>
</form>
Then you just need to get it using
$_POST['hiddenname'];