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>
Related
Below is the code of the form using which I'm trying to fetch the value for the query string.
<form id="form1">
<label for="allthesewords"> all these words</label>
<input type="text" id="allthesewords">
<br>
<label for="thisexactwordphrase">this exact word phrase</label>
<input type="text" id="thisexactwordphrase">
<br>
<label for="anyofthese">any of these</label>
<input type="text" id="anyofthese">
<br>
<label for="noneofthese">none of these</label>
<input type="text" id="noneofthese">
<br>
<input type="submit" value="Advance Search" onClick="advanceSearch()">
</form>
This one is the javascript function where I'm building my query string.
function advanceSearch(){
document.getElementById("form1").action="https://www.google.com/search?as_q="+document.getElementById("allthesewords").value+"&as_epq="+document.getElementById("thisexactwordphrase").value+"&as_oq="+document.getElementById("anyofthese").value+"&as_eq="+document.getElementById("noneofthese").value;
return true;
}
So, the actual problem is while clicking on the submit button it must redirect to this url
https://www.google.com/search?as_q=Harvard%20univeristy%20students&as_epq=students%20of%20Harvard%20Univeristy&as_oq=Harvard&as_eq=almamater
However, when I run my code it just redirects to this url:
https://www.google.com/webhp.
Thanks in advance!!!!!
<form action="https://www.google.com/search">
<p>Find page with</p>
<input class="input_bar" type="text" name="as_q" placeholder="all these words">
<input class="input_bar" type="text" name="as_epq" placeholder="this exact word or phrase">
<input class="input_bar" type="text" name="as_oq" placeholder="any of these words">
<input class="input_bar" type="text" name="as_eq" placeholder="none of these words">
<input id="btn" type="submit" value="Advance Search">
</form>
Use it!
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
How do i add some form of JQuery solution to the below code so that users are using the redirect but instead have a nice response back saying 'Thanks for subscribing'?
Also, is this the best way - The JQuery solution? Or should i try JS
<form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1337" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="blah" />
<input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=text" id="1237" />
<input type="hidden" name="meta_adtracking" value="blah" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name,email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<input type="text" name="name" autocomplete="off" required placeholder="First name">
<input type="text" type="email" name="email" required placeholder="Your Email">
<input type="submit" name="submit" value="Subscribe">
</form>
Edit - But have it be presentable, i.e. I want to put the text within a DIV, not Alert the user with a pop up or redirect them to my page.
$("form").submit(function(){
alert("Thanks for subscribing");
});
edit ##
Stack overflow jQueryUI Modal confirmation dialog on form submission
POST http method in my form does not work when I use JavaScript:
<form id="user" method="post"action="url" onsubmit="return false;">
<span>First Name:</span>
<input type="text" class="input" id="fname" name="fname" required>
<span>last Name:</span>
<input type="text" class="input" id="lname" name="lname" required>
<input class="button" type="submit" value="submit" onclick = "checkForm()">
</form>
However, it does seem to work when I do not use JavaScript:
<form id="user" method="post"action="url">
<span>First Name:</span>
<input type="text" class="input" id="fname" name="fname" required>
<span>last Name:</span>
<input type="text" class="input" id="lname" name="lname" required>
<input class="button" type="submit" value="submit">
</form>
How can I use JavaScript validations in my form and send the form to a given URL?
<form id="user" method="post"action="url" onsubmit="return checkForm();">
<!-- blah blah-->
<input class="button" type="submit" value="submit">
</form>
Thanks for your help; this is working fine now.
It is not submitting to server because onsubmit="return false;" tells the browser the validation failed and do not send to server. If onsubmit is not specified or returns true the data will be submitted to the specified url. The following code should work if the function checkForm() returns true when passing validation and returns false while failing validation.
<form id="user" method="post" action="url" onsubmit="checkForm()">
<span>First Name:</span>
<input type="text" class="input" id="fname" name="fname" required>
<span>Last Name:</span>
<input type="text" class="input" id="lname" name="lname" required>
<input class="button" type="submit" value="submit">
</form>
How can I make my form run a function when submit is clicked?
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" action="JavaScript: ajax_add_comment();">
</fieldset>
...
I am trying running the following function:
function ajax_add_comment () {
alert ("testing");
}
Use onclick attribute instead of action.
You could use jQuery, and use the .submit() function.
You can give the form an id and then attach the submit function to it.
Example:
<form id="execute"....
</form>
<script type="javascript">
$("#execute").submit(function(){
alert("i've submitted this form");
});
</script>
make sure you have included the jquery js file.
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
You can use the onsubmit event to execute JavaScript code when the form is submitted. For example:
<script>
function ajax_add_comment () {
alert ("testing");
}
</script>
<form id="commentForm" name="comment">
<fieldset>
<label for="name">Name <span>(required)</span></label>
<input type="text" class="text" id="name" value="" />
<label for="email">Email <span>(will not be published) (required)</span></label>
<input type="text" class="text" id="email" value="" />
<label for="website">Website</label>
<input type="text" class="text" id="website" value="" />
<label for="message">Message <span>(required)</span></label>
<textarea id="message" class="textarea" rows="10"></textarea>
<input type="submit" name="submit" class="submit" id="submit_btn" value="Submit Comment" onsubmit="ajax_add_comment();">
</fieldset>
Thank you!