Можно ли отправить форму данных cordova app form в веб-форму joomla?

Можно ли отправить данные из Cordova в веб-форму Joomla, а затем отправить форму?

Я не могу загрузить форму в приложение и отправить из-за проблемы «недопустимый маркер».

I need help with the javascript code, the solution I have below is something is not complete but I think i’m going in the right direction.

<script>
    function UpdateRecord() {
        var name = $("[name='name']").val();
        var subject = $("[name='subject']").val();
        var select-choice-1']").val() = $("[name='select-choice-1']").val();
        var textarea = $("[name='textarea']").val();
        var file = $("[name='file']").val();

        jQuery.ajax({
            type: "POST",
            url: "http://website.com/send-form",
            data: "name="+ name+"& subject="+ subject+"& select-choice-1="+ select-choice-1+" & textarea="+ textarea+"+" & file="+ file+",
            dataType: "html",      
            cache: false,
            success: function(response) {
                alert("Email Sent");
            }
        });
    }
</script>

конец javascript

// form on app 
<form>
    <div class="ui-field-contain">
        <label for="text-basic">Text input:</label>
        <input type="text" name="name" id="text-basic" value="">
    </div>

    <div class="ui-field-contain">
        <label for="text-basic">Text input:</label>
        <input type="text" name="subject" id="text-basic" value="">
    </div>

    <div class="ui-field-contain">
        <label for="select-choice-1" class="select">Custom select:</label>
        <div class="ui-select">
            <a href="#" role="button" id="select-choice-1-button" aria-haspopup="true" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow ui-li-has-count">
                <span>&nbsp;</span>
                <span class="ui-li-count ui-body-inherit" style="display: none;">0</span>
            </a>
            <select name="select-choice-1" id="select-choice-1" data-native-menu="false" multiple="multiple" tabindex="-1">
                <option value="16">Item 1</option>
                <option value="15">Item 2</option>
                <option value="14">Item 3</option>
                <option value="13">Item 4</option>
                <option value="12">Item 5</option>
                <option value="9">Item 6</option>
                <option value="8">Item 7</option>
            </select>
            <div style="display: none;" id="select-choice-1-listbox-placeholder"><!-- placeholder for select-choice-1-listbox --></div>
        </div>
    </div>

    <div class="ui-field-contain">
        <label for="textarea">Textarea:</label>
        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
    </div>

    <div class="ui-field-contain">
        <label for="file">File:</label>
        <input type="file" name="file" id="file" value="">
    </div>

    <div class="ui-field-contain">
        <label for="submit-1">Send form:</label>
        <div class="ui-btn ui-input-btn ui-corner-all ui-shadow">Send<input type="submit" id="submit-1" onclick="UpdateRecord()" value="Send"></div>
    </div>
</form>

форма в приложении будет размещена в форме на сайте

// joomla web form

<form id="item-submission" action="/submit-a-request/submission/submission/submit-a-request/maintenance-request/a2db427bfdc794d3695d8ac6843cb04d" method="post" name="submissionForm" accept-charset="utf-8" enctype="multipart/form-data">
    <input type="text" name="elements[0c7f7be5-059b-4cd3-8641-d88f4199af01][0][value]" value="" size="60" maxlength="255">
    <input type="text" name="elements[bc797942-f95f-438e-ad05-e44b2199e9a8][0][value]" value="" size="60" maxlength="255">
    <select id="elements_itemcategoryvalue" name="elements[_itemcategory][value][]" title="Category" size="7">
        <option value="16">Item 1</option>
        <option value="15">Item 2</option>
        <option value="14">Item 3</option>
        <option value="13">Item 4</option>
        <option value="12">Item 5</option>
        <option value="9">Item 6</option>
        <option value="8">Item 7</option>
    </select>
    <textarea name="elements[169f7b63-e778-4a1b-ac22-654c2e248bca][0][value]" cols="60" rows="20"> Description</textarea>
    <textarea name="elements[72d27f11-f7b4-4d8e-b076-5c35f8e896de][0][value]" cols="60" rows="20"></textarea>
    <input type="text" id="filename054c769a-f6d0-4db0-b784-129f9f0d4d78" readonly="readonly">
    <input type="file" name="elements_054c769a-f6d0-4db0-b784-129f9f0d4d78" onchange="javascript: document.getElementById('filename054c769a-f6d0-4db0-b784-129f9f0d4d78').value = this.value.replace(/^.*[/]/g, '');">

    <div class="submit">
        <button type="submit" id="submit-button" class="button-green">Submit Item</button>
    </div>
</form>

1 ответ

  1. Да, это, безусловно, возможно. Cordova приложения просто требуют несколько изменений CORS для того, чтобы AJAX работает должным образом.

    Во-первых, убедитесь, что у вас есть плагин Cordova whitelist .

    Во-вторых, убедитесь, что в вашем config.xmlфайле есть следующее:

    <access origin="*" />
    <allow-navigation href="*"/>
    

    Это должно работать,хотя вам также может потребоваться указать Content-Security-Policyмета в заголовках. Эта линия примерно так же безопасна, как вы можете получить в этом отношении:

    <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data:">
    

    И конечно, вам также нужно убедиться, что у вас есть CORS на вашем сервере. Если у вас нет доступа к Apache, вы можете установить это с помощью:

    <?php
    header("Access-Control-Allow-Origin: *");
    

    Надеюсь, это поможет! 🙂

    Редактировать:

    Что касается фактической отправки данных в форму, это зависит от того, как вы хотите, чтобы данные были получены . Я собираюсь предположить, что, как вы пытаетесь сделать это через HTML, что вы ожидаете представление по строкам http://website.com/send-form?name=John&age=34.

    Основная проблема с способом отправки данных-пробелы: data: "name="+ name+"& subject="+ subject+". Раздень их.

    data: "name="+name+"&subject="+subject+"&select-choice-1="+select-choice-1+"& textarea="+textarea+"+"&file="+file+",
    

    В зависимости от того, как вы запускаете серверную часть, вам может потребоваться передать ?в конце сценария, чтобы обозначить, что все, что следует считать переменными. Если это так, вы бы заменить url: "http://website.com/send-form"на url: "http://website.com/send-form?".

    Я также рекомендую ознакомиться с документацией AJAX о том, как передать данные в форму, чтобы вы могли соответствующим образом настроить код.

    EDIT 2

    Чтобы отправить форму через JavaScript, необходимо использовать:

    document.forms["loginForm"].submit();
    

    Обратите внимание, что loginFormв моем примере соответствует ID формы, который вы не установили. В этом случае я использовалloginForm, поэтому вам нужно будет изменить свой HTML, чтобы отразить это:

    // form on app 
    <form id='loginForm'>
    

    Также можно отправлять формы без идентификатора, но это немного сложнее. Вы должны иметь только одну форму на Вашей странице, так что вы, вероятно, также можете использовать:

    document.forms[0].submit();
    

    Не зная идентификатор формы, как document.formsна самом деле массив.

    См. здесь для немного более дальнеишего чтения.

    Надеюсь, это поможет!