How to pass a POST variable without a form? - javascript

What is the best way to use a PHP table to hold comments from multiple different sections, and be able to distinguish between each different comments section? Is there some way to pass POST data without the need of a form?
Is there some way for me to distinguish between these two forms? Should I be using Javascript and distinguishing by the id of the forms, or is there a cleaner way?
<form action="SubmitComment.php" method="post" id="comments1">
<h3>Name:</h3><input type="text" name="name" cols="100">
<h3>Comment:</h3><input type="text" name="comment" cols="100">
<textarea rows=4 cols="100" placeholder="Enter text here!"></textarea>
<?php $_POST['section'] = 1; ?>
</form>
<!-- I want to be able to distinguish between these two forms. -->
<form action="SubmitComment.php" method="post" id="comments2">
<h3>Name:</h3><input type="text" name="name" cols="100">
<h3>Comment:</h3><input type="text" name="comment" cols="100">
<textarea rows=4 cols="100" placeholder="Enter text here!"></textarea>
<?php $_POST['section'] = 2; ?>
</form>

There is a way to distinguish forms using
<input type="submit" name="form" value="form1">
to send data, in that way you can read $_POST['form'] value and check what form it is
If you want to send data without form you can use ajax with Javascript.

Related

how to submit a text input to somewhere that i can collect submissions

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.

How to make an alert when a form item is not answered?

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");
}
}

how to submit two post form at once?

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

Replace html5 bubble messages with message under fields

I have the below code and I would like instead of bubbles showing messages underneath the error fields. What addition should I make to my code?
<script type="text/javascript">
$(document).ready(function() {
$('#emailform').submit(function(event) {
event.preventDefault();
$.ajax({
backedn validation
}
});
});
});
</script>
<body>
<form id="emailform" class="laform" method="post" action="*.php">
<label>Email*: </label>
<input type="email" name="email" id="email" class="input" required oninvalid="this.setCustomValidity('The email address you entered is not valid')" oninput="this.setCustomValidity('')" onchange="try{setCustomValidity('')}catch(e){}">
<label class="col-md-12 labelcom">MSG</label>
<textarea class="input2" name="comment" id="comment" required oninvalid="this.setCustomValidity('This field is mandatory')" oninput="this.setCustomValidity('')" placeholder="Enter your comments / suggestions..."></textarea>
<button type="submit" class="btn" name="submit" value="submit">SUBMIT</button>
</form>
</body>
Overriding the HTML required message is not possible. More Information.
Just use Javascript and create your own validation checking and append messages under the elements if the validation fails.
Edit: After doing more research I found another SO post that contained more insightful information.
Apparently, it is possible. But you will have to use Javascript.
This code changes the message of the validation box the HTML required provides. You should probably look up browser support.
document.getElementById("input").setCustomValidity("Message");

IE, Edge replaces storage text with 'null'

So I have this little contact form on my site, and it's suppose to input some text into an empty p tag telling the client that's it's been submitted. It works fine, it does what it should, but in IE/Edge it ignores everything and inputs the word null into the p tags.
You'll have to forgive me, I'm still new to javascript, but I couldn't find anything anywhere to address this bug. Any help would be greatly appreciated.
<form id="contact-form" method="post" action="#" onsubmit="return setReturn()">
<input type="hidden" value="someone#email.com" name="emailTo">
<fieldset>
<p id="thanks"></p>
<legend>Send me a message</legend>
<div class="contact-info">
<input placeholder="Name*" type="text" name="name" required>
<input placeholder="Email*" type="Email" name="email" required>
</div>
<textarea placeholder="Message*" name="message" required></textarea>
<input type="submit" value="Submit" name="submitContact" class="button">
</fieldset>
</form>
<script>
function setReturn(){
localStorage.setItem("thanks", "Your request was sent successfully!");
}
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
</script>
Your issue is that when the innerHTML of the "thanks" element is set, the string in localStorage is unset.
Then when the form is submitted, the localStorage item is set, but the "thanks" element's innerHTML isn't set (it was set to undefined before).
In order to make sure the "thanks" element is updated when the form is submitted, you need to include the lines that set it in the function that fires when the form is submitted.
function setReturn(){
localStorage.setItem("thanks", "Your request was sent successfully!");
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
}
On form submit you are calling setReturn function , but when this snippet document.getElementById("thanks").innerHTML = localStorage.getItem("thanks"); is parsed localStorage does not have this key. So you have to first set this local storage before use it's value as innerHTML like in the previous answer.
Also it is odd that you are using localStorge and even you are clearing it, when this thing can be acheived by this snippet
HTML
<form id="contact-form" method="post" action="#" onsubmit="return setReturn()">
<input type="hidden" value="someone#email.com" name="emailTo">
<fieldset>
<p id="thanks"></p>
<legend>Send me a message</legend>
<div class="contact-info">
<input placeholder="Name*" type="text" name="name" required>
<input placeholder="Email*" type="Email" name="email" required>
</div>
<textarea placeholder="Message*" name="message" required></textarea>
<input type="submit" value="Submit" name="submitContact" class="button">
</fieldset>
</form>
JS
function setReturn(){
event.preventDefault()
document.getElementById("thanks").innerHTML = "Your request was sent successfully!";
}
NOTE: I used event.preventDefault just for demo but in real application you dont need to use it as it will prevent default behaviour or the submit button.
Here is a WORKING COPY
Also you can use an IIF to set up this localStorage.This function will be executed as soon as it parsed and will set up the key thanks to it.
(function(){
localStorage.setItem("thanks", "Your request was sent successfully!");
}())
Then onsubmit you can use your function without making any change
function setReturn(){
event.preventDefault();
document.getElementById("thanks").innerHTML = localStorage.getItem("thanks");
localStorage.clear();
}
WORKING COPY WITH IIF
Hope this is helpful

Categories

Resources